Gastvorlesung an der Johannes Gutenberg-Universität Mainz am 11. Mai 2010 zu Barrierefreiem Web.

1. Abgesenkte Bordsteine im Web.Warum von Barrierefreiheit Alle profitieren. Martin Kliehm. Senior Frontend Engineer.Namics. 11. Mai 2010. Johannes Gutenberg-Universität Mainz. Foto: http://flic.kr/p/55Sh6D

3. Barrierefreiheit, Usability, Geräteunabhängigkeit

4. Internationalisierung (i18n) &Lokalisierung (L10N)

5. Technische Konzeption und Beratung

7. Invited Expert der W3C Accessibility Task Force

8. Stakeholder der authorisierten deutschen Übersetzung der W3C Richtlinien für barrierefreie Webinhalte (WCAG 2.0)

9. Mitglied in der International Liaison Group des Web Standards Projects

10. Mitglied bei den WebkrautsMartin Kliehm.Senior Frontend Engineer.Entwicklung, Barrierefreiheit,Mobile Endgeräte, i18n Berufserfahrung Seit 1996, Barrierefreiheit seit 1999, bei Namics seit 2008 Kontakt http://namics.comhttp://klie.hm/profilehttp://twitter.com/kliehm

11. Interdisziplinäre Teams. Namics vorgestellt. 11.05.2010 Barrierefreiheit. Universität Mainz. 3 Projekt Management Technologie Consulting Kreation

12. Namics vorgestellt. 11.05.2010 Barrierefreiheit. Universität Mainz. 4

14. Demographie: Barrierefreiheit als Wirtschaftsfaktor

15. Barrierefreiheit von Websites

16. Herausforderungen für die Zukunft11.05.2010 5 Barrierefreiheit. Universität Mainz.

17. Barrierefreiheit „Barrierefrei sind […] Systeme der Informationsverarbeitung […], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“ Behindertengleichstellungsgesetz 6 Barrierefreiheit. Universität Mainz. 21.05.2010

18. Paradigmenwandel: Behinderung warursprünglich ein medizinisches Gebrechen. 11.05.2010 7 Barrierefreiheit. Universität Mainz. http://flic.kr/p/2Vcqt5

19. Behinderung alsindividuelles Problem 11.05.2010 8 Barrierefreiheit. Universität Mainz. Menschenwürde? http://flic.kr/p/ws4tD

20. 11.05.2010 9 Barrierefreiheit. Universität Mainz. Nicht der Rollstuhl ist die Barriere,die Architektur ist es … oder die Gesellschaft. “Disability results from an interaction betweena non-inclusive society and individuals.” UN-Konventionüber die Rechtevon MenschenmitBehinderungen http://failblog.org/2008/09/05/ramp-fail/

21. 11.05.2010 10 Fokuswechsel: „Behinderte“ setzt die Behinderung in den Vordergrund. „Menschen mit Behinderungen“setzt den Menschen in den Mittelpunkt. http://flic.kr/p/6SEier Barrierefreiheit. Universität Mainz. Namics.

22. 11.05.2010 11 Fokuswechsel: „Behinderte“ setzt die Behinderung in den Vordergrund. http://flic.kr/p/6SEier Barrierefreiheit. Universität Mainz. Namics.

23. 11.05.2010 12 „Menschen mit Behinderungen“setzt den Menschen in den Mittelpunkt. http://flic.kr/p/6SEier Barrierefreiheit. Universität Mainz. Namics.

24. Paradigmenwandel:Barrierefreiheit alsnachträglicher Einfall,drangedübelt 11.05.2010 13 Barrierefreiheit. Universität Mainz. http://flic.kr/p/8H1Q

25. 11.05.2010 14 Barrierefreiheit. Universität Mainz. Andreas Slominski:„Rollstuhl zum Queren derTreppe in Odessa“ Museum für Moderne Kunst, Frankfurt http://flic.kr/p/rZh2F

26. Potemkin-Treppe in Odessa http://de.wikipedia.org/wiki/Potemkinsche_Treppe Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 15

27. Barrierefreiheit als integrales Element http://flic.kr/p/55Sh6D Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 16

28. http://flic.kr/p/4dqGWd Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 17

29. http://flic.kr/p/6VCacm Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 18

30. http://flic.kr/p/5o8k42 Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 19

31. http://flic.kr/p/8W93u Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 20

32. http://youtu.be/ffrq6cUoE5A Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 21

33. 11.05.2010 22 Barrierefreiheit. Universität Mainz.

34. 2. Demographie: Barrierefreiheit als Wirtschaftsfaktor 11.05.2010 23 http://flic.kr/p/8VHFb Barrierefreiheit. Universität Mainz.

35. 10-12% http://flic.kr/p/dMFYb Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 24

36. Menschen mit Behinderungen MenschenmitBehinderungen in Deutschland:ca. 8-10 Mio. (10-12%) MenschenmitBehinderungenweltweit:ca. 680-816 Mio.1 Schwerbehinderteimerwerbsfähigen Alter in Deutschland: 3 Mio. (3,6%)‏ Schwerbehinderteimerwerbsfähigen Alter in Europa: ca. 39 Mio. 1 Mont, D., Measuring Disability Prevalence, World Bank, March 2007 Demographie Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 25

37. Familie, Freunde, Ärzte und Pflegepersonalfolgen: “We could see how viral the community was. If you do something good, everyone knows about it.” Barbara Kaplan, Verizon Wireless, National Marketing Operations Manager “There’s a good deal of disposable income in the disability community. We’ve learned if you gain the community’s loyalty, they’re going to travel with you and recommend you to friends.” Lisa Anderson, Southwest Airlines, Head of Customer Insight Group MenschenmitBehinderungenalsMultiplikatoren. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 26

38. Die Herausforderungen. $225Mrd. http://flic.kr/p/4MqfGZ Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 27

39. Wennnur 1% derBritenmitBehinderungeneineVersicherungspoliceüber £300 bestellt, verdientLegal & General £27 Mio. — die Umsatzsteigerungdurch die generellverbesserte Usability nichtmitgerechnet. “The cost of making the site accessible pales into insignificance.” David Wilton, Legal & General Case Study: Legal & General. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 28

40. Nachhaltigen und langfristigenErfolgnurmitUnterstützung auf Vorstandsebene Accessibility PolicyalsTeilderUnternehmenskultur Barrierefreiheitvon Beginn an in einProjekteinbinden Pragmatischsein: Klein anfangen.“Harvest the low hanging fruit.” ErfolgreichmitBarrierefreiheit Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 29

41. Kollateralnutzen. Barrierefreiheit für Alle. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 30

42. 41% http://flic.kr/p/38rGwd Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 31

43. http://destatis.de/bevoelkerungspyramide/ Die Herausforderungen. 11.05.2010 32 Barrierefreiheit. Universität Mainz. Namics.

44. 50-65jährige: 17 Mio. (21%; 2010)1 50+: 33,2 Mio. (41%; 2010), Tendenz steigend,1davonim Internet: 14,9 Mio. (44,9%; 2009) 2 JährlicheZuwachsrateInternetnutzer 60-69 Jahre:6,9% (2009) 2 1StatistischesBundesamt, http://destatis.de/bevoelkerungspyramide/2 (N)Onliner Atlas 2009, http://initiatived21.de/category/nonliner-atlas Designing for our future selves. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 33

45. Das RisikoeinerBehinderungsteigtim Alter‏ Wahrnehmung von Kontrasten, räumlicheWahrnehmung und Auge-Hand-Koordinationnehmenab Owlsley, C.J., Sekuler, R. & Siemensne, D. (1983). Contrast sensitivity through adulthood. Vision Research 23, 689-699 Oft Anfänger, brauchenintuitive Nutzerführung ÄltereMenschen. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 34

46. MenschenmitLernschwierigkeiten: 5-10% EinwohnermitDeutsch alsFremdsprache: 5,7 Mio. (7%)‏ PISA 2003 untersteKompetenzstufeLesenoderdarunter: 22,3% Schulabgänger 2005 ohnemittlereReife: 33% KognitiveFähigkeiten. Lesekompetenz. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 35

47. 3. Barrierefreiheit von Websites Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 36

48. mehr ...mehr ...mehr ... Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 37

49. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 38

50. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 39

51. Wahrnehmbarkeit Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 40

52. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 41

53. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 42

54. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 43

55. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 44

56. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 45

57. Schriftgröße im CSS: 11px = 68% Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 46

58. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 47

59. Schriftgröße: 16px Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 48

60. Inhalt. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 49

61. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 50

62. Die Herausforderungen. 1:20 Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 51

63. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 52

64. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 53

65. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 54

66. Captcha Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 55

67. Zielgruppe: Alle. One Web for All.Niemanden ausgrenzen. Keine Diskriminierung. http://flic.kr/p/5PYudB Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 56

68. KleinerBildschirm KeineMaus KeinePopups Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 57

69. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 58

70. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 59

71. Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 60

72. Inhalte anreichern:Accessible Rich Internet Applications (ARIA) Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 61

73. <input type="text"aria-required="true" /> 11.05.2010 62 http://flic.kr/p/5EqqLe Barrierefreiheit. Universität Mainz. Namics.

74. <input type="text"aria-required="true"aria-invalid="true" /> 11.05.2010 63 http://flic.kr/p/5EuQYq Barrierefreiheit. Universität Mainz. Namics.

75. http://flic.kr/p/48LXf9

76. http://flic.kr/p/6F8N8Q http://webaim.org/blog/spam_free_accessible_forms/ Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 65

77. http://flic.kr/p/6F8Phy Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 66

78. <ulrole="menu navigation"> <li role="menuitem"><a href="…">Über Fraunhofer</a></li> </ul> 11.05.2010 Barrierefreiheit. Universität Mainz. Namics. 67

79. <arole="button" aria-controls="nav-direct-third"tabindex="0" title="Untermenü">Schnellzugriff</a> <ul id="nav-direct-third"role="menu navigation"aria-expanded="true"> <li role="menuitem"> <a href="…">Presse / Medien</a></li> </ul> 11.05.2010 Barrierefreiheit. Universität Mainz. Namics. 68

80. ARIA + JavaScript 11.05.2010 69 Barrierefreiheit. Universität Mainz. Namics.

81. http://flic.kr/p/6F4FUk Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 70

82. <ulrole="tablist"> <lirole="tab">Bahn</li> <lirole="tab">Mietwagen</li> <lirole="tab">Hotel</li> <lirole="tab">Mobilität</li> </ul> <!-- TabpanelBahn --> <div role="tabpanel"> … </div> Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 71

83. tabindex="0" setzen Event capturing: click, focus, keydown,keypress Tabpanel einblenden Tastatursteuerung: Pfeiltasten, ctrl + tab,ctrl + shift + tab Event-Bubbling stoppen ggf. Screenreader-Buffer aktualisieren Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 72

84. <div aria-live="polite"aria-atomic="true"aria-relevant="additions text"> Die Seite wurde Ihrem Merkzettel hinzugefügt. </div> http://flic.kr/p/6F4Gin Barrierefreiheit. Universität Mainz. Namics. 11.05.2010 73

85. 4. Herausforderungen für die Zukunft 21.05.2010 74 Barrierefreiheit. Universität Mainz.

86. 11.05.2010 75 HTML5 <video> Barrierefreiheit. Universität Mainz. Namics.

87. 11.05.2010 76 Barrierefreier Zugang zu Canvas 2D Barrierefreiheit. Universität Mainz. Namics.

88. 11.05.2010 77 Barrierefreie Interaktion in 3D-Welten http://youtu.be/Ol3qQ4CEUTo Barrierefreiheit. Universität Mainz. Namics.

89. 11.05.2010 78 Neue Interaktionsformen http://vimeo.com/10903243 Barrierefreiheit. Universität Mainz. Namics.

90. 11.05.2010 79 Gesichtserkennung und Gestensteuerung http://youtu.be/kkNxbyp6thM Barrierefreiheit. Universität Mainz. Namics.

91. Danke. twitter: @kliehm Folien: http://goo.gl/QdCg Kontakt: http://klie.hm/profile Barrierefreiheit. Universität Mainz. 21.05.2010 80