Web Accessibility: It Doesn't Have to Be Hard

Talk at Google Developer Experts Summit and World Usability Day

Transcript

1. Web Accessibility: It doesn’t have to be hard World Usability Day Lagos, 2017
2. Ire Aderinokun
6. Why is Accessibility Important?
8. 1. Accessible Site’s are Great for Everyone
9. Who are you building your site for?
10. “Abled” or “Disabled”?
12. ???
14. Temporary and Situational Disabilities
15. Vision “Abled” Temporarily Disabled Situationally Disabled “Disabled”
16. Hearing “Abled” Temporarily Disabled Situationally Disabled “Disabled”
18. 2. The web, by default, is Accessible
20. http://motherfuckingwebsite.com
21. #UseThePlatform <header> <button> <main> <footer> <input type=“password”> <a>
22. Using a <button> <button onClick=“openModal(e)”> Open Modal </button>
23. What you get for free • Focusable via the keyboard or screen reader • Clickable by mouse, enter key and space bar • Accessible name and state provided to assistive tech • An interaction is expected when clicked
25. Using a <div> <div onClick=“openModal(e)”> Open Modal </div>
26. Extra Work <div tabindex=“0” role=“button” onKeyPress=“handleBtnKeyPress(e)” onClick=“openModal(e)”> Open Modal </div>
27. More Extra Work function handleBtnKeyPress(e) { // Check to see if space or enter were pressed if ( e.keyCode === 32 || e.keyCode === 13) { // Open modal dialog openModal(e); } } Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
28. Even More Extra Work [role=“button”] { align-items: flex-start; text-align: center; cursor: default; color: buttontext; background-color: buttonface; box-sizing: border-box; padding: 2px 6px 3px; border-width: 2px; border-style: outset; border-color: buttonface; border-image: initial; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; margin: 0em; font: 11px system-ui; -webkit-appearance: button; }
30. – A Wise Person on Twitter “HTML is, by default, accessible. As developers, it is our job to not fuck that up.”
31. 3. The web is for everyone
33. http://www.euractiv.com/section/digital/opinion/web- accessibility-will-now-be-the-law-of-the-land-in-europe/
34. – Dita Charanzová “This is a victory not only for persons with disabilities, but all of us”
35. 4. It doesn’t have to be hard
36. <button> Open Modal </button> <div> Open Modal </div> Accessible vs Inaccessible
37. How Do I Get Started With Accessibility?
39. https://www.w3.org/TR/WCAG20 https://www.w3.org/TR/WCAG20
40. Perceivable Information and user interface components must be presentable to users in ways they can perceive Operable User interface components and navigation must be operable Understandable Information and the operation of user interface must be understandable Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
41. Perceivable Information and user interface components must be presentable to users in ways they can perceive Operable User interface components and navigation must be operable Understandable Information and the operation of user interface must be understandable Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
42. <img src=“ire.png” alt=“Ire Aderinokun Illustration”> Text Alternatives
43. Contrast Ratio http://leaverou.github.io/contrast-ratio
44. Perceivable Information and user interface components must be presentable to users in ways they can perceive Operable User interface components and navigation must be operable Understandable Information and the operation of user interface must be understandable Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
45. Keyboard Accessible
46. Perceivable Information and user interface components must be presentable to users in ways they can perceive Operable User interface components and navigation must be operable Understandable Information and the operation of user interface must be understandable Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
47. Specify Language <html lang=“en”>
48. Provide Instructions
49. Perceivable Information and user interface components must be presentable to users in ways they can perceive Operable User interface components and navigation must be operable Understandable Information and the operation of user interface must be understandable Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
50. Write Valid Code <!doctype html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>My Web Page</title> </head> <body> <h1>My Web Page</h1> </body> </html>
51. Label Elements <label for=“username”> Username </label> <input name=“username” id=“username” type=“text”> <button aria-label=“Cancel”> X </button>
53. Lighthouse
54. Chrome Developer Tools > Audits > Perform an Audit
55. pa11y
57. On-the-Fly Accessibility Testing
58. npm install -g pa11y pa11y example.com
65. Continuous Integration
68. npm install -g pa11y-ci pa11y-ci
69. { "urls": [ “https://bitsofco.de”, ], "defaults": { "hideElements": “.sr-only”, “ignore”: [ “notice”, “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA” ], “actions”: [ “set field #email to test@test.com”, “click element #subscribe”, ] } } .pa11yci
70. { "urls": [ “https://bitsofco.de”, ], "defaults": { "hideElements": “.sr-only”, “ignore”: [ “notice”, “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA” ], “actions”: [ “set field #email to test@test.com”, “click element #subscribe”, ] } }
71. { "urls": [ “https://bitsofco.de”, ], "defaults": { "hideElements": “.sr-only”, “ignore”: [ “notice”, “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA” ], “actions”: [ “set field #email to test@test.com”, “click element #subscribe”, ] } }
72. { "urls": [ “https://bitsofco.de”, ], "defaults": { "hideElements": “.sr-only”, “ignore”: [ “notice”, “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA” ], “actions”: [ “set field #email to test@test.com”, “click element #subscribe”, ] } }
73. { "urls": [ “https://bitsofco.de”, ], "defaults": { "hideElements": “.sr-only”, “ignore”: [ “notice”, “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA” ], “actions”: [ “set field #email to test@test.com”, “click element #subscribe”, ] } }
74. pa11y-ci
75. pa11y-ci --threshold 50
76. https://bitsofco.de/pa11y https://github.com/ireade/bitsofcode-pa11y
77. Chrome Extensions
78. Alix https://github.com/ireade/alix
80. Accessibility Developer Tools https://chrome.google.com/webstore/detail/ accessibility-developer-t/ fpkknkljclfencbdbgkenhalefipecmb
81. Inspect Element > Accessibility Properties
82. Inspect Element > Accessibility Properties
83. HTML5 Outliner https://chrome.google.com/webstore/detail/ html5-outliner/ afoibpobokebhgfnknfndkgemglggomo/ reviews
85. No Coffee https://accessgarage.wordpress.com/ 2013/02/09/458/
87. User Research
88. https://www.youtube.com/watch?v=d3VuWAdBq9g
89. Test it Yourself!
90. Go Keyboard-Only
91. Try a Screen Reader
92. System Preferences > Accessibility > VoiceOver > “Enable VoiceOver”
93. https://www.chromevox.com
94. Screen Reader Demo
95. How Can I Make Accessibility Easy?
97. Make Accessibility a First Class Citizen
98. Make Accessibility Everyone’s Job
99. http://accessibility.voxmedia.com
105. Accessibility is only hard when you do it last
106. – Leonie Watson “Accessibility doesn't have to be perfect, it just needs to be a little bit better than yesterday.”
107. Thank You! @IreAderinokun www.ireaderinokun.com