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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Chris DeMars Chris DeMars
May 10, 2017
Technology
0
110

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
250
Hacking the Human Perception
Avatar for Chris DeMars chrisdemars
0
65
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
250
Gulping ALL the things
Avatar for Chris DeMars chrisdemars
1
120
My 3 Favorite Chrome Dev Tools...So Far.
Avatar for Chris DeMars chrisdemars
0
68
My Node CLI Adventure
Avatar for Chris DeMars chrisdemars
0
59

Other Decks in Technology

See All in Technology
製造業ドメインにおける LLMプロダクト構築： 複雑な文脈へのアプローチ
Avatar for recruiting@caddi.jp caddi_eng
1
560
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
8
7.2k
僕、S3 　シンプルって名前だけど全然シンプルじゃありません　よろしくお願いします
Avatar for Yuuki Yamashita yama3133
1
200
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
Avatar for ishii-takuya taku1418
0
130
親子 or ペアで Mashup for the Future！ しゃべって楽しむ 初手AI駆動でものづくり体験
Avatar for hiroramos hiroramos4
PRO
0
110
(Test) ai-meetup slide creation
Avatar for Oikon oikon48
1
310
S3はフラットである –AWS公式SDKにも存在した、 署名付きURLにおけるパストラバーサル脆弱性– / JAWS DAYS 2026
Avatar for GMO Flatt Security flatt_security
0
1.7k
越境する組織づくり ─ 多様性を前提にしたチームビルディングとリードの実践知
Avatar for hrpnx kido_engineer
2
190
Kubernetesにおける推論基盤
Avatar for ry ry
1
320
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用～設計で可視化、AIで加速する「楽に回る」運用設計のコツ～
Avatar for s-hata shoki_hata
0
3k
DevOpsエージェントで実現する!！ AWS Well-Architected（W-A） を実現するシステム設計 / 20260307 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
630
組織全体で実現する標準監視設計
Avatar for Yuto Obayashi yuobayashi
3
490

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
180
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
100
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
540
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
70
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
470

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