Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Leave No One Behind
Stephen Thomas
October 22, 2016
Technology
0
79
Leave No One Behind
Building Accessible Web Applications
Stephen Thomas
October 22, 2016
Tweet
Share
More Decks by Stephen Thomas
See All by Stephen Thomas
sathomas
0
19
sathomas
0
2.1k
sathomas
1
2.3k
sathomas
0
2.1k
sathomas
5
2.3k
sathomas
4
360
sathomas
8
640
sathomas
2
280
Other Decks in Technology
See All in Technology
soracom
0
180
ihcomega56
1
600
torisoup
11
6.2k
hiroyaiizuka
0
150
inductor
1
140
110y
2
11k
yshr1200
0
170
viva_tweet_x
1
440
oracle4engineer
0
3.7k
nitya
0
320
tenjuu99
1
300
sat
40
29k
Featured
See All Featured
danielanewman
1
520
jponch
103
5.1k
mthomps
38
2.3k
hatefulcrawdad
257
17k
geoffreycrofte
21
930
ammeep
656
54k
frogandcode
128
20k
kastner
54
1.9k
erikaheidi
14
4.3k
lara
590
61k
matthewcrist
73
7.5k
andyhume
63
3.7k
Transcript
Leave No One Behind Building Accessible Web Applications
Why? • More Users • The Law • It’s the
Right Thing to Do
Who? • Users with cognitive impairments • Users with hearing
impairments • Users with visual impairments • Seizures • Color Blindness • Presbyopia • Users with motor impairments
Let’s Look at Some Code
Leave No One Behind • Users with Cognitive Impairments •
Check Reading Level for Content • Don’t Build Complicated Interfaces
Leave No One Behind • Users with Hearing Impairments •
Add visual cues to critical audio notifications • Add close caption tracks to <video> elements
Leave No One Behind • Users with Visual Impairments •
Give Users a way to Disable Animations • Don’t Rely Solely on Color • Watch Contrast Ratio • Responsive Design • Use HTML5 Elements for Page Layout • Correct Use of Buttons and Links
Leave No One Behind • Users with Motor Impairments •
Support Focus Styling • Manage Focus • Dynamically set TabIndex attributes, or • Capture keydown events
Some Key Resources • Checklist • http://webaim.org/standards/wcag/checklist • Tools •
http://khan.github.io/tota11y/ • http://howlowck.github.io/Akbar/ • Learn More • https://www.udacity.com/course/web-accessibility--ud891