BILL TYLER

11.APRIL.2015

A11Y

3 COMMON MISTAKES OF WEBSITE ACCESSIBILITY

ABOUT ME

30+ yrs. of UI/UX Design & Development

12+ yrs. in medical devices

12+ yrs. in plans & providers

2X dot-com survivor

Started web 1996

Started accessibility 2002

Material presented represents

1+ yr. of ongoing research & analysis at Optum Technology

AGENDA• Background: Accessibility (A11y) & WCAG 2.0• A11y: Usual Process• 3 A11y Mistakes: #1, #2 & #3 • What to Do: Demystify WCAG 2.0 & A11y• A211y: Moneyball Approach• Examples: 5 Crits Reviewed• Q&A

A11YAccessibility

11 Letters

ACCESSIBILITY AFFECTS A PERSON NEAR YOU

About 1 in 5 Americans have one or more diagnosed psychological or physical disabilities

LIVE LONG ENOUGH AND

YOUwill be “disabled”in some way

A11YTODAY

“COMMON KNOWLEDGE”

USUAL PROCESS

NO ONE THINKS ABOUT ACCESSIBILITY…except the accessibility expert

OFTEN A REVIEW BY AN A11Y EXPERT OR QA…at the end of the development

ALL ISSUES DIRECTED TO DEVELOPERS TO FIX…or with help from an a11y expert

FINAL RESULT:“SORT OF ACCESSIBLE SITE”

TYPICAL A11Y PROCESS

ADDA11Y HERE QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX) Designer

Business Owner

NO!

ACCESSIBILITY IS NOT

• “MAGIC PIXIE DUST”• A “MYSTERIOUS” PROCESS• A LAST PASS• A FEATURE• “SPECIAL CODE”• LIMITED TO JUST ONE ROLE

WE FOUND 3 COMMON MISTAKES

1. OWNERSHIP: Developer

2. ISSUES: Code

3. ENTRY POINT: Coding

WHATTO DO?

WHAT TO DO

ANALYZEA11Y …orWCAG 2.0

WE WCAG 2.0

WCAG2.0?

WCAG 2.0Web Content

Accessibility Guidelines

Version 2.0

WCAG 2.0

WEB CONTENT ACCESSIBILITY GUIDELINES v2.0

• International Standard from W3C (Worldwide Web Consortium)• Covers Sect. 508 – U.S. Government Standard

• Both now (1998) and future (2015?) versions

• Used and/or referenced by many other countries

STRUCTURE• 4 Principles• 12 Guidelines• 61 Success Criteria (SC or “Crits”)

• 3 Levels from A (lowest) to AAA (highest)

• Hundreds of Techniques

More on WCAG 2.0: http://www.w3.org/TR/WCAG/

Cn u spk WCAG?

wcag2madeeasy.com

A11Y TARGET:

WCAG 2.0

AAConformance

AA CONFORMANCE =

38 A & AA CRITS

23 AAA – OPTIONAL

• Not required, “Extra Credit,” Goals

THE NEED:

ANALYZETHE 38 A & AA CRITS

MEET THE “SQUEEGEE”

SQUEEGEE

Demystifying

WCAG criteria with

3 questions

THE 3 SQUEEGEE QUESTIONS

WHOSE, WHAT & WHERE

SQUEEGEE QUESTION #1

WHOSE IS IT?

WHO “OWNS” EACH CRITERION

& RELATED ISSUES?

WHO OWNS THEM?

1. A11Y SPECIALIST

2. BUSINESS OWNER

3. INTERACTION (IX) DESIGNER – Wireframes

4. VISUAL (VX) DESIGNER – Comps, Style Guide

5. CONTENT AUTHOR – Text, Audio & Video

6. DEVELOPER – HTML, CSS, JavaScript

7. QUALITY ASSURANCE (QA) TESTER

Note: YMMV (Your Mileage May Vary)

• There may not be 1:1 relationship between roles & people.

• One person may have multiple roles; one role may be split amongst multiple people

WHOSE IS IT? SQUEEGEE: OWNERSHIP RESULTS

PRIMARY OWNERSHIPIX Designer: 37% (14)

Content Author: 24% (9)

Developer: 21% (8)

Vx Designer: 16% (6)

Business Owner: 3% (1)

WHOSE IS IT? SQUEEGEE: OWNERSHIP DEFINED

PRIMARY OWNERThe Role with most concern/expertise on subject

- One and only one

SECONDARY OWNERRole(s) with major influence on criterion

CONTRIBUTOR (IMPACT)Roles that affect indirectly or are not deeply involved

WHOSE IS IT? EXAMPLE: COLORS

PRIMARY OWNERSHIPVx Designer has final say on color selection

SECONDARY OWNERSHIPIX Designer’s wireframes use colors

CONTRIBUTORBusiness Owner brand guidelines provide palette

IF OWNERSDON’T TAKE RESPONSIBILITY

THEY LEAVE THEIR DECISIONS TO CHANCE

OR DEVELOPERS

SQUEEGEE QUESTION #2

WHAT IS IT?WHAT IS IT REALLY?

IS IT “NEW” TO OWNER?SHORT ANSWER IS (usually): NO.

WHAT IS IT REALLY? SQUEEGEE: TYPE RESULTS

PRIMARY TYPES

Best Practices: 53% (20)

Primarily A11y: 39% (15)

User Stories: 8% (3)

WHAT IS IT REALLY? SQUEEGEE: TYPES DEFINED

53% BEST PRACTICES• Team members probably already know and do them

• May just need to revise or apply more of them

39% PRIMARILY A11Y• Team members may not know these• A11y Experts train them to help fill in the gaps

8% USER STORIES/STANDARD REQUIREMENTS

• Team members already DO these• Nothing changes (at all)

• Except, maybe, some details

SQUEEGEE QUESTION #3

WHERE IS IT ENTERING?

WHAT DESIGN DECISIONS

OR DELIVERABLES “INTRODUCE” IT?

WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINT RESULTS

PRIMARY INTRODUCTION POINTS

Wireframes: 50% (19)

User Story/Standard Req.: 24% (9)

Style Guide: 18% (7)

Code: 5% (2)

Content: 2% (1)

Design Comps: “0%”

WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINTS DEFINED

50% WIREFRAMES• Structure of interface

24% USER STORY/STANDARD REQUIREMENTS• Definition of functionality

18% STYLE GUIDES• General site presentation

5% CODE• HTML, CSS, JavaScript

2% CONTENT• Text (small & large), terminology, video, audio

0% DESIGN COMPS• Feature presentation design

SO… AGAIN…

WHAT’S GOING

WRONG?

THE PROCESS IS WRONG

ADDA11Y HERE QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX) Designer

Business Owner

LIKE USABILITY…

ACCESSIBILITY SHOULD BE BUILT-IN AT THE START

…& NOT AN AFTERTHOUGHT

A211Y

OUR SOLUTION:

A211yAssigned

Accessibility

11 Letters

A211Y IN A NUTSHELL:

ASSIGN EACH WCAG SUCCESS CRITERION TO APROPRIATE TEAM ROLES

A211Y:

EXISTING SITE TRIAGEExisting site that needs to be made accessible -- OR -- Issues wait until the end of a new site

Whatever the case QA or A11y testing happens after development is complete

Issues assigned to primary owner

• Where they belong• To those who created the

issue• To those who know & care

more about the decision

QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX) Designer

Business Owner

A211Y:

NEW SITE (IDEAL PROCESS)

In the ideal process issues resolved earlier by owners during design

Owners more aware of issues & standards

More “pairs of eyes” aware of potential issues kicking deliverable back to owners

Fewer issues make it to testing

QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX) Designer

Business Owner

A211Y:

SPRINT PROCESSStyle Guide: Address

system-wide design issues (visual, interaction, content,

implementation)

Epic & User Stories (& backlog): Create & Groom

to adequately address a11y needs & requirements

Wireframes & User Stories

(Requirements):“Design in” accessible

interactions Design Comps: Review (against style guide) to prevent inaccessible

presentationReview text & non-text

content appropriateness, technical barriers and level

of distraction

Review code and interfaces for technical

implementation issues & possible accessibility

barriers

A211Y:

SQUEEGEE EXAMPLES

A211Y EXAMPLE: SC 1.3.3 SENSORY CHARACTERISTICS

EXAMPLE: “Press the green button on the right”

PRIMARY OWNER: Content Author

SECONDARY OWNER(S): None

CONTRIBUTOR(S): None

TYPE: A11y, “Best Practice”

ENTRY POINT: Content

NOTES:

• Rare instance of single owner, no secondary owner or contributor

• Example of a “Never” event

A211Y EXAMPLE: SC 2.2.1 TIMING ADJUSTABLE

EXAMPLE: “Session timeout in 2 minutes.

Do you want to continue? Yes / No”

PRIMARY OWNER: Business Owner

SECONDARY OWNER(S): IX Designer

CONTRIBUTOR(S): None

TYPE: Standard Requirements

ENTRY POINT: User Story / Requirements

NOTES:

• Business Owner’s only primary ownership criterion

• Rare Standard Requirement case

A211Y EXAMPLE: SC 2.4.5 MULTIPLE WAYS

EXAMPLE: Search, Site Map & Tree navigation

PRIMARY OWNER: IX Designer

SECONDARY OWNER(S): None

CONTRIBUTOR(S): None

TYPE: Best Practice, Standard Feature

ENTRY POINT: Wireframes (primary), Long Content

NOTES:

• One of several IX Designer-only primary criteria

A211Y EXAMPLE: SC 4.1.2 NAME, ROLE, VALUE

EXAMPLE: “Cool (RIA) Widgets”

PRIMARY OWNER: Developer

SECONDARY OWNER(S): IX Designer

CONTRIBUTOR(S): None

TYPE: Best Practices, A11y

ENTRY POINT(S): Code (primary), Wireframes

NOTES:

• Developer is primary since implementation is criticaland IX Designer may not provide all details

• IX Designer should identify key field properties

A211Y EXAMPLE: SC 1.4.3 COLOR CONTRAST

EXAMPLE: “Blue on light blue”

PRIMARY OWNER: Vx Designer

SECONDARY OWNER(S): None

CONTRIBUTOR(S): Business Owner (Branding)

TYPE: A11y (possibly best practice)

ENTRY POINT(S): Style Guide (primary), Comps

NOTES:

• One of several Vx Designer primary ownership crits

• Vx Designer has no secondary ownership

SO…

TO

SUMMARIZE

MISTAKE #1: OWNERSHIP WHOSE IS IT?

Developers ONLY own 1 in 5 a11y issues (criteria)

IX Designers are #1

MISTAKE #2: ISSUES WHAT IS IT?

Over 50% of a11y issues are existing best practices

A11y-specific is 40%

MISTAKE #3: ENTRY POINT WHERE IS IT (ENTERING)?

50% of a11y issues enter in wireframes

Coding: 5%

FIX EARLYFIX OFTEN

Current(Don’t)

QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX)

Designer

Business Owner

QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX)

Designer

Business Owner

QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX)

Designer

Business Owner

TriageSite

NewSite

A211Y:

SQUEEGEE: OTHER INFOFREQUENCY OF OCCURRENCE

• Every page• Often• Rare• “Never”

ESCALATION TO A11Y SME

SCOPE

• Core / Common (site-wide)• Page / Feature• Content (CMS)

DESIGN ELEMENTS AFFECTED

• Visual Design• Semantics• Forms• Keyboard / Control• Standards• Design Patterns• Content• Time-Based Media (video, audio)

HOW IMPLEMENTED

• Content• (Code) Libraries• Page Templates• HTML• CSS

Q&A

BILL@BILLTYLER.NET

@BILLTYLER

THANK YOU