Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Chris DeMars Chris DeMars
May 10, 2017
Technology
0
100

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

Avatar for Chris DeMars

Chris DeMars

May 10, 2017
Tweet

More Decks by Chris DeMars

See All by Chris DeMars
Believe in the Power of CSS - 30min Edition
Avatar for Chris DeMars chrisdemars
1
240
Hacking the Human Perception
Avatar for Chris DeMars chrisdemars
0
60
Believe in the Power of CSS
Avatar for Chris DeMars chrisdemars
0
200
A11y for Everyone
Avatar for Chris DeMars chrisdemars
0
110
Block__Element--Magic: CSS Modularity for the Masses!
Avatar for Chris DeMars chrisdemars
0
240
Gulping ALL the things
Avatar for Chris DeMars chrisdemars
1
110
My 3 Favorite Chrome Dev Tools...So Far.
Avatar for Chris DeMars chrisdemars
0
59
My Node CLI Adventure
Avatar for Chris DeMars chrisdemars
0
52

Other Decks in Technology

See All in Technology
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
7
63k
Mastraに入門してみた ~AWS CDKを添えて~
Avatar for つくぼし tsukuboshi
0
380
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
Avatar for とうま toma_sm
0
180
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
6
970
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
Avatar for fukubaka0825 fukubaka0825
8
2.1k
テストって楽しい！開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
Avatar for END aiandrox
0
160
Асинхронная коммуникация в Go: от понятного к душному. Дима Некрасов, Otello, 2ГИС
Avatar for Lamoda Tech lamodatech
0
1.8k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
5.5k
Pythonデータ分析実践試験 出題傾向や学習のポイントとテクニカルハイライト
Avatar for Manabu TERADA terapyon
1
120
Databricksで完全履修！オールインワンレイクハウスは実在した！
Avatar for Akihiro Kuwano akuwano
0
140
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか？
Avatar for BrainPad brainpadpr
4
230
クラウドネイティブ環境の脅威モデリング
Avatar for Kyohei Mizumoto kyohmizu
1
300

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
33
6.6k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.5k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
54
5.5k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k

Transcript

  1. None
  2. None

  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

  7. None
  8. None

  9. Co-organizer @annarbora11y

  10. It me!

  11. None
  12. None
  13. None
  14. None

  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
  56. None
  57. None

  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

  67. None
  68. None
  69. None
  70. None

  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

  83. None

  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

  95. 69

  96. 69

  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

  104. None

  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

  129. None
  130. None

  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

  137. None

  138. https://github.com/dequelabs/axe-core Chris DeMars ! @saltnburnem

  139. None

  140. Browser Extensions Chris DeMars ! @saltnburnem

  141. Chris DeMars ! @saltnburnem

  142. None
  143. None

  144. Chris DeMars ! @saltnburnem

  145. None

  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