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
100

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
54
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
81
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
80
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
910
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
690
Fronteers11 Jam Session: a11y goes to 11
Avatar for Eric Eggert yatil
1
890
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
130

Other Decks in Education

See All in Education
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
Avatar for sasakendayo sasakendayo
0
270
自分だけの、誰も想像できないキャリアの育て方 〜偶然から始めるキャリアプラン〜 / Career planning starting by luckly v2
Avatar for VTRyo vtryo
1
210
2024-2025 CBT top items
Avatar for cbtlibrary cbtlibrary
0
120
CHARMS-HP-Banner
Avatar for Rica weltraumreisende
0
1k
万博非公式マップとFOSS4G
Avatar for K.Sakanoshita barsaka2
0
1.3k
生成AI活用セミナー/GAI-workshop
Avatar for Takahiro Sumiya gnutar
0
120
【品女100周年企画】Pitch Deck
Avatar for 品川女子学院チェンジエージェントプロジェクト shinagawajoshigakuin_100th
0
7.2k
相互コミュニケーションの難しさ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
260
情報科学類で学べる専門科目38選
Avatar for Mutsuha Asada momeemt
0
620
大学院進学について（2025年度版）
Avatar for imash imash
0
130
附属科学技術高等学校の概要｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
960
SISTEMA DE MEMORIA Y SU IMPACTO EN LAS DECISIONES.
Avatar for José Vicente Pérez Cubias jvpcubias
0
180

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Making Projects Easy
Avatar for Brett Harned brettharned
119
6.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.2k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k

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