Accessibility in the 2.0 era

The purpose of this talk is to create awareness of the importance of creating apps that are accessible for the majority regardless physical, cognitive, mental, sensory or developmental problems and how to decrease the impact in the experience of our sites by using tools and techniques that help us to make life easier for people who have those disabilities.

Talked presented during MagmaConf 2015 in Manzanillo, Colima

www.magmaconf.com

Transcript

1. Accessibility in the 2.0 era Fernando Perales @FerPeralesM
2. <me>
3. Fernando Perales Software Engineer @ Crowd Interactive FLOSS advocate /(.*) metal/ and beer love Passionate about web dev and lean startup. @FerPeralesM
4. </me>
5. #a11y
6. Accessibility
7. “The design of products, devices, services, or environments for people with disabilities” wikipedia.org/wiki/Accessibility
8. https://c2.staticflickr.com/6/5052/5420282382_6a9c6c64b7_b.jpg
9. http://www.maspormas.com/sites/default/files/styles/entrevista_full/public/images/large/2014/08/27/orugadeltren_ok.jpg
10. http://samar.es/site/themes/default/images/rec-val/espacio-min.jpg
11. http://intheroo.com/uploads/2010/09/mexican-pesos.jpg
12. Web accessibility
13. “The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.” wikipedia.org/wiki/Web_accessibility
14. WAI
15. WAI-WCAG 2.0
16. Section 508
17. section508.gov
18. WAI-ARIA
19. WAI-ARIA defines roles, states, and properties
20. Role
21. w3.org/TR/wai- aria/roles
22. role=''
23. States and properties
24. aria-labelledby=''
25. aria-checked=''
26. w3.org/TR/ wai-aria/ states_and_properties
27. Attributes
28. Practical WAI-ARIA Practical WAI-ARIA
29. w3.org/TR/wai-aria- practices
30. Design patterns
31. Auto Complete (widget)
32. Description
33. A textbox and an associated drop-down list of choices where the choices offered are filtered based on the information typed into the box.
34. Keyboard Interaction
35. With focus in an empty textbox, press Down Arrow, Up Arrow, Alt+Down Arrow, or Alt+Up Arrow to display the entire list of choices.
41. WAI-ARIA Roles, States, and Properties
42. The widget has a role of combobox, and its parent role is input. It has a child with role textbox. The property aria- autocomplete indicates whether user input completion suggestions are provided.
43. Extra: example
44. Dojo autocomplete
45. Let's review the remaining 39 patterns... Let's review the remaining 39 patterns...
46. ...NOT!
47. Fortunately!
48. Semantic HTML
49. CSS?
50. Considerations
51. Kinds of Disabilities
52. Visual
53. Blindness Low vision Poor eyesight Color blindness
54. What will help
55. Logical HTML flow
56. Headers
57. A way to skip navigation or common parts among pages
58. <a href='content'> Skip to content </a>
59. Use the right tag for each part of the document
60. Offer text as an alternative to images
61. Add description to graphs, maps and diagrams
62. https://fluidsurveys.com/wp-content/uploads/2013/09/Charts-PC.png
63. Forms
64. CAPTCHAs
69. High contrast
70. Scalable font size
71. Audio
72. What will help
73. Video with good captions
78. Alternative visual alert
79. Physical
80. What will help
81. Fully mouse – keyboard navigation
82. Avoid items that require precise movements
83. Forms
84. Cognitive
85. Dyslexia
86. What will help What will help
87. Fonts
88. sans serif > serif
89. Keep content short
90. Text alignment
91. Images: yay or nay?
92. Animations?
93. No image Background
94. ADD and ADHD
95. What will help
96. Avoid timed tasks
97. Instructions
98. No surprises on UX
99. Tools
100. Testing and audit
102.  dequelabs/axe-core
103. Chrome developer tools extension Karma QUnit Jasmine Mocha R-Spec Cucumber Selenium Java Selenium JavaScript PhantomJS Any testing framework that supports JavaScript execution
104. npm install axe-core --save-dev
105. <script src= "node_modules/axe- core/axe.min.js"> </script>
108. accesslint.com
111. diagnosticss.github.io
117. cynthiasays.com
119. WAVE
120. wave.webaim.org
123. Colors
124. Contrast ratio
125. leaverou.github.io/ contrast-ratio
128. Color Contrast Checker
129. webaim.org/ resources/ contrastchecker
132. Colour Contrast Analyzer
134. Paletton
135. paletton.com
139. Sim Daltonism
140. http://a3.mzstatic.com/us/r30/Purple4/v4/cf/0e/3b/cf0e3b46-bf9c-2627-280f-7d4863fb6808/screen800x500.jpeg
142. Color oracle
143. colororacle.org
147. Fonts
148. Screen readers
149. NVDA Screen reader
150. nvaccess.org
151. Voice Over
153. Chromevox
154. chromevox.com
156. Fangs
161. Close captioning
162. amara.org universalsubtitles.org
165. The great finale
166. http://vignette3.wikia.nocookie.net/uncyclopedia/images/1/10/London2012.png
167. http://2.bp.blogspot.com/-cqVRX6P3Q3g/UysNxwxQzEI/AAAAAAAAAPo/F7guy4BaiaM/s1600/sir-tim-berners-lee.jpg
169. Thanks!