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
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
200
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
320
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
440
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
430
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
29
13k
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
組織成長を加速させるオンボーディングの取り組み
sudoakiy
3
300
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
800
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
230
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
200
AGIについてChatGPTに聞いてみた
blueb
0
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Designing for humans not robots
tammielis
250
25k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Rails Girls Zürich Keynote
gr2m
94
13k
Being A Developer After 40
akosma
87
590k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
How STYLIGHT went responsive
nonsquared
95
5.2k
A designer walks into a library…
pauljervisheath
204
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
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