Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
I Can't See: Low Vision A11y & Users.
Search
Chris DeMars
May 10, 2017
Technology
0
100
I Can't See: Low Vision A11y & Users.
Chris DeMars
May 10, 2017
Tweet
Share
More Decks by Chris DeMars
See All by Chris DeMars
Believe in the Power of CSS - 30min Edition
chrisdemars
1
240
Hacking the Human Perception
chrisdemars
0
59
Believe in the Power of CSS
chrisdemars
0
200
A11y for Everyone
chrisdemars
0
110
Block__Element--Magic: CSS Modularity for the Masses!
chrisdemars
0
240
Gulping ALL the things
chrisdemars
1
110
My 3 Favorite Chrome Dev Tools...So Far.
chrisdemars
0
57
My Node CLI Adventure
chrisdemars
0
51
Other Decks in Technology
See All in Technology
福岡新卒エンジニアの会
teba_eleven
1
190
"君は見ているが観察していない"で考えるインシデントマネジメント
grimoh
4
1k
フルカイテン株式会社 採用資料
fullkaiten
0
40k
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
470
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
1
180
Spring Frameworkの新標準!? ~ RestClientとHTTPインターフェース入門 ~
ogiwarat
2
260
メールサーバ管理者のみ知る話
hinono
1
100
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
軽量DDDはもういらない! スタイルガイド本で OOPの実装パターンを学ぼう
panda_program
29
11k
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
AWS パートナー企業でテクニカルサポートに従事して 3年経ったので思うところをまとめてみた
kazzpapa3
1
220
GraphRAGを用いたLLMによるパーソナライズド推薦の生成
naveed92
0
190
Featured
See All Featured
Designing for humans not robots
tammielis
249
25k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Making Projects Easy
brettharned
115
5.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Practical Orchestrator
shlominoach
186
10k
A Philosophy of Restraint
colly
203
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
Ruby is Unlike a Banana
tanoku
96
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Transcript
None
None
Image credit: Lemelson/MIT
I Can’t See! Low Vision A11y and Users Chris DeMars
! @saltnburnem
20% 80% No Disabilities Disabilties Percentage of people with disabilities.
Chris DeMars ! @saltnburnem
Chris DeMars Twitter: @saltnburnem | Blog: chrisdemars.com
None
None
Co-organizer @annarbora11y
It me!
None
None
None
None
Twitter: @TaleFTScript | Site: tftscript.com
Why? Chris DeMars ! @saltnburnem
“I can’t see that.” Chris DeMars ! @saltnburnem
A11y Chris DeMars ! @saltnburnem
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
What is a11y? Chris DeMars ! @saltnburnem
“Web accessibility means that people with disabilities can use the
Web.” https://www.w3.org/WAI/intro/accessibility.php Chris DeMars ! @saltnburnem
Open Web = Inclusive Web = Web for all! Chris
DeMars ! @saltnburnem
“Web accessibility means that EVERYONE can use the Web.” -
Me (Chris DeMars) Chris DeMars ! @saltnburnem
“The web is not a barrier to people with disabilities,
it is the solution..” - http://webaim.org/articles/pour/ Chris DeMars ! @saltnburnem
“Accessibility is NOT a requirement, it is a MUST!” Chris
DeMars ! @saltnburnem
Types of Disabilities ! Chris DeMars ! @saltnburnem
Types of Disabilities ! Hearing Chris DeMars ! @saltnburnem
Types of Disabilities ! Hearing Cognitive Chris DeMars ! @saltnburnem
Types of Disabilities ! Hearing Cognitive Mobility Chris DeMars !
@saltnburnem
Types of Disabilities ! Hearing Cognitive Mobility Temporary Chris DeMars
! @saltnburnem
Types of Disabilities ! Hearing Vision Cognitive Mobility Temporary Chris
DeMars ! @saltnburnem
POUR Chris DeMars ! @saltnburnem
P O U R Chris DeMars ! @saltnburnem
Perceivable O U R Chris DeMars ! @saltnburnem
Perceivable O U R perable Chris DeMars ! @saltnburnem
Perceivable O U R perable nderstandable Chris DeMars ! @saltnburnem
Perceivable O U R perable nderstandable obust Chris DeMars !
@saltnburnem
Perceivable O U R perable nderstandable obust Chris DeMars !
@saltnburnem
Perceivable Chris DeMars ! @saltnburnem
Perceivable Chris DeMars ! @saltnburnem
Poor Vision !== Low Vision Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Color Blindness Or Color Vision Deficiency Chris DeMars ! @saltnburnem
What is it? Chris DeMars ! @saltnburnem
“Color vision deficiency is the inability to distinguish certain shades
of color.” - https://www.aoa.org/ Chris DeMars ! @saltnburnem
How many people are color blind? Chris DeMars ! @saltnburnem
" 1 in 12 " " " " " "
"" " " " Chris DeMars ! @saltnburnem
1 in 200 x 200 Chris DeMars ! @saltnburnem
Women 6% Men 94% Men Women Chris DeMars ! @saltnburnem
Women 6% Men 94% Men Women The gene is passed
down from the mom. Chris DeMars ! @saltnburnem
None
None
Types of color vision deficiencies? Chris DeMars ! @saltnburnem
Types of color vision deficiencies? Chris DeMars ! @saltnburnem
Types of color vision deficiencies? Normal Chris DeMars ! @saltnburnem
Types of color vision deficiencies? Normal Deuteranopia Chris DeMars !
@saltnburnem
Types of color vision deficiencies? Normal Deuteranopia Protanopia Chris DeMars
! @saltnburnem
Types of color vision deficiencies? Normal Deuteranopia Protanopia Tritanopia Chris
DeMars ! @saltnburnem
Monochromatic Chris DeMars ! @saltnburnem
1 in 33,000! Chris DeMars ! @saltnburnem
Visual Acuity Chris DeMars ! @saltnburnem
None
None
None
None
What is it? Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Types of visual acuity? Chris DeMars ! @saltnburnem
Spatial Acuity Chris DeMars ! @saltnburnem
2 points in spaaaaaace Chris DeMars ! @saltnburnem
Temporal Acuity Chris DeMars ! @saltnburnem
Distinguish visual elements in time! Chris DeMars ! @saltnburnem
Spectral Acuity Chris DeMars ! @saltnburnem
Spectral Acuity Chris DeMars ! @saltnburnem
Acuity is SCIENCE Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Contrast Sensitivity Chris DeMars ! @saltnburnem
None
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
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
“I pity the fool who doesn’t think about accessibility from
the beginning!” - Chris DeM…Mr. T! Chris DeMars ! @saltnburnem
What is good color contrast? Chris DeMars ! @saltnburnem
WCAG 2.1 says 4.5:1 Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
$ Chris DeMars ! @saltnburnem
Field of Vision Chris DeMars ! @saltnburnem
69
69
What is field of vision? Chris DeMars ! @saltnburnem
Technical Stuff! Chris DeMars ! @saltnburnem
Three types of Field of Vision impairments Chris DeMars !
@saltnburnem
Central https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision 1. Chris DeMars ! @saltnburnem
Peripheral https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision 2. Chris DeMars ! @saltnburnem
Other https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision 3. Chris DeMars ! @saltnburnem
The Problem Chris DeMars ! @saltnburnem
None
Contrasting Colors Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Colors That Just Don’t Work Chris DeMars ! @saltnburnem
My Awesome Legend Chris DeMars ! @saltnburnem
My Awesome Legend Waiting Pushed In Progress Passed Denied Chris
DeMars ! @saltnburnem
My Awesome Legend Chris DeMars ! @saltnburnem
My Awesome Legend Waiting Pushed In Progress Passed Denied Chris
DeMars ! @saltnburnem
Communication Through Colors Chris DeMars ! @saltnburnem
Icons & Symbols Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
$ Chris DeMars ! @saltnburnem
$ & Chris DeMars ! @saltnburnem
$ & ⚠︎ Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Disabling Zoom Chris DeMars ! @saltnburnem
Disabling Zoom Chris DeMars ! @saltnburnem
Disabling Zoom Chris DeMars ! @saltnburnem
Disabling Zoom Chris DeMars ! @saltnburnem
Bad! Good! Chris DeMars ! @saltnburnem
Poor Line Height Chris DeMars ! @saltnburnem
No Line Height Chris DeMars ! @saltnburnem
Some Line Height Chris DeMars ! @saltnburnem
Poor Typography Chris DeMars ! @saltnburnem
None
None
* Chris DeMars ! @saltnburnem
Comic Sans * Chris DeMars ! @saltnburnem
* Chris DeMars ! @saltnburnem
Conflicting Typography Chris DeMars ! @saltnburnem
The Solution Chris DeMars ! @saltnburnem
http://webaim.org Chris DeMars ! @saltnburnem
None
https://github.com/dequelabs/axe-core Chris DeMars ! @saltnburnem
None
Browser Extensions Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
None
None
Chris DeMars ! @saltnburnem
None
Chris DeMars ! @saltnburnem
Choose Readable Typography Chris DeMars ! @saltnburnem
Comic Sans Arial & $ Chris DeMars ! @saltnburnem
Enable Zoom by Default Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem Zoooooooom!
Chris DeMars ! @saltnburnem Zoooooooom!
Chris DeMars ! @saltnburnem
Chris DeMars ! @saltnburnem
Takeaways Chris DeMars ! @saltnburnem
Takeaways Use Colors That Work Chris DeMars ! @saltnburnem
Takeaways Use Colors That Work Run Web Sites Through a
Testing/Audit Tool Chris DeMars ! @saltnburnem
Takeaways Use Colors That Work Run Web Sites Through a
Testing/Audit Tool Choose Proper Typography Chris DeMars ! @saltnburnem
Takeaways Use Colors That Work Run Web Sites Through a
Testing/Audit Tool Choose Proper Typography Leave Zoom Alone! Chris DeMars ! @saltnburnem
“Every Little Bit Of Accessibility You Contribute Is So Appreciated
And So Needed.” - Marcy Sutton Chris DeMars ! @saltnburnem
• 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
Thank You! Chris DeMars | @saltnburnem