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
110
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
63
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
92
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
86
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
980
How I stopped worrying and learned to love defaults — with notes
Avatar for Eric Eggert yatil
0
450
How I stopped worrying and learned to love defaults
Avatar for Eric Eggert yatil
0
730
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
教育現場から見た Ruby on Rails
Avatar for YassLab yasslab
PRO
0
150
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.2k
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.6k
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.2k
Course Review - Lecture 13 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.6k
[2026前期火５] 論理学（京都大学文学部 前期 第5回）「 ならばの問題演習・proof net・かつの規則」
Avatar for Shunsuke Yatabe yatabe
0
150
反応する前に「受容する」力を鍛える。 自分の安全地帯🌱 を育てよう / Cultivating and sharing ventral vagal safety.
Avatar for Aki spring_aki
0
160
Liberalism's Last Man and Asia
Avatar for Vikash Yadav vyadav
0
130
Gitがない時代 インターネットがない時代の 開発話
Avatar for sapi_kawahara sapi_kawahara
0
110
Integrating prosody into reading comprehension: A high school classroom practice
Avatar for Kazuhito Yamato otamayuzak
0
120
SSH_handshake_easy_explain
Avatar for KenBo kenbo
0
970
Catecismo 26 #1 - Aula inaugural
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
130

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
310
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
340
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
360

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