Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Principles of accessible web desing (at #fronte...

Avatar for Eric Eggert Eric Eggert
September 27, 2011
Education
110
2

Principles of accessible web desing (at #fronteers10)

Avatar for Eric Eggert

Eric Eggert

September 27, 2011

More Decks by Eric Eggert

See All by Eric Eggert
What is EOWG?
Avatar for Eric Eggert yatil
0
120
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
72
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
94
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
90
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
1k
How I stopped worrying and learned to love defaults — with notes
Avatar for Eric Eggert yatil
0
460
How I stopped worrying and learned to love defaults
Avatar for Eric Eggert yatil
0
740
Fronteers11 Jam Session: a11y goes to 11
Avatar for Eric Eggert yatil
1
930
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
150

Other Decks in Education

See All in Education
セキュリティ担当がいない中小医療機関を院外のRISSはどう支えるべきか / How External RISS Can Help Small Medical Institutions
Avatar for Kengo TODA eller86
1
210
AIの力を100%引き出すために
Avatar for Frieve-A frievea
0
540
[2026前期火５] 論理学（京都大学文学部 前期 第13回）「走って、止まって、積み上がる」
Avatar for Shunsuke Yatabe yatabe
0
240
マークシート試験のTeX言語を用いた自動採点について
Avatar for doratex doratex
0
4.4k
[2026前期火５] 論理学（京都大学文学部 前期 第14回）「計算は、証明ではない——ハルシネーションを三層ハーモニーで診る」
Avatar for Shunsuke Yatabe yatabe
0
280
Carbohydrates: Classification, Structure & Chemical Properties
Avatar for Pawan Kumar Sahu pawan_pharm
0
300
批判的応用言語学ワークショップ（2026-08-12 お茶の⽔⼥⼦⼤学）
Avatar for TerasawaT terasawat
0
200
DecisionesEjecutivasCrisis
Avatar for Mario OC mariooc
0
340
Throw Yourself In! - How I've learned English and What I'm Facing
Avatar for Takeshi "George" Matsuda georgeorge
1
260
【新規入学者様】ZEPメタバース校舎ガイド
Avatar for aini school小中等部 ainischool
0
150
[2026前期火５] 論理学（京都大学文学部 前期 第12回）「証明を走らせる：カリー・ハワード対応」
Avatar for Shunsuke Yatabe yatabe
0
320
Plano urbano de Madrid desde el Ensanche al s. XXI (2ª parte).
Avatar for Juan Martín Martín juanmartin2026
1
92k

Featured

See All Featured
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.5k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
280
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
320
Fireside Chat
Avatar for paigeccino paigeccino
43
4k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
39k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
830
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k

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: [email protected] twitter: @yatil

  45. And now: Sharky mail: [email protected] twitter: @yatil