october 2014 | a211y - an exploration into accessibility, agile & wcag 2.0

A211Y AN EXPLORATION INTO ACCESSIBILITY, AGILE & WCAG 2.0 BILL TYLER INTERACTIVE DESIGN SERVICES OPTUM TECHNOLOGY UXPA-MN 9.OCTOBER.2014

Before we start…

About this prezo…

More input

OPINIONS OBSERVATIONS OPPORTUNITIES

AGENDA BACKGROUND

• About me • Accessibility: Usual Process

A211Y

• Foundation: WCAG 2.0 & Roles • Squeegee: Whose, What & Where? • Process • Examples • Q&A

ABOUT ME

Bill Tyler

ABOUT ME Programmer by formal education (long, long ago)

ABOUT ME 30+ years of UI/UX Design & Development

Seminal Event: SIGGRAPH ‘84

ABOUT ME 12+ years in medical devices 12+ years in plans & providers 2X dot-com survivor Started web 1996 Started accessibility 2002 Material presented represents 9+ months research & analysis at Optum Technology

UxPA-MN since 2002

NOW ON WITH THE SHOW…

A11Y Accessibility

11 Letters

ACCESSIBILITY IS… the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the "ability to access" and benefit from some system or entity. The concept often focuses on people with disabilities or special needs (such as the Convention on the Rights of Persons with Disabilities) and their right of access, enabling the use of assistive technology.

http://en.wikipedia.org/wiki/Accessibility




ACCESSIBILITY AFFECTS A PERSON NEAR YOU

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

LIVE LONG ENOUGH AND

YOU will be “disabled” in some way

A11Y TODAY

A11Y: USUAL PROCESS NO ONE THINKS ABOUT ACCESSIBILITY …except the accessibility expert

OFTEN A FINAL REVIEW BY AN A11Y EXPERT …or QA test pass

ALL ISSUES DIRECTED TO DEVELOPERS TO FIX FINAL RESULTS OFTEN NOT AS ACCESSIBLE AS DESIRED

A11Y: MISUNDERSTANDING

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

A11Y: POSITIONING

LIKE USABILITY…

ACCESSIBILITY SHOULD BE BUILT-IN AT THE START …& NOT AN AFTERTHOUGHT

WHY IS A11Y SO HARD?

THE PROBLEM IS

CHOICE

OR… THE PROBLEMS ARE

CHOICES

ALL THE LITTLE DESIGN CHOICES…

MADE WITHOUT UNDERSTANDING A11Y ISSUES & CRITERIA…

CAN LEAD TO

INACCESSIBLE WEBSITES

UNLIKE USABILITY

THERE ARE FORMAL CRITERIA & GUIDELINES THAT MUST BE MET INCLUDING U.S. LAW

IMAGINE JAKOB’S RULES AS

ACTUAL LAWS

A11Y, WCAG 2.0, SECT. 508 STILL APPLY

EVEN IF YOU DON’T KNOW OR DO ANYTHING ABOUT THEM

NOT CONSCIOUSLY OR ACTIVELY MAKING A11Y CHOICES

DELEGATES THOSE DECISIONS TO CHANCE OR DEVELOPERS

SO…

HOW TO CHOOSE?

THERE WERE

STEPS

1.

RESEARCH GUIDELINES

2.

ASK QUESTIONS

3.

FOLLOW THE ANSWERS

4.

ANALYZE RESULTS

5.

REPEAT UNTIL INSIGHT

A211Y

OUR SOLUTION:

A211y Assigned

Accessibility

11 Letters

A211y Assigned

Accessibility Using WCAG 2.0

A211Y IN A NUTSHELL:

ASSIGN EACH WCAG SUCCESS CRITERION TO APROPRIATE TEAM ROLES

A211Y: APPROACH

EDUCATE TEAM MEMBERS ON HOW THEIR CHOICES IMPACT A11Y

BY ROLE, NOT “GENERICALLY” • Train ONLY issues important for each role • Includes things they “own (or impact) but don’t know they

own”

A211Y: APPROACH

UTILIZE EXISTING EXPERTISE OF TEAM MEMBERS THEY ALREADY KNOW MUCH OF WHAT IS NEEDED

A211Y: APPROACH

MAXIMIZE A11Y EXPERTISE MINIMIZE ADDITIONAL A11Y STAFF REQUIRED

A211Y: GOALS

REDUCE TIME REQUIRED TO DELIVER ACCESSIBLE PRODUCTS

• Prevent issues before they happen • Identify & resolve them as early as possible

IMPROVE OVERALL ACCESSIBILITY MEETING (EXCEEDING) GUIDELINES

A211Y FOUNDATION

WCAG 2.0

WCAG 2.0 Web Content Accessibility

Guidelines Version 2.0

A11Y: 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/

WE WCAG 2.0

WCAG 2.0 IS…

TECHNOLOGY & METHODOLOGY NEUTRAL

WCAG 2.0 TECHNOLOGY NEUTRAL CHOOSE INTERNET TECHNOLOGY: • HTML / CSS / JavaScript • Flash • PDF • ASCII Text • Silverlight • Client or Server-side

WCAG 2.0 METHODOLOGY NEUTRAL

BOTH DEVELOPMENT& DESIGN

METHODOLOGY NEUTRAL:

DEVELOPMENT APPROACHES

• AGILE (OUR CHOICE)

• ITERATIVE • WATERFALL • [ YOUR APPROACH ]

METHODOLOGY NEUTRAL:

A11Y SOLUTIONS

• A WEB FOR EVERYONE • INCLUSIVE DESIGN • UNIVERSAL DESIGN • USER-CENTERED DESIGN • [ YOUR APPROACH ]

A11Y HOLISTIC SOLUTIONS: SARAH HORTON

A Web for Everyone = WCAG + Universal Design + Design Thinking

A11Y HOLISTIC SOLUTIONS: ME (BILL TYLER)

A11Y = USABILITY + (MORE) USER TYPES

A11Y HOLISTIC SOLUTIONS:

USE WHAT WORKS FOR YOU & YOUR SITE(S) YOU CAN STILL USE A211Y

A211Y FOUNDATION

ASSIGN THE 38 A & AA CRITS 23 AAA – OPTIONAL

• Many worth adding, but not required

A211Y FOUNDATION

ASSIGN THE 38 A & AA CRITS TO…

A211Y FOUNDATION

AGILE TEAM ROLES

A211Y: THE SEVEN AGILE ROLES 0. A11Y SPECIALIST 1. BUSINESS OWNER 2. INTERACTION (IX) DESIGNER 3. VISUAL (VX) DESIGNER 4. CONTENT AUTHOR 5. DEVELOPER 6. 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

A211Y: 0. A11Y SPECIALIST

• A11Y SUBJECT MATTER EXPERT (SME) • A11Y INSTRUCTOR • RESOURCE TO ANSWER

“DIFFICULT” A11Y QUESTIONS • A11Y TESTER

A211Y: 1. BUSINESS OWNER

• STANDARD AGILE ROLE • PROJECT INITIATOR • REQUIREMENTS DEFINER • RESULT APPROVER

A211Y: 2. INTERACTION (IX) DESIGNER

• BUSINESS LIAISON • REQUIREMENT TRANSLATOR • WIREFRAME CREATOR • USABILITY EXPERT

- LIKELY FIRST LINE OF A11Y DEFENSE

A211Y: 3. VISUAL (VX) DESIGNER

• PRESENTATION OWNER • STYLE EXPERT • LAYOUT CREATOR • BRAND & DESIGN ENFORCER • STYLE GUIDE AUTHOR • COMP ARTIST • IMAGE FILE PRODUCER

A211Y: 4. CONTENT AUTHOR

• AUTHOR OF ALL TEXT “LARGE & SMALL” • LARGE: PAGES OF TEXT • SMALL: WORDS OR LABELS

• PROOFREADER

• INCLUDES TIME-BASED (MULTIMEDIA) CONTENT – AUDIO & VIDEO

• SCRIPT WRITER • AUDIO & VIDEO FILE CREATOR

A211Y: 5. DEVELOPER

• PROGRAMMER, CODER • LAST STOP BEFORE TESTING • PRIMARY TARGET FOR ALL DEFECTS

A211Y: 6. QA TESTER

• DISCOVERER OF PROBLEMS • WRITER OF DEFECTS • ENFORCER OF QUALITY • LAST STOP BEFORE RELEASE

• NOT PART OF DESIGN PROCESS

A211Y FOUNDATION

ASSIGNING CRITS TO ROLES

A211Y: MEET THE “SQUEEGEE”

A211Y: SQUEEGEE DEFINED

SQUEEGEE? • “De-Mystifying criteria” • “The Skinny” • Translate WCAG to something each role understands

A211Y: SQUEEGEE IS THE…

WHOSE, WHAT & WHERE OF WCAG CRITERIA

A211Y: SQUEEGEE QUESTION 1

WHOSE IS IT? WHO “OWNS” EACH CRITERION & RELATED ISSUES?


WHAT IS IT? (WHAT IS IT REALLY?)

IS IT “NEW” TO ROLE OWNER?

SHORT ANSWER IS (usually): NO.


WHERE IS IT COMING IN? WHAT DESIGN DECISIONS OR DELIVERABLES “INTRODUCE” IT?

ANALYSIS &

RESULTS


WHOSE IS IT? DEFINE OWNERSHIP

A211Y: WHOSE IS IT? SQUEEGEE: OWNERSHIP DEFINED

PRIMARY OWNERSHIP The Role with most concern/expertise on subject - One and only one

SECONDARY OWNERSHIP Role(s) with major influence on criterion

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

A211Y: WHOSE IS IT? EXAMPLE: COLOR

PRIMARY OWNERSHIP Vx Designer has final say on color selection

SECONDARY OWNERSHIP IX Designer’s wireframes use colors

CONTRIBUTOR Business Owner brand guidelines provide palette

A211Y: WHOSE IS IT? SQUEEGEE: OWNERSHIP RESULTS

PRIMARY OWNERSHIP IX Designer: 37% (14) Content Author: 24% (9) Developer: 21% (8) Vx Designer: 16% (6) Business Owner: 3% (1)


WHAT IS IT REALLY ? DEFINE TYPES

A211Y: WHAT IS IT REALLY? SQUEEGEE: TYPES DEFINED

USER STORIES / STANDARD REQUIREMENTS • Team members already DO these • Nothing changes (at all)

• Except, maybe, some details

BEST PRACTICES • Team members probably already know and do them

• May just need to revise or apply more of them

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

A211Y: WHAT IS IT REALLY? SQUEEGEE: TYPE RESULTS

PRIMARY TYPES Best Practices: 53% (20) User Stories: 8% (3) Primarily A11y: 39% (15)

WHERE IS IT COMING IN? DEFINE ENTRY POINT


A211Y: WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINTS DEFINED USER STORY / STANDARD REQUIREMENTS

• Definition of functionality WIREFRAMES

• Structure of interface STYLE GUIDES

• General site presentation DESIGN COMPS

• Feature presentation design CONTENT

• Text (small & large), terminology, video, audio CODE

• HTML, CSS, JavaScript

A211Y: WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINT RESULTS

PRIMARY INTRODUCTION POINTS User Story/Standard Req.: 24% (9) Wireframes: 50% (19) Style Guide: 18% (7) Design Comps: “0%” Content: 2% (1) Code: 5% (2)

A11Y: CURRENT PROCESS

Issues wait until the end (QA or A11y Testing) Issues assigned to Developer to resolve Owners often unaware of issues or resolution Often owners repeat decision (so it happens again) Note: For simplicity, flow diagrams appear to show a “waterfall” approach. In Agile this would have more parallel and concurrent paths

QA / A11y Testing

Developers

Content Author

Visual (Vx) Designer

Interaction (IX) Designer

Business Owner

A211Y: BASIC PROCESS

Issues wait until the end (QA or A11y Testing) 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



Business Owner

A211Y: 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



Business Owner

A211Y: SPRINT PROCESS

Style 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

presentation Review text & non-text

content appropriateness, technical barriers and level

of distraction

Review code and interfaces for technical

implementation issues & possible accessibility

barriers

A211Y: SQUEEGEE: OTHER INFO

FREQUENCY 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

A211Y: SOME THINGS NEVER CHANGE BUSINESS OWNERS

• Product owner with final say on everything IX DESIGNERS

• Interaction owner and usability expert defining operation VX DESIGNERS

• Presentation owner of colors, fonts, images & layout CONTENT AUTHORS

• Wordsmith responsible for all content, text, audio & video DEVELOPERS

• Code owner & debugger (HTML, CSS, JavaScript)

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 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

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 critical

and IX Designer may not provide all details • IX Designer should identify key field properties

SO…

TO

SUMMARIZE

A211Y:

ASSIGNS EACH WCAG SUCCESS CRITERION TO APROPRIATE TEAM ROLES

A211Y:

EDUCATES each role on a11y UTILIZES each role’s expertise MAXIMIZES use of a11y SME “DESIGN IN” a11y early & often

A211Y:

SQUEEGEE Demystify each WCAG criterion with 3 questions

A211Y: 1. WHOSE IS IT? SQUEEGEE: OWNERSHIP 3 Levels

PRIMARY OWNERSHIP SECONDARY OWNERSHIP CONTRIBUTOR (IMPACT)

PRIMARY OWNERSHIP IX Designer: 37% (14) Content Author: 24% (9) Developer: 21% (8) Vx Designer: 16% (6) Business Owner: 3% (1)

A211Y: WHAT IS IT REALLY? SQUEEGEE: TYPE

Best Practices: 53% (20) User Stories: 8% (3) Primarily A11y: 39% (15)

A211Y: WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINT

User Story/Standard Req.: 24% (9) Wireframes: 50% (19) Style Guide: 18% (7) Comps: “0%” Content: 2% (1) Code: 5% (2)

MORE TO COME

STAY TUNED…

Q&A [email protected] @BILLTYLER

THANK YOU

mailto:[email protected]