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
80
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
80
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
900
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
Transición del Management al Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
210
2025年度春学期　統計学　第14回　分布についての仮説を検証する ー 仮説検定（１） (2025. 7. 10)
Avatar for Akira Asano akiraasano
PRO
0
140
データで見る赤ちゃんの成長
Avatar for じゃらしまる syuchimu
0
280
AWSと共に英語を学ぼう
Avatar for amarelo_n24 amarelo_n24
0
150
JPCERTから始まる草の根活動～セキュリティ文化醸成のためのアクション～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
220
学びは趣味の延長線
Avatar for uutan1108 ohmori_yusuke
0
110
Common STIs in London: Symptoms, Risks & Prevention
Avatar for Medical Dental medicaldental
0
140
今までのやり方でやってみよう！？~今までのやり方でやってみよう！？~
Avatar for kanami- kanamitsu
0
170
20250611_なんでもCopilot1年続いたぞ～
Avatar for ponponmikan ponponmikankan
0
170
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
4
14k
令和政経義塾第2期説明会
Avatar for 一般財団法人 nxji
0
200
2026 g0v 零時政府年會啟動提案 / g0v Summit 2026 Kickstart
Avatar for Poren Chiang rschiang
0
280

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
930
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
513
110k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k

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