Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Principles of accessible web desing (at #fronteers10)

Avatar for Eric Eggert

Eric Eggert

September 27, 2011
Tweet

More Decks by Eric Eggert

See All by Eric Eggert
What is EOWG?
Avatar for Eric Eggert yatil
0
98
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
52
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
78
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
77
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
880
How I stopped worrying and learned to love defaults — with notes
Avatar for Eric Eggert yatil
0
420
How I stopped worrying and learned to love defaults
Avatar for Eric Eggert yatil
0
690
Fronteers11 Jam Session: a11y goes to 11
Avatar for Eric Eggert yatil
1
880
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
130

Other Decks in Education

See All in Education
技術文章を書くための執筆技術と実践法（パラグラフライティング）
Avatar for Hisashi Ishihara hisashiishihara
18
6.5k
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2k
Gaps in Therapy in IBD - IBDInnovate 2025 CCF
Avatar for Peter Higgins higgi13425
0
490
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
Avatar for モブエンジニア masakiokuda
2
310
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2k
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
2
1.7k
実務プログラム
Avatar for リスナビ takenawa
0
5.7k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
460
America and the World
Avatar for Spiro Bolos oripsolob
0
510
Education-JAWS #3 ~教育現場に、AWSのチカラを~
Avatar for モブエンジニア masakiokuda
0
170
AIC 103 - Applications of Property Valuation: Essential Slides
Avatar for Rebecca M rmccaic
0
210
2025.05.10 技術書とVoicyとわたし #RPALT
Avatar for Kaito UDAGAWA kaitou
1
220

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
53k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
800
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
500
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

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