Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Principles of accessible web desing (at #fronte...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
100
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
62
Accessible Widgets Class 4/4
Avatar for Eric Eggert yatil
0
88
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
84
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
970
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
720
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
小学校5,6年生向けキャリア教育 大人になるまでの道
Avatar for Satoru Takeuchi sat
PRO
8
3.5k
生成AIを授業の相棒にするデータサイエンス入門（「デジタル✕探究」イノベーターズフォーラム テクニカルセッション講演資料）
Avatar for The Japan DataScientist Society datascientistsociety
PRO
0
110
TinyGoをWebブラウザで動かすための方法+アルファ_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
320
Lenguajes de Programacion (Ingresantes UNI 2026)
Avatar for Abraham Zamudio robintux
0
160
栃木県警サイバーセキュリティ研修会2026
Avatar for Nomizo Nomizo nomizone
1
390
SL AMIGOS 教育格差と私たちの取り組み - スリランカの支援学校への支援プロジェクト：リシンドゥ リオ 氏 （別府溝部学園短期大学 ビジネス観光コース 留学生):2720 Japan O.K. ロータリーEクラブ2026年4月6日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
530
Gitの仕組みと用語 / 01-b-term
Avatar for kaityo256 kaityo256
PRO
0
300
OSINT入門-CTF for GIRLS_SECCON14電脳会議
Avatar for Nomizo Nomizo nomizone
1
1.3k
[2026前期火５] 論理学（京都大学文学部 前期 第1回）「ハルシネーションを外部世界との対応を考えずに見分ける方法」
Avatar for Shunsuke Yatabe yatabe
0
680
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.6k
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
3k
反応する前に「受容する」力を鍛える。 自分の安全地帯🌱 を育てよう / Cultivating and sharing ventral vagal safety.
Avatar for Aki spring_aki
0
140

Featured

See All Featured
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
99
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
680
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
880
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
440

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