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.

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

693 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

×