Web Accessibility fundamentals (for developers)

Transcript

1. Web Accessibility fundamentals (For developers) 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.
18. 4 principles
20. 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?
21. Perceivable - Alternative text https://webaim.org/articles/voiceover/images
22. Perceivable - Don’t relay only on colors https://www.kaylaheffernan.com/blog/2017/1/17/press-the-pink-buttondesigning-for-colour-blind-users
23. https://www.kaylaheffernan.com/blog/2017/1/17/press-the-pink-buttondesigning-for-colour-blind-users
24. 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.
26. 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?
27. 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?
28. Quiz
29. - 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
30. 3 levels of digital accessibility
32. 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
33. 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.
34. 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
35. Quiz
36. - Live videos has captions - Provide descriptive link text - Provide ability to skip content - Explain any unusal word - No major code error A, AA or AAA? AA A A AAA A
38. What about ARIA?
39. « 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
40. ARIA does NOT change behavior
41. ARIA let you fi ll in gaps in the accessibility tree.
42. How browsers communicate with screen readers?
43. How the browser communicate with a screen reader? GUI
44. 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”
45. Programmatic semantics Role: “combobox” Name: “Preferred seat type” State: collapse Value: “Aisle seat”
47. Aria lets you step in there
48. bit.ly/aria-guide
50. Aria’s rules
51. Where possible, use correct semantic HTML elements. Don’t use ARIA as a quick- fi x.
52. 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.
53. Aria role, state & properties
54. 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)
56. Landmarks <header /> <main /> <footer /> <nav /> <section /> <form /> <aside /> banner main contentinfo navigation region form complementary search HTML5 Role
57. Demo landmarks With landmark extension VO + U
58. Aria state: what is the current state of the widget? It is checked, expanded, disabled?
59. Demo accordion
60. Aria properties: what are the properties of the widget? Does it have live regions, does it have relationships with other elements, etc?
61. Demo checkbox
63. Which tools to check A11y issues?
64. https://www.html5accessibility.com/
66. automated tests manual tests
67. 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%
68. Automated tests
69. Companies dedicated to A11y
70. • Open-source JS library • No network or API key required • Con fi gurable rules & checks • No false positives • Based on standards
71. Free web tools (and extensions) recommended
74. 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
75. Manual tests
77. Screen Readers Commonly Used
78. MacOSX software for accessibility colors Color Oracle Sim Daltonism Colour Contrast Analyser
79. Processes to stay accessible?
80. - Storybook and Accessibility - Static Checker - Browser tools / extensions
81. Storybook and Accessibility
82. 😱 Live Accessibility v5.1!
83. - Storybook and Accessibility - Static Checker - Browser tools / extensions
84. - Storybook and Accessibility - Static Checker - Browser tools / extensions
85. Automated / manual test
86. - Tabbing through - Screenreader testing (personas…)
88. May 18, 2019 October 26, 2019 October 24, 2019
89. Practical Exercice
90. 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
92. Mouse Daniel • 53 years old management accountant • Rheumatoid arthritis • Uses keyboard only, no mouse and just started using voice control
93. 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
94. http://bit.ly/a11y-good01
95. Trembling Don • 82 years old, retired • Multiple conditions: arthritis, losing his hearing, cataracts, hip replacements • Doesn’t use any assistive technology
96. Find out how many Cabinet ministers there are http://bit.ly/a11y-bad02
97. http://bit.ly/a11y-good02
98. Pawel Dugros • 24 year old chemistry graduate
 • Asperger’s and anxiety
 • adjusts things, like colours, to reduce potential stress and distractions (install Midnight Lizard)

99. 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.
100. http://bit.ly/a11y-good03
101. 🤗 Choose your favorite website - Find A11y issues - Suggest a possible fi x
102. Q&A
103. Merci! That’s All.