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
98
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
57
Believe in the Power of CSS
chrisdemars
0
190
A11y for Everyone
chrisdemars
0
100
Block__Element--Magic: CSS Modularity for the Masses!
chrisdemars
0
230
Gulping ALL the things
chrisdemars
1
110
My 3 Favorite Chrome Dev Tools...So Far.
chrisdemars
0
52
My Node CLI Adventure
chrisdemars
0
47
Other Decks in Technology
See All in Technology
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
アクセス制御にまつわる改善 / Improving access control
itkq
0
550
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
640
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
web-application-security
matsuihidetoshi
0
170
開発パフォーマンスを最大化するための開発体制
ham0215
2
440
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
320
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
530
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.3k
Featured
See All Featured
Designing for Performance
lara
601
67k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Embracing the Ebb and Flow
colly
80
4.1k
Designing the Hi-DPI Web
ddemaree
276
33k
Ruby is Unlike a Banana
tanoku
96
10k
4 Signs Your Business is Dying
shpigford
175
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
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