79
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

Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 2: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

/me

11.05.2010 Barrierefreiheit. Universität Mainz. 2

Kompetenzen Webstandards & Browser-Technologien Barrierefreiheit, Usability, Geräteunabhängigkeit Internationalisierung (i18n) &

Lokalisierung (L10N) Technische Konzeption und Beratung Internationale Konferenzbeiträge

Gremien Invited Expert der W3C HTML Arbeitsgruppe Invited Expert der W3C Accessibility Task Force Stakeholder der authorisierten deutschen

Übersetzung der W3C Richtlinien für barrierefreie Webinhalte (WCAG 2.0)

Mitglied in der International Liaison Group des Web Standards Projects

Mitglied bei den Webkrauts

Martin Kliehm.Senior Frontend Engineer.

Entwicklung, Barrierefreiheit,Mobile Endgeräte, i18n

BerufserfahrungSeit 1996, Barrierefreiheit seit 1999, bei Namics seit 2008

Kontakthttp://namics.comhttp://klie.hm/profilehttp://twitter.com/kliehm

Page 3: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Interdisziplinäre Teams.

Namics vorgestellt.

11.05.2010 Barrierefreiheit. Universität Mainz. 3

Kreation

Consulting

Technologie Projekt Management

Page 4: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Namics vorgestellt.

11.05.2010 Barrierefreiheit. Universität Mainz. 4

Page 5: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Barrierefreiheit im Web

● Begriff der Behinderung

● Demographie: Barrierefreiheit als Wirtschaftsfaktor

● Barrierefreiheit von Websites

● Herausforderungen für die Zukunft

11.05.2010 5 Barrierefreiheit. Universität Mainz.

Page 6: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

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

611.04.2023 Barrierefreiheit. Universität Mainz.

Page 7: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Paradigmenwandel: Behinderung warursprünglich ein medizinisches Gebrechen.

11.05.2010 7 Barrierefreiheit. Universität Mainz.

http://flic.kr/p/2Vcqt5

Page 8: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Behinderung alsindividuelles Problem

11.05.2010 8 Barrierefreiheit. Universität Mainz.

http://flic.kr/p/ws4tD

Menschenwürde?

Page 9: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 9 Barrierefreiheit. Universität Mainz.

http://failblog.org/2008/09/05/ramp-fail/

Nicht der Rollstuhl ist die Barriere,die Architektur ist es …oder die Gesellschaft.

“Disability results from an interaction between a non-inclusive society and individuals.”

UN-Konvention über die Rechtevon Menschen mit Behinderungen

Page 10: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 11

http://flic.kr/p/6SEier

Fokuswechsel: „Behinderte“ setzt die Behinderung in den Vordergrund.

Barrierefreiheit. Universität Mainz. Namics.

Page 11: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 12

http://flic.kr/p/6SEier

„Menschen mit Behinderungen“setzt den Menschen in den Mittelpunkt.

Barrierefreiheit. Universität Mainz. Namics.

Page 12: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Paradigmenwandel:Barrierefreiheit alsnachträglicher Einfall,drangedübelt

11.05.2010 13 Barrierefreiheit. Universität Mainz.

http://flic.kr/p/8H1Q

Page 13: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 14 Barrierefreiheit. Universität Mainz.

http://flic.kr/p/rZh2F

Andreas Slominski:„Rollstuhl zum Queren derTreppe in Odessa“

Museum für Moderne Kunst, Frankfurt

Page 14: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

http://de.wikipedia.org/wiki/Potemkinsche_Treppe

11.05.2010 15 Barrierefreiheit. Universität Mainz. Namics.

Potemkin-Treppe in Odessa

Page 15: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Barrierefreiheit als integrales Element

http://flic.kr/p/55Sh6D

11.05.2010 16 Barrierefreiheit. Universität Mainz. Namics.

Page 16: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

http://flic.kr/p/4dqGWd

11.05.2010 17 Barrierefreiheit. Universität Mainz. Namics.

Page 17: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

http://flic.kr/p/6VCacm

11.05.2010 18 Barrierefreiheit. Universität Mainz. Namics.

Page 18: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

http://flic.kr/p/5o8k42

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.19

Page 19: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

http://flic.kr/p/8W93u

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.20

Page 20: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

http://youtu.be/ffrq6cUoE5A

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.21

Page 21: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 22 Barrierefreiheit. Universität Mainz.

Page 22: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

2. Demographie: Barrierefreiheit als Wirtschaftsfaktor

11.05.2010 23

http://flic.kr/p/8VHFb

Barrierefreiheit. Universität Mainz.

Page 23: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

10-12%

http://flic.kr/p/dMFYb

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.24

Page 24: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Menschen mit Behinderungen

Menschen mit Behinderungen in Deutschland:ca. 8-10 Mio. (10-12%)

Menschen mit Behinderungen weltweit:ca. 680-816 Mio.1

Schwerbehinderte im erwerbsfähigen Alter in Deutschland: 3 Mio. (3,6%)

Schwerbehinderte im erwerbsfähigen Alter in Europa: ca. 39 Mio.

1 Mont, D., Measuring Disability Prevalence, World Bank, March 2007

Demographie

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.25

Page 25: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Familie, Freunde, Ärzte und Pflegepersonal folgen:

“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

Menschen mit Behinderungen als Multiplikatoren.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.26

Page 26: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Die Herausforderungen.

$225Mrd.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.27

http://flic.kr/p/4MqfGZ

Page 27: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Wenn nur 1% der Briten mit Behinderungen eine Versicherungspolice über £300 bestellt, verdientLegal & General £27 Mio. — die Umsatzsteigerung durch die generell verbesserte Usability nicht mitgerechnet.

“The cost of making the site accessible pales into insignificance.”

David Wilton, Legal & General

Case Study: Legal & General.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.28

Page 28: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Nachhaltigen und langfristigen Erfolg nur mit Unterstützung auf Vorstandsebene

Accessibility Policy als Teil der Unternehmenskultur

Barrierefreiheit von Beginn an in ein Projekt einbinden

Pragmatisch sein: Klein anfangen.“Harvest the low hanging fruit.”

Erfolgreich mit Barrierefreiheit

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.29

Page 29: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Kollateralnutzen. Barrierefreiheit für Alle.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.30

Page 30: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

41%

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.31

http://flic.kr/p/38rGwd

Page 31: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Die Herausforderungen.

11.05.2010 32

http://destatis.de/bevoelkerungspyramide/

Barrierefreiheit. Universität Mainz. Namics.

Page 32: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

50-65jährige: 17 Mio. (21%; 2010)1

50+: 33,2 Mio. (41%; 2010), Tendenz steigend,1

davon im Internet: 14,9 Mio. (44,9%; 2009) 2

Jährliche Zuwachsrate Internetnutzer 60-69 Jahre:6,9% (2009) 2

1 Statistisches Bundesamt, http://destatis.de/bevoelkerungspyramide/2 (N)Onliner Atlas 2009, http://initiatived21.de/category/nonliner-atlas

Designing for our future selves.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.33

Page 33: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Das Risiko einer Behinderung steigt im Alter

Wahrnehmung von Kontrasten, räumliche Wahrnehmung und Auge-Hand-Koordination nehmen ab

Owlsley, C.J., Sekuler, R. & Siemensne, D. (1983). Contrast sensitivity through adulthood. Vision Research 23, 689-699

Oft Anfänger, brauchen intuitive Nutzerführung

Ältere Menschen.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.34

Page 34: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Menschen mit Lernschwierigkeiten: 5-10%

Einwohner mit Deutsch als Fremdsprache: 5,7 Mio. (7%)

PISA 2003 unterste Kompetenzstufe Lesen oder darunter: 22,3%

Schulabgänger 2005 ohne mittlere Reife: 33%

Kognitive Fähigkeiten. Lesekompetenz.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.35

Page 35: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

3. Barrierefreiheit von Websites

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.36

Page 36: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

mehr ...

mehr ...

mehr ...

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.37

Page 37: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 38: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 39: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Wahrnehmbarkeit

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.40

Page 40: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 41: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 42: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 43: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 44: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 45: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Schriftgröße im CSS: 11px = 68%

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.46

Page 46: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 47: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Schriftgröße: 16px

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.48

Page 48: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Inhalt.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.49

Page 49: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 50: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Die Herausforderungen.

1:2011.05.2010 Barrierefreiheit. Universität Mainz. Namics.51

Page 51: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 52: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 53: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 54: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Captcha

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.55

Page 55: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Zielgruppe: Alle. One Web for All.Niemanden ausgrenzen. Keine Diskriminierung.

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.56

http://flic.kr/p/5PYudB

Page 56: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Kleiner Bildschirm

Keine Maus

Keine Popups

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.57

Page 57: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 58: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 59: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 60: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

Inhalte anreichern:Accessible Rich Internet Applications (ARIA)

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.61

Page 61: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

<input type="text" aria-required="true" />

11.05.2010 62

http://flic.kr/p/5EqqLe

Barrierefreiheit. Universität Mainz. Namics.

Page 62: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

<input type="text" aria-required="true" aria-invalid="true" />

11.05.2010 63 Barrierefreiheit. Universität Mainz. Namics.

http://flic.kr/p/5EuQYq

Page 63: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

Page 64: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.http://webaim.org/blog/spam_free_accessible_forms/11.05.2010 Barrierefreiheit. Universität Mainz. Namics.65

http://flic.kr/p/6F8N8Q

Page 65: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

http://flic.kr/p/6F8Phy

Page 66: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

<ul role="menu navigation">

<li role="menuitem"> <a href="…">Über Fraunhofer</a> </li>

</ul>

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.67

Page 67: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

<a role="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

Page 68: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

ARIA + JavaScript

11.05.2010 69 Barrierefreiheit. Universität Mainz. Namics.

Page 69: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

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

http://flic.kr/p/6F4FUk

Page 70: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

<ul role="tablist"> <li role="tab">Bahn</li> <li role="tab">Mietwagen</li> <li role="tab">Hotel</li> <li role="tab">Mobilität</li></ul>

<!-- Tabpanel Bahn --><div role="tabpanel"> …</div>

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.71

Page 71: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

1. tabindex="0" setzen

2. Event capturing:

click, focus, keydown,

keypress

3. Tabpanel einblenden

4. Tastatursteuerung:

Pfeiltasten, ctrl + tab,

ctrl + shift + tab

5. Event-Bubbling stoppen

6. ggf. Screenreader-Buffer

aktualisieren11.05.2010 Barrierefreiheit. Universität Mainz. Namics.72

Page 72: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

<div aria-live="polite"

aria-atomic="true"

aria-relevant="additions text">

Die Seite wurde Ihrem Merkzettel hinzugefügt.

</div>

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.73

http://flic.kr/p/6F4Gin

Page 73: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.

4. Herausforderungen für die Zukunft

11.04.2023 74 Barrierefreiheit. Universität Mainz.

Page 74: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 75

HTML5 <video>

Barrierefreiheit. Universität Mainz. Namics.

Page 75: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 76

Barrierefreier Zugang zu Canvas 2D

Barrierefreiheit. Universität Mainz. Namics.

Page 76: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 77

http://youtu.be/Ol3qQ4CEUTo

Barrierefreie Interaktion in 3D-Welten

Barrierefreiheit. Universität Mainz. Namics.

Page 77: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 78

http://vimeo.com/10903243

Neue Interaktionsformen

Barrierefreiheit. Universität Mainz. Namics.

Page 78: Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Namics.11.05.2010 79

http://youtu.be/kkNxbyp6thM

Gesichtserkennung und Gestensteuerung

Barrierefreiheit. Universität Mainz. Namics.