$30 off During Our Annual Pro Sale. View Details »

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
83
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
82
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
930
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
コマンドラインを見直そう（1995年からタイムリープ）
Avatar for sapi_kawahara sapi_kawahara
0
590
20250830_本社にみんなの公園を作ってみた
Avatar for yoneyan yoneyan
0
180
仏教の源流からの奈良県中南和_奈良まほろば館‗飛鳥・藤原DAO/asuka-fujiwara_Saraswati
Avatar for Tomohiro Kimura tkimura12
0
170
Презентация "Знаю Россию"
Avatar for Evgeniy Tyurikov spilsart
0
380
あなたの言葉に力を与える、演繹的なアプローチ
Avatar for Takuto Nagami logica0419
1
240
Introdución ás redes
Avatar for i-rochiño irocho
0
510
俺と地方勉強会 - KomeKaigi・地方勉強会への期待 -
Avatar for ふぁらお加藤 pharaohkj
1
1.5k
吉岡研究室紹介(2025年度）
Avatar for Yoshioka Lab (Keio CSG) kentaroy47
0
770
The Next Big Step Toward Nuclear Disarmament
Avatar for HKano hide2kano
0
170
JavaScript - Lecture 6 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
バケットポリシーの記述を誤りマネコンからS3バケットを操作できなくなりそうになった話
Avatar for amarelo_n24 amarelo_n24
1
140
the difficulty into words
Avatar for Hideyuki D ukky86
0
330

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
100
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.3k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k

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