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
2
110

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
61
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
960
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
Leveraging LLMs for student feedback in introductory data science courses (Stats Up AI)
Avatar for Mine Cetinkaya-Rundel minecr
1
240
Chapitre_2_-_Partie_3.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
210
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.1k
OSINT入門-CTF for GIRLS_SECCON14電脳会議
Avatar for Nomizo Nomizo nomizone
1
1.2k
Activité_5_-_Les_indicateurs_du_climat_global.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
210
2025年の本当に大事なAI動向まとめ
Avatar for Frieve-A frievea
1
200
滑空スポーツ講習会2025(実技講習）EMFT学科講習資料/JSA EMFT 2025
Avatar for JSA seminar jsaseminar
0
320
計算物理におけるGitの使い方 / 01-c-compphys
Avatar for kaityo256 kaityo256
PRO
2
510
地区危機管理委員会 出前セミナー「ロータリーにおける危機管理」：膳所 和彦 氏（国際ロータリー第2720地区 パストガバナー・日田ロータリークラブ・医療法人恒心会ぜぜ医院 理事長）:2720 Japan O.K. ロータリーEクラブ2026年2月16日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
1
610
Referendum Costituzionale Giustizia
Avatar for Nostra Dalmine nostradalmine
0
110
P3NFEST 2026 Spring ハンズオン「ハッキング・ラブ！はじめてのハッキングをやってみよう」資料
Avatar for Nomizo Nomizo nomizone
0
370
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
12
15k

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
37k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.6k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
390
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
86
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k

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