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
120
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
67
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
94
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
88
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
1k
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
920
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
140

Other Decks in Education

See All in Education
勝手にCULTIBASE で広げよう、探究の輪！ - CULTIVAL 2026
Avatar for Hiroshi SAKAI hiroc_sk
1
220
[2026前期火５] 論理学（京都大学文学部 前期 第8回）「正規化定理の証明」
Avatar for Shunsuke Yatabe yatabe
0
180
AIには考えられないことを考えられる人になるために
Avatar for IQBocchi iqbocchi
1
170
「答えを出す」より「わかる」をつくる
Avatar for Kazuki Maeda kzkmaeda
1
160
生成AI時代のエンジニア育成について考えてみた
Avatar for Daisuke Akagawa (Akasan) akasan
0
150
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.7k
Science Tokyo国際卓越研究大学計画_202604
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
4.5k
Catecismo 26 #2 - Do Credo; Introdução ao 1º artigo
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
130
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.7k
!コスパよくインターンに受かる方法！
Avatar for るりいろぼうや ruribou
1
280
[2026前期火５] 論理学（京都大学文学部 前期 第3回）「形式言語と四つのキーワード：メタ・構成・意味論・ハーモニー」
Avatar for Shunsuke Yatabe yatabe
0
560
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
2
2.3k

Featured

See All Featured
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
740
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
260
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
620
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
370
A Soul's Torment
Avatar for Nat Ma seathinner
6
3k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k

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