Web Accessibility fundamentals (for qa and product owners)

Transcript

1. Web Accessibility fundamentals (For QA & Product) October, 22nd 2019 David Dias
3. Overview • What is Web Accessibility? • How browsers communicate with screen readers? • What is WCAG? • What about ARIA? • Tools to check a11y issues • Processes to stay a11y?
4. What is Web Accessibility (a11y)?
6. « Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. » Web Accessibility
7. Inclusive Design Research Center - OCAD a mismatch between the needs of the individual and the design of the product, system, or service. Disability is
8. Source: Microsoft Inclusive Design
10. https://disabilitycompendium.org/sites/default/ fi les/user-uploads/2016_AnnualReport.pdf (online) (online)
11. https://www.toronto.ca/legdocs/mmis/2016/ah/bgrd/background fi le-94585.pdf Ontario: Approx. 1.85 million people report having a disability, representing 15.5% of the population. 70% of disabilities are ‘invisible’ Toronto: Apply 15.5% to Toronto’s population 2.79 million people = 432,450 people with disabilities
12. AODA complainte timelines
13. What is WCAG?
14. « The WCAG regroups a series of guidelines for improving web accessibility. Produced by the World Wide Web Consortium (W3C), the WCAG are the best means of making your website useful to all of your users » WCAG
15. • Outlines best practices for making web content universally Perceivable, Operable, Understandable, and Robust. • Defines criteria for successful inclusive web design, with ascending levels of compliance (levels A, AA, and AAA). • Is composed and reviewed by a global community of digital experts. • Connects the world through common information technology and user experience standards. Aspects of WCAG (“whuh-cag”)
16. History of WCAG October 1, 1994 World Wide Web Consortium is founded. May 5, 1999 WCAG 1.0 is released. December 11, 2008 WCAG 2.0 is released. October 2012 WCAG 2.0 become ISO standard ISO/IEC 40500. June 5, 2018 WCAG 2.1 is released.
17. WCAG 1.0, 2.0, 2.1? WCAG 1.0 Uses guidelines and each guideline has a checkpoint, which are priority 1, 2, or 3. WCAG 2.0 Uses four design principles and each principle has a guideline. Each guideline has a success criteria level A, AA, or AAA. WCAG 2.1 WCAG 2.1 is backwards compatible with WCAG 2.0. The 2.0 success criteria are the same as in 2.1, but 2.1 has additional success criteria.
19. 4 principles
21. Perceivable This means that users must be able to perceive the information being presented – it cannot be invisible to all of their senses. Ask Yourself: Is There anything on our website that a blind, deaf, low vision or color blind user would not be able to perceive? Can I see it? Hear it? Feel it?
22. Perceivable - Alternative text https://webaim.org/articles/voiceover/images
23. Perceivable - Don’t relay only on colors https://www.kaylaheffernan.com/blog/2017/1/17/press-the-pink-buttondesigning-for-colour-blind-users
24. https://www.kaylaheffernan.com/blog/2017/1/17/press-the-pink-buttondesigning-for-colour-blind-users
25. Operable Ask Yourself: Can users control interactive elements of the website? Does the website make completing tasks easy? Can I scroll it? Fill it? Move it? Users must be able to operate the interface – the interface cannot require interaction that a user cannot perform.
27. Understandable Users must be able to understand the information as well as the operation of the user interface – the content or operation cannot be beyond their understanding. Ask Yourself: Is all of the text on our website clearly written? Are all of the interactions easy to understand? Can I read it? Get it? Predict how it will behave?
28. Robust It means that users must be able to access the content as technologies advance – as technologies and user agents evolve, the content should remain accessible. Ask Yourself: Does our website only support the newest browsers or operating systems? Is our website developed with best practices? It is standard enough that it will work with all my tools?
29. Quiz
30. - Live videos has captions - Provide descriptive link text - Provide ability to skip content - Explain any unusal word - No major code error Perceivable, Operable, Understandable or Robust Perceivable Perceivable Operable Understandable Robust
31. 3 levels of digital accessibility
33. ARIA - Level AAA • A: This level improves accessibility for most sites by making it easier for browsing readers to navigate a site and translate its content, but it is still pretty basic. Required
34. ARIA - Level AA Required • AA: This level makes content accessible to people with a wider range of disabilities by providing guidance on elements such as color contrast and error identi fi cation. Regulators prefer this level.
35. ARIA - Level AAA • AAA: The highest level of accessibility compliance, this makes content accessible to the widest range of people, but it can signi fi cantly alter the design of a site. Government legislation doesn’t typically require this because it’s not always possible to conform. Optional
36. What about ARIA?
37. « ARIA (Accessible Rich Internet Applications) is a spec from the W3C and created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. The speci fi cations adds the ability to modify and enhance the semantic meaning of elements in the DOM.» WAI-ARIA
38. ARIA does NOT change behavior
39. ARIA let you fi ll in gaps in the accessibility tree.
40. How browsers communicate with screen readers?
41. How the browser communicate with a screen reader? GUI
42. HTML <!DOCTYPE html> <html lang="en"> <head> <title>How old are you? </ title> </ head> <body> <label for="age">Age < / label> <input type="text" name="age" id="age" value="35"> <div> <button>Back < / button> <button>Next < / button> < / div> </ body> </ html> Accessibility Tree id=1 role=WebArea name=“How old are you?” id=2 role=Label name=“Age” id=3 role=TextField labelledByIds=[2] value=“42” id=4 role=Group id=5 role=Button name=“Back id=6 role=Button name=“Next”
43. Programmatic semantics Role: “combobox” Name: “Preferred seat type” State: collapse Value: “Aisle seat”
45. Aria lets you step in there
46. bit.ly/aria-guide
48. Aria’s rules
49. Where possible, use correct semantic HTML elements. Don’t use ARIA as a quick- fi x.
50. 2-5 rules of Aria 2. Do not change native semantics, unless you really have to. 3. All interactive ARIA controls must be usable with the keyboard. 4. Do not use role=“presentation” or aria-hidden=“true” on a visible focusable element. 5. All interactive elements must have an accessible name.
51. Aria role, state & properties
52. Aria roles: what is it? • Landmark: large content areas • Document: structural description for a section • Widget: interactive patterns without semantic equivalents in HTML (menu, slider, progress bar, etc)
54. Landmarks <header /> <main /> <footer /> <nav /> <section /> <form /> <aside /> banner main contentinfo navigation region form complementary search HTML5 Role
55. Demo landmarks With landmark extension VO + U
56. Aria state: what is the current state of the widget? It is checked, expanded, disabled?
57. Aria properties: what are the properties of the widget? Does it have live regions, does it have relationships with other elements, etc?
58. Demo checkbox
60. The State of A11y (2019)
61. • Nearly 10,000 users worldwide • 477 cities in 61 countries on every continent • 6,000,000 URLs tester • 470,000 unique domaine Source: tenon.io
62. Isues by Affected Population (Auto) 0 4.5 9 13.5 18 Images and Non-text Content Tables CSS Forms Navigation Frames Document Structure Language, typography and content Dynamic Content Multimedia Keyboard Accessibility and Focus Control Custom Controls
63. Isues by Level (Auto) 6% 18% 77% Level A (77%) Level AA (18%) Level AAA (6%)
64. Perceivable Operable Understandable Robust 0 12.5 25 37.5 50 Issues by Principle (auto)
65. But we know automation isn’t enough
66. What can be tested and how? WCAG Level Auto Semi-Auto
 (veri fi cation required) Manual Only Level A 25% 29% 46% Level AA 17% 41% 41% Level AAA 28% 24% 53% Average 18% 31% 47%
67. Isues by Affected Population (Manual) 0 4.5 9 13.5 18 Keyboard Accessibility and Focus Control Document Structure Other Text Content and Typography Role, State and Accessibility Properties Color Tables Images and Non-text Content Dynamic Content Forms Frames Navigation Global
68. Isues by Level (Manual) 4% 21% 75% Level A (75%) Level AA (21%) Level AAA (4%)
69. Isues by Severity (Manual) 15% 41% 44% High (44%) Medium (41%) Low (15%)
70. Isues by Affected Population (Manual) 0 15 30 45 60 Blind Low-Vision Cognitively Impaired Motor Impaired Deaf / Hard-of-hearing Speech Impaired
71. Isues by Platform (Manual) 0 15 30 45 60 All/Universal Mac VoiceOver Window High Contrast Windows Screen Reader Android TalkBack Windows Dragon Windows ZoomText iOS - VoiceOver
72. Top 90% of issues by category 1. Images and Non-text Content 2. Navigation 3. Language, typography and content 4. Custom Controls 5. Document Structure Source: tenon.io 1. Keyboard Accessibility and Focus Control 2. Document Structure 3. Color 4. Language, typography and content 5. Role, State and Accessibility Properties 6. Forms 7. Images and Non-text Content 8. Navigation Automated Manuel
73. Top 10 failing (auto) 80/20 • 1.1.1 Non-text Content (Level A) • 2.4.4 Link purpose (In Context)(Level A) • 1.3.1 Info and Relationships (Level A) • 4.1.2 Name, Role, Value (Level A) • 3.3.2 Labels or Instructions (Level A) • 1.4.4 Resize text (Level AA) • 3.2.4 Consistent Identi fi cation (Level AA) • 1.4.5 Images of Text (Level AA) • 2.5.5 Target Size (Level AAA) • 1.4.3 Contrast (Minimum)(Level AA) Source: tenon.io
74. Top 11 failing (manual) 80/20 • 1.3.1 Info and Relationships (Level A) • 4.1.2 Name, Role, Value (Level A) • 2.1.1 Keyboard (Level A) • 1.1.1 Non-text Content (level A) • 1.3.3 Sensory Characteristics (Level A) • 1.4.3 Contrast (Minimum) (Level AA) • 1.4.4 Resize text (Level AA) • 3.3.2 Labels or Instructions (Level A) • 2.4.6 Headings and Labels (Level A) • 2.4.7 Focus Visible (Level AA) • 2.4.4 Link Purpose (In Content)(Level A) Source: tenon.io
75. 7 of the TOP 10 failing issues are shared among auto and manual • 1.1.1 Non-text Content (level A) • 1.3.1 Info and Relationships (level A) • 1.4.3 Contrast (Minimum) (level AA) • 1.4.4 Resize text (Level AA) • 2.4.4 Link Purpose (In Content)(Level A) • 3.3.2 Labels or Instructions (Level A) • 4.1.2 Name, Rôle, Value (Level A) Source: tenon.io
76. • 90% of issues come from 20 tests • 80% of issues come from 12 tests Source: tenon.io
77. All of the top 50 test failures fi t into 5 meta issues: • Link quality • Text alternatives • Insu ff i cient contrast • Object labels / label quality • Table / header structure Source: tenon.io
78. Which tools to check A11y issues?
79. https://www.html5accessibility.com/
81. automated tests manual tests
82. What can be tested and how? WCAG Level Auto Semi-Auto
 (veri fi cation required) Manual Only Level A 25% 29% 46% Level AA 17% 41% 41% Level AAA 28% 24% 53% Average 18% 31% 47%
83. Automated tests
84. Companies dedicated to A11y
86. Free web tools (and extensions) recommended
89. Accessibility Testing APIs react-axe Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console. eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. This project does not replace react-a11y, but can and should be used in conjunction with React-axe. axe-webdriverjs An open source library that injects axe-core into Selenium Webdriver instances axe-core
91. Manual tests
93. Screen Readers Commonly Used
94. MacOSX software for accessibility colors Color Oracle Sim Daltonism Colour Contrast Analyser
95. Processes to stay accessible?
96. - Storybook and Accessibility - Static Checker - Browser tools / extensions
97. Storybook and Accessibility
98. 😱 Live Accessibility v5.1!
99. - Storybook and Accessibility - Static Checker - Browser tools / extensions
100. - Storybook and Accessibility - Static Checker - Browser tools / extensions
101. Automated / manual test
102. - Tabbing through - Screenreader testing (personas…)
104. May 18, 2019 October 26, 2019 October 24, 2019
105. Practical Exercice
106. Basic shortcuts for VoiceOver • VoiceOver ON/OFF: Command + F5 (Mac: ⌘ + Fn + F5) • Start reading: VO (⌘ + ⌥) + A • Stop reading: CTRL • Open rotor: VO + U • Next heading: ⌘ + VO + H •Next link: ⌘ + VO + L •Next graphic: ⌘ + VO + G
108. Mouse Daniel • 53 years old management accountant • Rheumatoid arthritis • Uses keyboard only, no mouse and just started using voice control
109. http://bit.ly/a11y-bad01 There is a table. Its country column includes an explanation indicated by a question mark. Try to select that question mark to fi nd out what the explanation is. The end date column might be hidden. Try to fi nd out what the end date of the Algeria entry is. Eyes open - Keyboard only - VoiceOver ⌘F5
110. http://bit.ly/a11y-good01
111. Trembling Don • 82 years old, retired • Multiple conditions: arthritis, losing his hearing, cataracts, hip replacements • Doesn’t use any assistive technology
112. Find out how many Cabinet ministers there are http://bit.ly/a11y-bad02
113. http://bit.ly/a11y-good02
114. Pawel Dugros • 24 year old chemistry graduate
 • Asperger’s and anxiety
 • adjusts things, like colours, to reduce potential stress and distractions (install Midnight Lizard)

115. http://bit.ly/a11y-bad03 You have 2 minutes to do the following tasks logged in as Pawel - Read the text. Find out where you can get Tami fl u if you are a U.S. Government employee abroad. - There are a couple of buttons below the text. Try to select the correct button before the timer expires.
116. http://bit.ly/a11y-good03
117. 🤗 Choose your favorite website - Find A11y issues - Suggest a possible fi x
118. Q&A
119. Merci! That’s All.