Principles of
Accessible Web Design Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam
Slide 1
Slide 2
(Almost.) Everyone here is disabled . (Or will be at some time.)
Slide 3
Slide 4
“People need not be limited by physical handicaps as long as they are not disabled in spirit.”
Slide 5
Di ! erent input mechanisms
Slide 6
Di ! erent input mechanisms
Slide 7
Di ! erent input mechanisms
Slide 8
Di ! erent input mechanisms
Slide 9
Di ! erent input mechanisms
Slide 10
Di ! erent input mechanisms
Slide 11
Di ! erent input mechanisms
Slide 12
Di ! erent output mechanisms
Slide 13
Di ! erent output mechanisms
Slide 14
Di ! erent output mechanisms
Slide 15
Di ! erent output mechanisms
Slide 16
Di ! erent output mechanisms
Slide 17
Di ! erent output mechanisms
Slide 18
Slide 19
We don’t need special websites for people with special requirements.
Slide 20
Have you ever forgotten to buy new batteries for your mouse?
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Accessible websites help everyone.
Slide 26
Slide 27
We are designing the web for our future selves.
Slide 28
0 25 50 75 100 14-19 20-29 30-39 40-49 50-59 60+ 1998 2008
Slide 29
0 25 50 75 100 14-19 20-29 30-39 40-49 50-59 60+ 1998 2008
Slide 30
0 25 50 75 100 14-19 20-29 30-39 40-49 50-59 60+ 1998 2008
Slide 31
0 25 50 75 100 14-19 20-29 30-39 40-49 50-59 60+ 1998 2008
Slide 32
0 25 50 75 100 14-19 20-29 30-39 40-49 50-59 60+ 1998 2008
Slide 33
0 25 50 75 100 14-19 20-29 30-39 40-49 50-59 60+ 1998 2008
Slide 34
0 25 50 75 100 14-19 20-29 30-39 40-49 50-59 60+ 1998 2008
Slide 35
What can we do?
Slide 36
Don’t use Flash. It isn’t working on most mobiles. It isn’t „working“ on most PCs either. It can be made accessible on Windows and IE only.
Slide 37
POSH5 & POUR
Slide 38
POSH5 & POUR Plain Old Simple HTML5
Slide 39
POSH5 & POUR Plain Old Simple HTML5 Perceivable, Operable, Understandable, Robust
Slide 40
POSH5 Use the best HTML5 Element available for the task at hand.
Slide 41
HTML5 Includes many accessibility features (although others claim otherwise). It is not the spec to look to when searching for web accessibility techniques.
Slide 42
WCAG2 Is the spec for accessible web content. Provides an exhaustive list of techniques to make web content accessible.
Slide 43
http://www.w3.org/WAI/WCAG20/quickref/ Perceivable Operable Understandable Robust
Slide 44
And now: Sharky mail: mail@yatil.de twitter: @yatil
Slide 45
And now: Sharky mail: mail@yatil.de twitter: @yatil
