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
100
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
62
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
88
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
84
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
970
How I stopped worrying and learned to love defaults — with notes
Avatar for Eric Eggert yatil
0
440
How I stopped worrying and learned to love defaults
Avatar for Eric Eggert yatil
0
720
Fronteers11 Jam Session: a11y goes to 11
Avatar for Eric Eggert yatil
1
910
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
140

Other Decks in Education

See All in Education
タイムマシンのつくりかた
Avatar for Nomizo Nomizo nomizone
4
1.3k
✅ レポート採点基準 / How Your Reports Are Assessed
Avatar for YassLab yasslab
PRO
0
320
TinyGoをWebブラウザで動かすための方法+アルファ_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
320
青森県の人口減少について | | 下山学園高等学校
Avatar for aomorisix aomori6
0
130
勾配ブースティングと決定木の話 / gradient boosting and decision trees
Avatar for kaityo256 kaityo256
PRO
2
650
アジャイルなマインドセットを「取り戻す」新人研修づくり
Avatar for Tomonori Fukuta chinmo
2
360
What workforce agencies must have in place to compete for and deliver on RESTART grants
Avatar for Territorium territorium
PRO
0
140
LinkedIn
Avatar for Matleena Laakso matleenalaakso
0
4.1k
コマンドラインの使い方 / 01-d-cli
Avatar for kaityo256 kaityo256
PRO
0
140
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.1k
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.6k
Why the humanities may be your best career bet
Avatar for Jay Heinrichs figarospeech
0
150

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
300
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Between Models and Reality
Avatar for mayunak mayunak
3
260
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
98
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
350
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
370
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
260
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
190
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.2k

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