Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility
October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0
-
Upload
uxpa-mn -
Category
Technology
-
view
190 -
download
4
description
Transcript of 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?
A211Y: SQUEEGEE QUESTION 2
WHAT IS IT? (WHAT IS IT REALLY?)
IS IT “NEW” TO ROLE OWNER?
SHORT ANSWER IS (usually): NO.
A211Y: SQUEEGEE QUESTION 3
WHERE IS IT COMING IN? WHAT DESIGN DECISIONS OR DELIVERABLES “INTRODUCE” IT?
ANALYSIS &
RESULTS
A211Y: SQUEEGEE QUESTION 1
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)
A211Y: SQUEEGEE QUESTION 2
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: SQUEEGEE QUESTION 3
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
Visual (Vx) Designer
Interaction (IX) Designer
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
Visual (Vx) Designer
Interaction (IX) Designer
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…