I Can't See: Low Vision A11y & Users.

Transcript

3. Image credit: Lemelson/MIT
4. I Can’t See! Low Vision A11y and Users Chris DeMars ! @saltnburnem
5. 20% 80% No Disabilities Disabilties Percentage of people with disabilities. Chris DeMars ! @saltnburnem
6. Chris DeMars Twitter: @saltnburnem | Blog: chrisdemars.com
9. Co-organizer @annarbora11y
10. It me!
15. Twitter: @TaleFTScript | Site: tftscript.com
16. Why? Chris DeMars ! @saltnburnem
17. “I can’t see that.” Chris DeMars ! @saltnburnem
18. A11y Chris DeMars ! @saltnburnem
19. Numeronym A c c e s s i b i l i t y A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ! @saltnburnem
20. What is a11y? Chris DeMars ! @saltnburnem
21. “Web accessibility means that people with disabilities can use the Web.” https://www.w3.org/WAI/intro/accessibility.php Chris DeMars ! @saltnburnem
22. Open Web = Inclusive Web = Web for all! Chris DeMars ! @saltnburnem
23. “Web accessibility means that EVERYONE can use the Web.” - Me (Chris DeMars) Chris DeMars ! @saltnburnem
24. “The web is not a barrier to people with disabilities, it is the solution..” - http://webaim.org/articles/pour/ Chris DeMars ! @saltnburnem
25. “Accessibility is NOT a requirement, it is a MUST!” Chris DeMars ! @saltnburnem
26. Types of Disabilities ! Chris DeMars ! @saltnburnem
27. Types of Disabilities ! Hearing Chris DeMars ! @saltnburnem
28. Types of Disabilities ! Hearing Cognitive Chris DeMars ! @saltnburnem
29. Types of Disabilities ! Hearing Cognitive Mobility Chris DeMars ! @saltnburnem
30. Types of Disabilities ! Hearing Cognitive Mobility Temporary Chris DeMars ! @saltnburnem
31. Types of Disabilities ! Hearing Vision Cognitive Mobility Temporary Chris DeMars ! @saltnburnem
32. POUR Chris DeMars ! @saltnburnem
33. P O U R Chris DeMars ! @saltnburnem
34. Perceivable O U R Chris DeMars ! @saltnburnem
35. Perceivable O U R perable Chris DeMars ! @saltnburnem
36. Perceivable O U R perable nderstandable Chris DeMars ! @saltnburnem
37. Perceivable O U R perable nderstandable obust Chris DeMars ! @saltnburnem
38. Perceivable O U R perable nderstandable obust Chris DeMars ! @saltnburnem
39. Perceivable Chris DeMars ! @saltnburnem
40. Perceivable Chris DeMars ! @saltnburnem
41. Poor Vision !== Low Vision Chris DeMars ! @saltnburnem
42. Chris DeMars ! @saltnburnem
43. Chris DeMars ! @saltnburnem
44. Chris DeMars ! @saltnburnem
45. Chris DeMars ! @saltnburnem
46. Chris DeMars ! @saltnburnem
47. Chris DeMars ! @saltnburnem
48. Color Blindness Or Color Vision Deficiency Chris DeMars ! @saltnburnem
49. What is it? Chris DeMars ! @saltnburnem
50. “Color vision deficiency is the inability to distinguish certain shades of color.” - https://www.aoa.org/ Chris DeMars ! @saltnburnem
51. How many people are color blind? Chris DeMars ! @saltnburnem
52. " 1 in 12 " " " " " " "" " " " Chris DeMars ! @saltnburnem
53. 1 in 200 x 200 Chris DeMars ! @saltnburnem
54. Women 6% Men 94% Men Women Chris DeMars ! @saltnburnem
55. Women 6% Men 94% Men Women The gene is passed down from the mom. Chris DeMars ! @saltnburnem
58. Types of color vision deficiencies? Chris DeMars ! @saltnburnem
59. Types of color vision deficiencies? Chris DeMars ! @saltnburnem
60. Types of color vision deficiencies? Normal Chris DeMars ! @saltnburnem
61. Types of color vision deficiencies? Normal Deuteranopia Chris DeMars ! @saltnburnem
62. Types of color vision deficiencies? Normal Deuteranopia Protanopia Chris DeMars ! @saltnburnem
63. Types of color vision deficiencies? Normal Deuteranopia Protanopia Tritanopia Chris DeMars ! @saltnburnem
64. Monochromatic Chris DeMars ! @saltnburnem
65. 1 in 33,000! Chris DeMars ! @saltnburnem
66. Visual Acuity Chris DeMars ! @saltnburnem
71. What is it? Chris DeMars ! @saltnburnem
72. Chris DeMars ! @saltnburnem
73. Types of visual acuity? Chris DeMars ! @saltnburnem
74. Spatial Acuity Chris DeMars ! @saltnburnem
75. 2 points in spaaaaaace Chris DeMars ! @saltnburnem
76. Temporal Acuity Chris DeMars ! @saltnburnem
77. Distinguish visual elements in time! Chris DeMars ! @saltnburnem
78. Spectral Acuity Chris DeMars ! @saltnburnem
79. Spectral Acuity Chris DeMars ! @saltnburnem
80. Acuity is SCIENCE Chris DeMars ! @saltnburnem
81. Chris DeMars ! @saltnburnem
82. Contrast Sensitivity Chris DeMars ! @saltnburnem
84. Chris DeMars ! @saltnburnem
85. Chris DeMars ! @saltnburnem
86. Chris DeMars | @saltnburnem Federal Website Accessibility Lawsuits by State in 2017 0 100 200 300 400 AZ CA FL GA IL MA NH MI NJ NY OH PA PR TX VA 24 7 1 58 8 335 4 1 2 15 10 9 325 9 6 Total Number of Suits Nationwide: At least 814 Number of Lawsuits http://bit.ly/2Ds4EPd
87. “I pity the fool who doesn’t think about accessibility from the beginning!” - Chris DeM…Mr. T! Chris DeMars ! @saltnburnem
88. What is good color contrast? Chris DeMars ! @saltnburnem
89. WCAG 2.1 says 4.5:1 Chris DeMars ! @saltnburnem
90. Chris DeMars ! @saltnburnem
91. Chris DeMars ! @saltnburnem
92. Chris DeMars ! @saltnburnem
93. $ Chris DeMars ! @saltnburnem
94. Field of Vision Chris DeMars ! @saltnburnem
97. What is field of vision? Chris DeMars ! @saltnburnem
98. Technical Stuff! Chris DeMars ! @saltnburnem
99. Three types of Field of Vision impairments Chris DeMars ! @saltnburnem
100. Central https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision 1. Chris DeMars ! @saltnburnem
101. Peripheral https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision 2. Chris DeMars ! @saltnburnem
102. Other https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision 3. Chris DeMars ! @saltnburnem
103. The Problem Chris DeMars ! @saltnburnem
105. Contrasting Colors Chris DeMars ! @saltnburnem
106. Chris DeMars ! @saltnburnem
107. Colors That Just Don’t Work Chris DeMars ! @saltnburnem
108. My Awesome Legend Chris DeMars ! @saltnburnem
109. My Awesome Legend Waiting Pushed In Progress Passed Denied Chris DeMars ! @saltnburnem
110. My Awesome Legend Chris DeMars ! @saltnburnem
111. My Awesome Legend Waiting Pushed In Progress Passed Denied Chris DeMars ! @saltnburnem
112. Communication Through Colors Chris DeMars ! @saltnburnem
113. Icons & Symbols Chris DeMars ! @saltnburnem
114. Chris DeMars ! @saltnburnem
115. $ Chris DeMars ! @saltnburnem
116. $ & Chris DeMars ! @saltnburnem
117. $ & ⚠︎ Chris DeMars ! @saltnburnem
118. Chris DeMars ! @saltnburnem
119. Chris DeMars ! @saltnburnem
120. Disabling Zoom Chris DeMars ! @saltnburnem
121. Disabling Zoom Chris DeMars ! @saltnburnem
122. Disabling Zoom Chris DeMars ! @saltnburnem
123. Disabling Zoom Chris DeMars ! @saltnburnem
124. Bad! Good! Chris DeMars ! @saltnburnem
125. Poor Line Height Chris DeMars ! @saltnburnem
126. No Line Height Chris DeMars ! @saltnburnem
127. Some Line Height Chris DeMars ! @saltnburnem
128. Poor Typography Chris DeMars ! @saltnburnem
131. * Chris DeMars ! @saltnburnem
132. Comic Sans * Chris DeMars ! @saltnburnem
133. * Chris DeMars ! @saltnburnem
134. Conflicting Typography Chris DeMars ! @saltnburnem
135. The Solution Chris DeMars ! @saltnburnem
136. http://webaim.org Chris DeMars ! @saltnburnem
138. https://github.com/dequelabs/axe-core Chris DeMars ! @saltnburnem
140. Browser Extensions Chris DeMars ! @saltnburnem
141. Chris DeMars ! @saltnburnem
144. Chris DeMars ! @saltnburnem
146. Chris DeMars ! @saltnburnem
147. Choose Readable Typography Chris DeMars ! @saltnburnem
148. Comic Sans Arial & $ Chris DeMars ! @saltnburnem
149. Enable Zoom by Default Chris DeMars ! @saltnburnem
150. Chris DeMars ! @saltnburnem Zoooooooom!
151. Chris DeMars ! @saltnburnem Zoooooooom!
152. Chris DeMars ! @saltnburnem
153. Chris DeMars ! @saltnburnem
154. Takeaways Chris DeMars ! @saltnburnem
155. Takeaways Use Colors That Work Chris DeMars ! @saltnburnem
156. Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Chris DeMars ! @saltnburnem
157. Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Chris DeMars ! @saltnburnem
158. Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Leave Zoom Alone! Chris DeMars ! @saltnburnem
159. “Every Little Bit Of Accessibility You Contribute Is So Appreciated And So Needed.” - Marcy Sutton Chris DeMars ! @saltnburnem
160. • https://www.gstatic.com/healthricherkp/pdf/color_blindness.pdf • https://nei.nih.gov/health/color_blindness/facts_about • https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision • http://www.colourblindawareness.org/ • https://en.wikipedia.org/wiki/Visual_acuity • http://www.d.umn.edu/~jfitzake/Lectures/DMED/Vision/Retina/Acuity.html • www.allaboutvision.com/eye-exam/contrast-sensitivity.htm • https://www.w3.org/TR/WCAG21/ • http://adrianroselli.com/2015/10/dont-disable-zoom.html • https://www.deque.com/products/axe-core • https://developers.google.com/web/tools/lighthouse/ • https://www.snapmunk.com/mit-researchers-develop-text-braille-scanner-thats-portable-inexpensive/ Resources & Credits Chris DeMars ! @saltnburnem
161. Thank You! Chris DeMars | @saltnburnem