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

/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
Berufserfahrung
Seit 1996, Barrierefreiheit seit 1999, bei Namics seit 2008
Kontakt
http://namics.comhttp://klie.hm/profilehttp://twitter.com/kliehm

Interdisziplinäre Teams.
Namics vorgestellt.
11.05.2010
3
Projekt Management
Technologie
Consulting
Kreation

Namics vorgestellt.
11.05.2010
4

Barrierefreiheit im Web
Begriff der Behinderung
Demographie: Barrierefreiheit als Wirtschaftsfaktor
Barrierefreiheit von Websites
Herausforderungen für die Zukunft
11.05.2010
5

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
21.05.2010

Paradigmenwandel: Behinderung warursprünglich ein medizinisches Gebrechen.
11.05.2010
7
http://flic.kr/p/2Vcqt5

Behinderung alsindividuelles Problem
11.05.2010
8
Menschenwürde?
http://flic.kr/p/ws4tD

11.05.2010
9
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/

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.

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

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

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

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

Potemkin-Treppe in Odessa
http://de.wikipedia.org/wiki/Potemkinsche_Treppe
11.05.2010
15

Barrierefreiheit als integrales Element
http://flic.kr/p/55Sh6D
11.05.2010
16

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

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

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

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

http://youtu.be/ffrq6cUoE5A
11.05.2010
21

11.05.2010
22

2. Demographie: Barrierefreiheit als Wirtschaftsfaktor
11.05.2010
23
http://flic.kr/p/8VHFb

10-12%
http://flic.kr/p/dMFYb
11.05.2010
24

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
11.05.2010
25

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.
11.05.2010
26

Die Herausforderungen.
$225Mrd.
http://flic.kr/p/4MqfGZ
11.05.2010
27

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.
11.05.2010
28

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

Kollateralnutzen. Barrierefreiheit für Alle.
11.05.2010
30

41%
http://flic.kr/p/38rGwd
11.05.2010
31

http://destatis.de/bevoelkerungspyramide/
11.05.2010
32

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.
11.05.2010
33

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.
11.05.2010
34

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

3. Barrierefreiheit von Websites
11.05.2010
36

mehr ...mehr ...mehr ...
11.05.2010
37

11.05.2010
38

11.05.2010
39

Wahrnehmbarkeit
11.05.2010
40

11.05.2010
41

11.05.2010
42

11.05.2010
43

11.05.2010
44

11.05.2010
45

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

11.05.2010
47

Schriftgröße: 16px
11.05.2010
48

Inhalt.
11.05.2010
49

11.05.2010
50

1:20
11.05.2010
51

11.05.2010
52

11.05.2010
53

11.05.2010
54

Captcha
11.05.2010
55

Zielgruppe: Alle. One Web for All.Niemanden ausgrenzen. Keine Diskriminierung.
http://flic.kr/p/5PYudB
11.05.2010
56

KleinerBildschirm
KeineMaus
KeinePopups
11.05.2010
57

11.05.2010
58

11.05.2010
59

11.05.2010
60

Inhalte anreichern:Accessible Rich Internet Applications (ARIA)
11.05.2010
61

<input type="text"aria-required="true" />
11.05.2010
62
http://flic.kr/p/5EqqLe

<input type="text"aria-required="true"aria-invalid="true" />
11.05.2010
63
http://flic.kr/p/5EuQYq

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

http://flic.kr/p/6F8N8Q
http://webaim.org/blog/spam_free_accessible_forms/
11.05.2010
65

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

<ulrole="menu navigation">
<li role="menuitem"><a href="…">Über Fraunhofer</a></li>
</ul>
11.05.2010
67

<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
68

ARIA + JavaScript
11.05.2010
69

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

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

<div role="tabpanel">
…
</div>
11.05.2010
71

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
11.05.2010
72

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

4. Herausforderungen für die Zukunft
21.05.2010
74

11.05.2010
75
HTML5 <video>

11.05.2010
76
Barrierefreier Zugang zu Canvas 2D

11.05.2010
77
Barrierefreie Interaktion in 3D-Welten
http://youtu.be/Ol3qQ4CEUTo

11.05.2010
78
Neue Interaktionsformen
http://vimeo.com/10903243

11.05.2010
79
Gesichtserkennung und Gestensteuerung
http://youtu.be/kkNxbyp6thM

Danke.
twitter: @kliehm
Folien: http://goo.gl/QdCg
Kontakt: http://klie.hm/profile
21.05.2010
80

http://blog.namics.com	659
http://learningtheworld.eu	75
http://www.slideshare.net	63
http://webcache.googleusercontent.com	3
http://lab.namics.com	1

Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.

by Martin Kliehm

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 801

Statistics

Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren. Presentation Transcript