Principles of accessible web desing (at #fronteers10)

2eb74cc5ebb96ea69807efa88c448aa2?s=47 Eric Eggert
September 27, 2011
Education
2
72

Principles of accessible web desing (at #fronteers10)

2eb74cc5ebb96ea69807efa88c448aa2?s=128

Eric Eggert

September 27, 2011
Tweet

More Decks by Eric Eggert

See All by Eric Eggert
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
36
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
36
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
52
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
47
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
340
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
150
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
330
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
1
450
2eb74cc5ebb96ea69807efa88c448aa2?s=48 yatil
0
95

Other Decks in Education

See All in Education
1e708b2afb8622d5c5f070a94a3425a9?s=48 tibbelit
0
150
B9ade6772136154da028ffd0a006eb8f?s=48 antoinephi
0
130
19d7ae634445d4bd9b10c7961a462260?s=48 shu223
1
670
D8004857fc10614cfa4dec1bae20f874?s=48 jezhumbleucb
2
440
0141b20f6e35030c74908c8c28fb5187?s=48 cca
0
980
70362492a3e488cc209de2174c447b5a?s=48 goloborotko
0
420
5115f2d9f0e80d9d27f69a680149ff9f?s=48 clocktowerreviewxavier
0
280
1e708b2afb8622d5c5f070a94a3425a9?s=48 tibbelit
0
140
B9ade6772136154da028ffd0a006eb8f?s=48 antoinephi
0
240
981993425604cfde7590e4fdb3ce80e9?s=48 manoj036
0
1.1k
696e66ab859446f91081e37e56444730?s=48 event2020
0
330
Cf47cf3c3e0f037f899088df041e2cca?s=48 dpc
0
260

Featured

See All Featured
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
100
5.7k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.3k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
66
250k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
22
1.6k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.7k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
340

Transcript

  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.)
  3. None

  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

  18. None

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

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

    mouse?
  21. None
  22. None
  23. None
  24. None

  25. Accessible websites help everyone.

  26. None

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

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

    60+ 1998 2008

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

    60+ 1998 2008

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

    60+ 1998 2008

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

    60+ 1998 2008

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

    60+ 1998 2008

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

    60+ 1998 2008

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

    60+ 1998 2008

  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. POSH5 & POUR Plain Old Simple HTML5

  39. POSH5 & POUR Plain Old Simple HTML5 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. http://www.w3.org/WAI/WCAG20/quickref/ Perceivable Operable Understandable Robust

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

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