Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A211Y AN EXPLORATION INTO ACCESSIBILITY, AGILE & WCAG 2.0 
BILL TYLER 
INTERACTIVE DESIGN SERVICES 
OPTUM TECHNOLOGY 
UXPA...
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, ...
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 acc...
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 possib...
ACCESSIBILITY AFFECTS A PERSON NEAR YOU 
About 1 in 5 Americans have one or more diagnosed psychological or physical disab...
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 E...
A11Y: MISUNDERSTANDING 
ACCESSIBILITY IS NOT 
• 
A LAST PASS 
• 
A FEATURE 
• 
A “MYSTERIOUS” PROCESS 
• 
“SPECIAL CODE” 
...
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 i...
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 & res...
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) 
...
WE WCAG2.0
WCAG 2.0 IS… 
TECHNOLOGY & METHODOLOGY NEUTRAL
WCAG 2.0 TECHNOLOGY NEUTRAL 
CHOOSE INTERNET TECHNOLOGY: 
• 
HTML / CSS / JavaScript 
• 
Flash 
• 
PDF 
• 
ASCII Text 
• 
...
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 DES...
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...
A211Y: 0. A11Y SPECIALIST 
• 
A11Y SUBJECT MATTER EXPERT (SME) 
• 
A11Y INSTRUCTOR 
• 
RESOURCE TO ANSWER “DIFFICULT” A11Y...
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 EX...
A211Y: 3. VISUAL (VX) DESIGNER 
• 
PRESENTATION OWNER 
• 
STYLE EXPERT 
• 
LAYOUT CREATOR 
• 
BRAND & DESIGN ENFORCER 
• 
...
A211Y: 4. CONTENT AUTHOR 
• 
AUTHOR OF ALL TEXT “LARGE & SMALL” 
• 
LARGE: PAGES OF TEXT 
• 
SMALL: WORDS OR LABELS 
• 
PR...
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 ...
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...
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...
A211Y: WHOSE IS IT? EXAMPLE: COLOR 
PRIMARY OWNERSHIP 
Vx Designer has final say on color selection 
SECONDARY OWNERSHIP 
...
A211Y: WHOSE IS IT? SQUEEGEE: OWNERSHIP RESULTS 
PRIMARY OWNERSHIP 
IX Designer: 37% (14) 
Content Author: 24% (9) 
Develo...
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 ...
A211Y: WHAT IS IT REALLY? SQUEEGEE: TYPE RESULTS 
PRIMARY TYPES 
Best Practices: 53% (20) 
User Stories: 8% (3) 
Primarily...
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 functio...
A211Y: WHERE IS IT COMING IN? SQUEEGEE: ENTRY POINT RESULTS 
PRIMARY INTRODUCTION POINTS 
User Story/Standard Req.: 24% (9...
A11Y: CURRENT PROCESS 
Issues wait until the end (QA or A11y Testing) 
Issues assigned to Developer to resolve 
Owners oft...
A211Y: BASIC PROCESS 
Issues wait until the end (QA or A11y Testing) 
Issues assigned to primary owner 
• 
Where they belo...
A211Y: IDEAL PROCESS 
In the ideal process issues resolved earlier by owners during design 
Owners more aware of issues & ...
A211Y: SPRINT PROCESS 
Style Guide: Address system-wide design issues (visual, interaction, content, implementation) 
Epic...
A211Y: SQUEEGEE: OTHER INFO 
FREQUENCY OF OCCURRENCE 
• 
Every page 
• 
Often 
• 
Rare 
• 
“Never” 
ESCALATION TO A11Y SME...
A211Y: SOME THINGS NEVER CHANGE 
BUSINESS OWNERS 
• 
Product owner with final say on everything 
IX DESIGNERS 
• 
Interact...
A211Y: SQUEEGEE EXAMPLES
A211Y EXAMPLE: SC 1.3.3 SENSORY CHARACTERISTICS 
EXAMPLE: “Press the green button on the right” 
PRIMARY OWNER: Content Au...
A211Y EXAMPLE: SC 2.2.1 TIMING ADJUSTABLE 
EXAMPLE: “Session timeout in 2 minutes. 
Do you want to continue? Yes / No” 
PR...
A211Y EXAMPLE: SC 2.4.5 MULTIPLE WAYS 
EXAMPLE: Search, Site Map & Tree navigation 
PRIMARY OWNER: IX Designer 
SECONDARY ...
A211Y EXAMPLE: SC 1.4.3 COLOR CONTRAST 
EXAMPLE: “Blue on light blue” 
PRIMARY OWNER: Vx Designer 
SECONDARY OWNER(S): Non...
A211Y EXAMPLE: SC 4.1.2 NAME, ROLE, VALUE 
EXAMPLE: “Cool (RIA) Widgets” 
PRIMARY OWNER: Developer 
SECONDARY OWNER(S): IX...
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 & of...
A211Y: 
SQUEEGEE 
Demystify each WCAG criterion with 3 questions
A211Y: 1. WHOSE IS IT? SQUEEGEE: OWNERSHIP 
3 Levels 
PRIMARY OWNERSHIP 
SECONDARY OWNERSHIP 
CONTRIBUTOR (IMPACT) 
PRIMAR...
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:...
MORE TO COME 
STAY TUNED…
Q&A BILL@BILLTYLER.NET @BILLTYLER 
THANK YOU
Upcoming SlideShare
Loading in …5
×

of

October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 1 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 2 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 3 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 4 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 5 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 6 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 7 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 8 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 9 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 10 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 11 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 12 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 13 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 14 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 15 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 16 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 17 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 18 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 19 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 20 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 21 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 22 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 23 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 24 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 25 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 26 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 27 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 28 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 29 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 30 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 31 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 32 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 33 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 34 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 35 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 36 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 37 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 38 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 39 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 40 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 41 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 42 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 43 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 44 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 45 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 46 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 47 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 48 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 49 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 50 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 51 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 52 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 53 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 54 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 55 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 56 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 57 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 58 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 59 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 60 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 61 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 62 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 63 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 64 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 65 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 66 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 67 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 68 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 69 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 70 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 71 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 72 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 73 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 74 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 75 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 76 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 77 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 78 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 79 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 80 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 81 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 82 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 83 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 84 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 85 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 86 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 87 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 88 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 89 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 90 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 91 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 92 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 93 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 94 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 95 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 96 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 97 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 98 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 99 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 100 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 101 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 102 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 103 October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0 Slide 104
Upcoming SlideShare
CSUN 2017 Success Criteria: Dependencies and Prioritization
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0

Download to read offline

Your website needs to be accessible. You worked on it for some time to make it that way. You probably felt that the process, especially in an Agile environment, didn't feel right.

Why?

This presentation addresses the misconceptions about accessibility based upon analysis of WCAG 2.0 criteria in Agile front-end development. From that analysis a new way of approach toward accessibility arose: A211y, under development at Optum Technology (UnitedHealth Group). This presentation is about insights and ways to improve both existing processes and outcomes and moving beyond "the basics."

Bill has been UI/UX/IX Designer/Developer for over 30 years with extensive work in medical devices (13 yr.), health plans & wellness (12 yrs.) as well as a "double dotcom survivor." For the past 12 years he has worked on accessibility and also been a member of UxPA-MN. He became a UX/IX Designer in the Interactive Design Services group of Optum Technology (UHG) in 2010 and been focused solely on accessibility for the past year.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

October 2014 | A211y - An Exploration into Accessibility, Agile & WCAG 2.0

  1. 1. A211Y AN EXPLORATION INTO ACCESSIBILITY, AGILE & WCAG 2.0 BILL TYLER INTERACTIVE DESIGN SERVICES OPTUM TECHNOLOGY UXPA-MN 9.OCTOBER.2014
  2. 2. Before we start…
  3. 3. About this prezo…
  4. 4. More input  OPINIONS  OBSERVATIONS  OPPORTUNITIES
  5. 5. AGENDA BACKGROUND • About me • Accessibility: Usual Process A211Y •Foundation: WCAG 2.0 & Roles •Squeegee: Whose, What & Where? •Process •Examples •Q&A
  6. 6. ABOUT ME Bill Tyler
  7. 7. ABOUT ME Programmer by formal education (long, long ago)
  8. 8. ABOUT ME 30+ years of UI/UX Design & Development Seminal Event: SIGGRAPH ‘84
  9. 9. 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
  10. 10. NOW ON WITH THE SHOW…
  11. 11. A11Y Accessibility 11 Letters
  12. 12. 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
  13. 13. ACCESSIBILITY AFFECTS A PERSON NEAR YOU About 1 in 5 Americans have one or more diagnosed psychological or physical disabilities
  14. 14. LIVE LONG ENOUGH AND YOU will be “disabled” in some way
  15. 15. A11Y TODAY
  16. 16. 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
  17. 17. A11Y: MISUNDERSTANDING ACCESSIBILITY IS NOT • A LAST PASS • A FEATURE • A “MYSTERIOUS” PROCESS • “SPECIAL CODE” • “MAGIC PIXIE DUST” • LIMITED TO JUST ONE ROLE
  18. 18. A11Y: POSITIONING LIKE USABILITY… ACCESSIBILITY SHOULD BE BUILT-IN AT THE START …& NOT AN AFTERTHOUGHT
  19. 19. WHY IS A11Y SO HARD?
  20. 20. THE PROBLEM IS CHOICE
  21. 21. OR… THE PROBLEMS ARE CHOICES
  22. 22. ALL THE LITTLE DESIGN CHOICES… MADE WITHOUT UNDERSTANDING A11Y ISSUES & CRITERIA…
  23. 23. CAN LEAD TO INACCESSIBLE WEBSITES
  24. 24. UNLIKE USABILITY THERE ARE FORMAL CRITERIA & GUIDELINES THAT MUST BE MET INCLUDING U.S. LAW
  25. 25. IMAGINE JAKOB’S RULES AS ACTUAL LAWS
  26. 26. A11Y, WCAG 2.0, SECT. 508 STILL APPLY EVEN IF YOU DON’T KNOW OR DO ANYTHING ABOUT THEM
  27. 27. NOT CONSCIOUSLY OR ACTIVELY MAKING A11Y CHOICES DELEGATES THOSE DECISIONS TO CHANCE OR DEVELOPERS
  28. 28. SO… HOW TO CHOOSE?
  29. 29. THERE WERE STEPS
  30. 30. 1. RESEARCH GUIDELINES
  31. 31. 2. ASK QUESTIONS
  32. 32. 3. FOLLOW THE ANSWERS
  33. 33. 4. ANALYZE RESULTS
  34. 34. 5. REPEAT UNTIL INSIGHT
  35. 35. A211Y OUR SOLUTION:
  36. 36. A211y Assigned Accessibility 11 Letters
  37. 37. A211y Assigned Accessibility Using WCAG 2.0
  38. 38. A211Y IN A NUTSHELL: ASSIGN EACH WCAG SUCCESS CRITERION TO APROPRIATE TEAM ROLES
  39. 39. 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”
  40. 40. A211Y: APPROACH UTILIZE EXISTING EXPERTISE OF TEAM MEMBERS THEY ALREADY KNOW MUCH OF WHAT IS NEEDED
  41. 41. A211Y: APPROACH MAXIMIZE A11Y EXPERTISE MINIMIZE ADDITIONAL A11Y STAFF REQUIRED
  42. 42. 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
  43. 43. A211Y FOUNDATION WCAG 2.0
  44. 44. WCAG 2.0 Web Content Accessibility Guidelines Version 2.0
  45. 45. 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/
  46. 46. WE WCAG2.0
  47. 47. WCAG 2.0 IS… TECHNOLOGY & METHODOLOGY NEUTRAL
  48. 48. WCAG 2.0 TECHNOLOGY NEUTRAL CHOOSE INTERNET TECHNOLOGY: • HTML / CSS / JavaScript • Flash • PDF • ASCII Text • Silverlight • Client or Server-side
  49. 49. WCAG 2.0 METHODOLOGY NEUTRAL BOTH DEVELOPMENT& DESIGN
  50. 50. METHODOLOGY NEUTRAL: DEVELOPMENT APPROACHES • AGILE (OUR CHOICE) • ITERATIVE • WATERFALL • [ YOUR APPROACH ]
  51. 51. METHODOLOGY NEUTRAL: A11Y SOLUTIONS • A WEB FOR EVERYONE • INCLUSIVE DESIGN • UNIVERSAL DESIGN • USER-CENTERED DESIGN • [ YOUR APPROACH ]
  52. 52. A11Y HOLISTIC SOLUTIONS: SARAH HORTON A Web for Everyone = WCAG + Universal Design + Design Thinking
  53. 53. A11Y HOLISTIC SOLUTIONS: ME (BILL TYLER) A11Y = USABILITY + (MORE) USER TYPES
  54. 54. A11Y HOLISTIC SOLUTIONS: USE WHAT WORKS FOR YOU & YOUR SITE(S) YOU CAN STILL USE A211Y
  55. 55. A211Y FOUNDATION ASSIGN THE 38 A & AA CRITS 23 AAA – OPTIONAL • Many worth adding, but not required
  56. 56. A211Y FOUNDATION ASSIGN THE 38 A & AA CRITS TO…
  57. 57. A211Y FOUNDATION AGILE TEAM ROLES
  58. 58. 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
  59. 59. A211Y: 0. A11Y SPECIALIST • A11Y SUBJECT MATTER EXPERT (SME) • A11Y INSTRUCTOR • RESOURCE TO ANSWER “DIFFICULT” A11Y QUESTIONS • A11Y TESTER
  60. 60. A211Y: 1. BUSINESS OWNER • STANDARD AGILE ROLE • PROJECT INITIATOR • REQUIREMENTS DEFINER • RESULT APPROVER
  61. 61. A211Y: 2. INTERACTION (IX) DESIGNER • BUSINESS LIAISON • REQUIREMENT TRANSLATOR • WIREFRAME CREATOR • USABILITY EXPERT - LIKELY FIRST LINE OF A11Y DEFENSE
  62. 62. A211Y: 3. VISUAL (VX) DESIGNER • PRESENTATION OWNER • STYLE EXPERT • LAYOUT CREATOR • BRAND & DESIGN ENFORCER • STYLE GUIDE AUTHOR • COMP ARTIST • IMAGE FILE PRODUCER
  63. 63. 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
  64. 64. A211Y: 5. DEVELOPER • PROGRAMMER, CODER • LAST STOP BEFORE TESTING • PRIMARY TARGET FOR ALL DEFECTS
  65. 65. A211Y: 6. QA TESTER • DISCOVERER OF PROBLEMS • WRITER OF DEFECTS • ENFORCER OF QUALITY • LAST STOP BEFORE RELEASE • NOT PART OF DESIGN PROCESS
  66. 66. A211Y FOUNDATION ASSIGNING CRITS TO ROLES
  67. 67. A211Y: MEET THE “SQUEEGEE”
  68. 68. A211Y: SQUEEGEE DEFINED SQUEEGEE? • “De-Mystifying criteria” • “The Skinny” • Translate WCAG to something each role understands
  69. 69. A211Y: SQUEEGEE IS THE… WHOSE, WHAT & WHERE OF WCAG CRITERIA
  70. 70. A211Y: SQUEEGEE QUESTION 1 WHOSE IS IT? WHO “OWNS” EACH CRITERION & RELATED ISSUES?
  71. 71. A211Y: SQUEEGEE QUESTION 2 WHAT IS IT? (WHAT IS IT REALLY?) IS IT “NEW” TO ROLE OWNER? SHORT ANSWER IS (usually): NO.
  72. 72. A211Y: SQUEEGEE QUESTION 3 WHERE IS IT COMING IN? WHAT DESIGN DECISIONS OR DELIVERABLES “INTRODUCE” IT?
  73. 73. ANALYSIS & RESULTS
  74. 74. A211Y: SQUEEGEE QUESTION 1 WHOSE IS IT? DEFINE OWNERSHIP
  75. 75. 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
  76. 76. 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
  77. 77. 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)
  78. 78. A211Y: SQUEEGEE QUESTION 2 WHAT IS IT REALLY ? DEFINE TYPES
  79. 79. 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
  80. 80. A211Y: WHAT IS IT REALLY? SQUEEGEE: TYPE RESULTS PRIMARY TYPES Best Practices: 53% (20) User Stories: 8% (3) Primarily A11y: 39% (15)
  81. 81. WHERE IS IT COMING IN? DEFINE ENTRY POINT A211Y: SQUEEGEE QUESTION 3
  82. 82. 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
  83. 83. 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)
  84. 84. 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
  85. 85. 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
  86. 86. 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
  87. 87. 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
  88. 88. 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
  89. 89. 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)
  90. 90. A211Y: SQUEEGEE EXAMPLES
  91. 91. 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
  92. 92. 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
  93. 93. 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
  94. 94. 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
  95. 95. 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
  96. 96. SO… TO SUMMARIZE
  97. 97. A211Y: ASSIGNS EACH WCAG SUCCESS CRITERION TO APROPRIATE TEAM ROLES
  98. 98. A211Y: EDUCATES each role on a11y UTILIZES each role’s expertise MAXIMIZES use of a11y SME “DESIGN IN” a11y early & often
  99. 99. A211Y: SQUEEGEE Demystify each WCAG criterion with 3 questions
  100. 100. 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)
  101. 101. A211Y: WHAT IS IT REALLY? SQUEEGEE: TYPE Best Practices: 53% (20) User Stories: 8% (3) Primarily A11y: 39% (15)
  102. 102. 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)
  103. 103. MORE TO COME STAY TUNED…
  104. 104. Q&A BILL@BILLTYLER.NET @BILLTYLER THANK YOU
  • msales

    Aug. 14, 2019
  • tablan

    Nov. 12, 2014

Your website needs to be accessible. You worked on it for some time to make it that way. You probably felt that the process, especially in an Agile environment, didn't feel right. Why? This presentation addresses the misconceptions about accessibility based upon analysis of WCAG 2.0 criteria in Agile front-end development. From that analysis a new way of approach toward accessibility arose: A211y, under development at Optum Technology (UnitedHealth Group). This presentation is about insights and ways to improve both existing processes and outcomes and moving beyond "the basics." Bill has been UI/UX/IX Designer/Developer for over 30 years with extensive work in medical devices (13 yr.), health plans & wellness (12 yrs.) as well as a "double dotcom survivor." For the past 12 years he has worked on accessibility and also been a member of UxPA-MN. He became a UX/IX Designer in the Interactive Design Services group of Optum Technology (UHG) in 2010 and been focused solely on accessibility for the past year.

Views

Total views

1,229

On Slideshare

0

From embeds

0

Number of embeds

22

Actions

Downloads

20

Shares

0

Comments

0

Likes

2

×