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
110
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
110
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
64
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
92
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
87
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
990
How I stopped worrying and learned to love defaults — with notes
Avatar for Eric Eggert yatil
0
450
How I stopped worrying and learned to love defaults
Avatar for Eric Eggert yatil
0
730
Fronteers11 Jam Session: a11y goes to 11
Avatar for Eric Eggert yatil
1
920
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
140

Other Decks in Education

See All in Education
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
3.1k
0513
Avatar for cbtlibrary cbtlibrary
0
170
事業紹介資料（トレーナー養成講座）
Avatar for 須藤賢太郎 kentaro1981
0
420
SL AMIGOS 教育格差と私たちの取り組み - スリランカの支援学校への支援プロジェクト：リシンドゥ リオ 氏 （別府溝部学園短期大学 ビジネス観光コース 留学生):2720 Japan O.K. ロータリーEクラブ2026年4月6日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
600
면접관 눈에 띄는 데이터 분석 포트폴리오 만드는 법 | 2026년 5월 세미나
Avatar for 데이터리안 datarian
0
580
Πλουτοκρατία: Η Τυραννία του Μαμμωνά και η Μεταανθρώπινη Δουλεία
Avatar for Amethystos amethyst1
0
260
Science Tokyo国際卓越研究大学計画_202604
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
3.6k
[2026前期火５] 論理学（京都大学文学部 前期 第3回）「形式言語と四つのキーワード：メタ・構成・意味論・ハーモニー」
Avatar for Shunsuke Yatabe yatabe
0
500
Modern Data Fetching Techniques in Angular
Avatar for Dhananjay Kumar debug_mode
0
200
BITCOIN : Les fondamentaux !
Avatar for Renaud Lifchitz rlifchitz
0
160
Laura Wilson - The Quarterly PR Pivot
Avatar for Laura Wilson laurawilsonbseo1
1
320
[2026前期火５] 論理学（京都大学文学部 前期 第6回）「かつとまたはの規則」
Avatar for Shunsuke Yatabe yatabe
0
210

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
200
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
160

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