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
58
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
87
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
82
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
950
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
710
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
TeXで変える教育現場
Avatar for doratex doratex
1
13k
【ベテランCTOからのメッセージ】AIとか組織とかキャリアとか気になることはあるけどさ、個人の技術力から目を背けないでやっていきましょうよ
Avatar for Toshiaki Baba netmarkjp
2
2.9k
Microsoft Office 365
Avatar for Matleena Laakso matleenalaakso
0
2.1k
Web Search and SEO - Lecture 10 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
2
3.1k
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
Avatar for Beat Signer signer
PRO
2
2.2k
IKIGAI World Fes：program
Avatar for Fujinari tsutsumi
1
2.6k
LotusScript でエージェント情報を出力してみた
Avatar for Haruyuki Nakano harunakano
0
120
XML and Related Technologies - Lecture 7 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
JAPAN AI CUP Prediction Tutorial
Avatar for Shotaro Ishihara upura
2
720
Flinga
Avatar for Matleena Laakso matleenalaakso
3
15k
AIでキミの未来はどう変わる？
Avatar for Zun Behoma behomazn
0
110
Chapitre_2_-_Partie_3.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
160

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
77
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.8k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
53
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
440
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.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