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
110

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
55
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
84
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
82
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
940
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
700
Fronteers11 Jam Session: a11y goes to 11
Avatar for Eric Eggert yatil
1
900
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
140

Other Decks in Education

See All in Education
Sanapilvet opetuksessa
Avatar for Matleena Laakso matleenalaakso
0
34k
GOVERNOR ADDRESS：2025年9月29日合同公式訪問例会：2720 Japan O.K. ロータリーEクラブ、2025年10月6日卓話：藤田 千克由 氏（国際ロータリー第2720地区 2025－2026年度 ガバナー・大分中央ロータリークラブ・大分トキハタクシー（株）顧問）
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
730
Requirements Analysis and Prototyping - Lecture 3 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.4k
核軍備撤廃に向けた次の大きな一歩─核兵器を先には使わないと核保有国が約束すること
Avatar for HKano hide2kano
0
190
JavaScript - Lecture 6 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
ロータリー国際大会について～国際大会に参加しよう～：古賀 真由美 会員（2720 Japan O.K. ロータリーEクラブ・(有)誠邦産業 取締役）
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
1
750
MySmartSTEAM 2526
Avatar for cbtlibrary cbtlibrary
0
170
NUTMEG紹介スライド
Avatar for Mugicha mugiiicha
0
650
20251023＠天童市いこう会
Avatar for noriaki_koshiba koshiba_noriaki
0
110
KBS新事業創造体験2025_科目説明会
Avatar for Yasuchika Wakayama yasuchikawakayama
0
160
Linguaxes de programación
Avatar for i-rochiño irocho
0
510
2025年の本当に大事なAI動向まとめ
Avatar for Frieve-A frievea
0
130

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
400
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.3k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
0
960
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
0
130
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
33

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