abgesenkte bordsteine im web. warum von barrierefreiheit alle profitieren
Post on 09-May-2015
3.854 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
Namics.
Interdisziplinäre Teams.
Namics vorgestellt.
11.05.2010 Barrierefreiheit. Universität Mainz. 3
Kreation
Consulting
Technologie Projekt Management
Namics.
Namics vorgestellt.
11.05.2010 Barrierefreiheit. Universität Mainz. 4
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.
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.
Namics.
Paradigmenwandel: Behinderung warursprünglich ein medizinisches Gebrechen.
11.05.2010 7 Barrierefreiheit. Universität Mainz.
http://flic.kr/p/2Vcqt5
Namics.
Behinderung alsindividuelles Problem
11.05.2010 8 Barrierefreiheit. Universität Mainz.
http://flic.kr/p/ws4tD
Menschenwürde?
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
Namics.11.05.2010 11
http://flic.kr/p/6SEier
Fokuswechsel: „Behinderte“ setzt die Behinderung in den Vordergrund.
Barrierefreiheit. Universität Mainz. Namics.
Namics.11.05.2010 12
http://flic.kr/p/6SEier
„Menschen mit Behinderungen“setzt den Menschen in den Mittelpunkt.
Barrierefreiheit. Universität Mainz. Namics.
Namics.
Paradigmenwandel:Barrierefreiheit alsnachträglicher Einfall,drangedübelt
11.05.2010 13 Barrierefreiheit. Universität Mainz.
http://flic.kr/p/8H1Q
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
Namics.
http://de.wikipedia.org/wiki/Potemkinsche_Treppe
11.05.2010 15 Barrierefreiheit. Universität Mainz. Namics.
Potemkin-Treppe in Odessa
Namics.
Barrierefreiheit als integrales Element
http://flic.kr/p/55Sh6D
11.05.2010 16 Barrierefreiheit. Universität Mainz. Namics.
Namics.
http://flic.kr/p/4dqGWd
11.05.2010 17 Barrierefreiheit. Universität Mainz. Namics.
Namics.
http://flic.kr/p/6VCacm
11.05.2010 18 Barrierefreiheit. Universität Mainz. Namics.
Namics.
http://flic.kr/p/5o8k42
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.19
Namics.
http://flic.kr/p/8W93u
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.20
Namics.
http://youtu.be/ffrq6cUoE5A
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.21
Namics.11.05.2010 22 Barrierefreiheit. Universität Mainz.
Namics.
2. Demographie: Barrierefreiheit als Wirtschaftsfaktor
11.05.2010 23
http://flic.kr/p/8VHFb
Barrierefreiheit. Universität Mainz.
Namics.
10-12%
http://flic.kr/p/dMFYb
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.24
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
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
Namics.
Die Herausforderungen.
$225Mrd.
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.27
http://flic.kr/p/4MqfGZ
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
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
Namics.
Kollateralnutzen. Barrierefreiheit für Alle.
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.30
Namics.
41%
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.31
http://flic.kr/p/38rGwd
Namics.
Die Herausforderungen.
11.05.2010 32
http://destatis.de/bevoelkerungspyramide/
Barrierefreiheit. Universität Mainz. Namics.
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
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
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
Namics.
3. Barrierefreiheit von Websites
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.36
Namics.
mehr ...
mehr ...
mehr ...
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.37
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.38
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.39
Namics.
Wahrnehmbarkeit
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.40
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.41
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.42
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.43
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.44
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.45
Namics.
Schriftgröße im CSS: 11px = 68%
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.46
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.47
Namics.
Schriftgröße: 16px
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.48
Namics.
Inhalt.
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.49
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.50
Namics.
Die Herausforderungen.
1:2011.05.2010 Barrierefreiheit. Universität Mainz. Namics.51
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.52
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.53
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.54
Namics.
Captcha
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.55
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
Namics.
Kleiner Bildschirm
Keine Maus
Keine Popups
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.57
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.58
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.59
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.60
Namics.
Inhalte anreichern:Accessible Rich Internet Applications (ARIA)
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.61
Namics.
<input type="text" aria-required="true" />
11.05.2010 62
http://flic.kr/p/5EqqLe
Barrierefreiheit. Universität Mainz. Namics.
Namics.
<input type="text" aria-required="true" aria-invalid="true" />
11.05.2010 63 Barrierefreiheit. Universität Mainz. Namics.
http://flic.kr/p/5EuQYq
Namics.http://webaim.org/blog/spam_free_accessible_forms/11.05.2010 Barrierefreiheit. Universität Mainz. Namics.65
http://flic.kr/p/6F8N8Q
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.66
http://flic.kr/p/6F8Phy
Namics.
<ul role="menu navigation">
<li role="menuitem"> <a href="…">Über Fraunhofer</a> </li>
</ul>
11.05.2010 Barrierefreiheit. Universität Mainz. Namics.67
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
Namics.
ARIA + JavaScript
11.05.2010 69 Barrierefreiheit. Universität Mainz. Namics.
Namics.11.05.2010 Barrierefreiheit. Universität Mainz. Namics.70
http://flic.kr/p/6F4FUk
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
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
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
Namics.
4. Herausforderungen für die Zukunft
11.04.2023 74 Barrierefreiheit. Universität Mainz.
Namics.11.05.2010 75
HTML5 <video>
Barrierefreiheit. Universität Mainz. Namics.
Namics.11.05.2010 76
Barrierefreier Zugang zu Canvas 2D
Barrierefreiheit. Universität Mainz. Namics.
Namics.11.05.2010 77
http://youtu.be/Ol3qQ4CEUTo
Barrierefreie Interaktion in 3D-Welten
Barrierefreiheit. Universität Mainz. Namics.
Namics.11.05.2010 78
http://vimeo.com/10903243
Neue Interaktionsformen
Barrierefreiheit. Universität Mainz. Namics.
Namics.11.05.2010 79
http://youtu.be/kkNxbyp6thM
Gesichtserkennung und Gestensteuerung
Barrierefreiheit. Universität Mainz. Namics.
Namics.
Danke.
11.04.2023 80 Barrierefreiheit. Universität Mainz.
twitter: @kliehmFolien: http://goo.gl/QdCgKontakt: http://klie.hm/profile
top related