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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Chris DeMars Chris DeMars
May 10, 2017
Technology
110
0

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

Avatar for Chris DeMars

Chris DeMars

May 10, 2017

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
68
Believe in the Power of CSS
Avatar for Chris DeMars chrisdemars
0
210
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
71
My Node CLI Adventure
Avatar for Chris DeMars chrisdemars
0
63

Other Decks in Technology

See All in Technology
可視化から活用へ — Mesh化・Segmentation・アライメントの研究動向
Avatar for GPU UNITE gpuunite_official
0
220
Fラン学生が考える、AI時代のデザインに執着した突破口
Avatar for husensan husengs7
1
200
鹿野さんに聞く！CSSの最新トレンド Ver.2026
Avatar for tonkotsuboy_com tonkotsuboy_com
6
3.6k
「強制アップデート」か「チームの自律」か？エンタープライズが辿り着いたプラットフォームのハイブリッド運用/cloudnative-kaigi-hybrid-platform-operations
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
0
210
【関西製造業祭り2026春】現場を変える技術はここまで来た〜世界最大の製造業見本市から持って帰ってきたもの〜
Avatar for 田中 聖也 tanakaseiya
0
180
会社説明資料｜株式会社ギークプラス ソフトウェア事業部
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
310
インプロセスQAのための要因から捉えるプロジェクトリスクマネジメントnano #1 開発リソース効率状態への対処 #jasstnano
Avatar for barus_qa_dev barus_qa
0
160
Purview Endpoint DLP 動かしてみた
Avatar for kozakigh kozakigh
0
440
サイボウズ、プラットフォームエンジニアリング始めるってよ ― プラットフォームチームの事業貢献と組織アラインメントの強化
Avatar for Shin'ya Ueoka ueokande
0
120
AsyncStreamでマルチブロードキャストを実装する
Avatar for 1mash0 1mash0
1
120
ワールドカフェ再び、そしてゴール・ルール・ロール・ツール / World Café Revisited, and the Goals-Rules-Roles-Tools
Avatar for Kenji Saito ks91
PRO
0
180
クラウドからエッジまで ~ 1,700台を支える監視設計~
Avatar for OptFit Corp. optfit
0
110

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
190
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
370
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
380
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
190
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k

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