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
81
Accessible Widgets Class 2/4
Avatar for Eric Eggert yatil
0
80
New Developments in Web Accessibility
Avatar for Eric Eggert yatil
0
910
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
700
Fronteers11 Jam Session: a11y goes to 11
Avatar for Eric Eggert yatil
1
900
Accessibility 101 – Ignite Frankfurt
Avatar for Eric Eggert yatil
0
130

Other Decks in Education

See All in Education
日本の情報系社会人院生のリアル -JAIST 修士編-
Avatar for Yuriko Kikuchi yurikomium
1
150
尊敬語「くださる」と謙譲語「いただく」の使い分け
Avatar for marimari hysmrk
0
120
生成AI活用セミナー/GAI-workshop
Avatar for Takahiro Sumiya gnutar
0
140
俺と地方勉強会 - KomeKaigi・地方勉強会への期待 -
Avatar for ふぁらお加藤 pharaohkj
1
140
高校におけるプログラミング教育を考える
Avatar for Naoki Kato naokikato
PRO
0
170
Alumnote inc. Company Deck
Avatar for Alumnote yukinumata
0
4.9k
とある長岡高専卒のおっさんがIT企業のマネージャーになるまで / journey-from-nagaoka-kosen-grad-to-it-manager
Avatar for TAKANO Sho / @masaru_b_cl masaru_b_cl
0
140
言葉の文化祭2025：IKIGAI World Fes：program
Avatar for Fujinari tsutsumi
1
2.2k
(2025) L'origami, mieux que la règle et le compas
Avatar for Roger Mansuy mansuy
0
160
Node-REDで広がるプログラミング教育の可能性
Avatar for ueponx ueponx
0
160
社外コミュニティの歩き方
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
2
220
相互コミュニケーションの難しさ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
290

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
700
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2.2k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k

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