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
99
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
53
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
78
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
78
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
890
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
890
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
130

Other Decks in Education

See All in Education
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
Avatar for みんなのコード codeforeveryone
0
210
ANS-C01_２回不合格から合格までの道程
Avatar for amarelo_n24 amarelo_n24
1
290
20250807_がんばらないコミュニティ運営
Avatar for ponponmikan ponponmikankan
0
150
2025年度春学期　統計学　第11回　分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
Avatar for Akira Asano akiraasano
PRO
0
150
H5P-työkalut
Avatar for Matleena Laakso matleenalaakso
4
39k
2025年度春学期　統計学　第6回　データの関係を知る(1)ー相関関係 (2025. 5. 15)
Avatar for Akira Asano akiraasano
PRO
0
170
著作権と授業に関する出前講習会/dme-2025-05-01
Avatar for Takahiro Sumiya gnutar
0
210
Linuxのよく使うコマンドを解説
Avatar for MIKIO KUBO mickey_kubo
1
250
2025年度春学期　統計学　第12回　分布の平均を推測する ー 区間推定 (2025. 6. 26)
Avatar for Akira Asano akiraasano
PRO
0
150
実務プログラム
Avatar for リスナビ takenawa
0
12k
SARA Annual Report 2024-25
Avatar for SARA Institute sara2023
1
200
Info Session MSc Computer Science & MSc Applied Informatics
Avatar for Beat Signer signer
PRO
0
200

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
770
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Designing for Performance
Avatar for Lara Hogan lara
610
69k

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