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
100
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
54
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
80
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
80
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
900
How I stopped worrying and learned to love defaults — with notes
Avatar for Eric Eggert yatil
0
430
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
890
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
130

Other Decks in Education

See All in Education
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
Avatar for みんなのコード codeforeveryone
0
200
Open Source Summit Japan 2025のボランティアをしませんか
Avatar for Kujiraitakahiro kujiraitakahiro
0
830
2025年度春学期　統計学　第8回　演習(1) 問題に対する答案の書き方（講義前配付用） (2025. 5. 29)
Avatar for Akira Asano akiraasano
PRO
0
140
Ch1_-_Partie_1.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
200
2025年度春学期　統計学　第9回　確からしさを記述する ー 確率 (2025. 6. 5)
Avatar for Akira Asano akiraasano
PRO
0
150
マネジメント「される側」 こそ覚悟を決めろ
Avatar for Nao-RandD nao_randd
10
5.5k
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
Avatar for OpenID Foundation Japan oidfj
5
1.7k
20250625_なんでもCopilot 一年の振り返り
Avatar for ponponmikan ponponmikankan
0
350
2025/06/05_読み漁り学習
Avatar for Ken Nagamine nag8
0
190
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.1k
フィードバックの伝え方、受け身のココロ / The Way of Feedback: Words and the Receiving Heart
Avatar for Aki spring_aki
1
130
OpenSourceSummitJapanを運営してみた話
Avatar for Kujiraitakahiro kujiraitakahiro
0
790

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.5k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
810
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k

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