This document discusses principles of accessible web design. It notes that everyone may become disabled at some point so websites should be designed for all. Accessible design helps everyone, not just those with disabilities, and allows people to access websites using different input and output mechanisms. The document advocates for using plain HTML5 and the WCAG2 guidelines to create websites that are perceivable, operable, understandable and robust for all users.

1. Principles of
Accessible Web Design
Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam

2. (Almost.)
Everyone here
is disabled.
(Or will be at some time.)

4. “People need not be
limited by physical
handicaps as long as
they are not disabled
in spirit.”

5. Different input mechanisms

6. Different input mechanisms

7. Different input mechanisms

8. Different input mechanisms

9. Different input mechanisms

10. Different input mechanisms

11. Different input mechanisms

12. Different output mechanisms

13. Different output mechanisms

14. Different output mechanisms

15. Different output mechanisms

16. Different output mechanisms

17. Different output mechanisms

19. We don’t need special websites
for people with special
requirements.

20. Have you ever forgotten
to buy new batteries for
your mouse?

25. Accessible websites
help everyone.

27. We are designing
the web
for our
future selves.

28. 1998
2008
14-19
20-29
30-39
40-49
50-59
60+
0 25 50 75 100

29. 1998
2008
14-19
20-29
30-39
40-49
50-59
60+
0 25 50 75 100

30. 1998
2008
14-19
20-29
30-39
40-49
50-59
60+
0 25 50 75 100

31. 1998
2008
14-19
20-29
30-39
40-49
50-59
60+
0 25 50 75 100

32. 1998
2008
14-19
20-29
30-39
40-49
50-59
60+
0 25 50 75 100

33. 1998
2008
14-19
20-29
30-39
40-49
50-59
60+
0 25 50 75 100

34. 1998
2008
14-19
20-29
30-39
40-49
50-59
60+
0 25 50 75 100

35. What can we do?

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.

37. POSH5 & POUR

38. Plain Old Simple HTML5
POSH5 & POUR

39. Plain Old Simple HTML5
POSH5 & POUR
Perceivable, Operable, Understandable, Robust

40. POSH5
Use the best HTML5 Element
available for the task at hand.

41. HTML5
Includes many accessibility features
(although others claim otherwise).
It is not the spec to look to when searching
for web accessibility techniques.

42. WCAG2
Is the spec for accessible web content.
Provides an exhaustive list of techniques to
make web content accessible.

43. Perceivable
Operable
Understandable
Robust
http://www.w3.org/WAI/WCAG20/quickref/

44. And now: Sharky
mail: mail@yatil.de twitter: @yatil

45. And now: Sharky
mail: mail@yatil.de twitter: @yatil