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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Eric Eggert Eric Eggert
September 27, 2011
Education
120
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
130
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
73
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
95
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
92
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
470
How I stopped worrying and learned to love defaults
Avatar for Eric Eggert yatil
0
750
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
Modulo : abc
Avatar for Abraham Zamudio robintux
0
240
Science Tokyo University for International Research Excellence scheme_April 2026
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
550
Adobe Express
Avatar for Matleena Laakso matleenalaakso
2
8.4k
Dronegeografía innovación didáctica y fotogrametría 3D para la enseñanza de la geografía local y la ciudadaniía activa
Avatar for Juan Martín Martín juanmartin2026
0
41k
Quality Control of Crude Drugs
Avatar for Pawan Kumar Sahu pawan_pharm
0
200
響け!ユーフォニアムと考える「決め方」/Thinking About Decision-Making with Sound! Euphonium
Avatar for Ryusei Ohkura 3l4l5
1
200
Introduction to M&A
Avatar for Dr. Bharath V bvr7352
0
240
セキュリティ担当がいない中小医療機関を院外のRISSはどう支えるべきか / How External RISS Can Help Small Medical Institutions
Avatar for Kengo TODA eller86
1
230
Carbohydrates: Classification, Structure & Chemical Properties
Avatar for Pawan Kumar Sahu pawan_pharm
0
330
武藤の処世術を書いてみた
Avatar for Masahiro Muto mutomasa
0
140
AIの力を100%引き出すために
Avatar for Frieve-A frievea
0
620
Railsチュートリアル × 反転学習の事例紹介
Avatar for YassLab yasslab
PRO
3
190k

Featured

See All Featured
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.8k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
580
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.9k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
360
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
880
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
520
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
380

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