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

Namics.

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.

Kreation

Consulting

Technologie Projekt Management

Namics.

Namics vorgestellt.

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.

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

Namics.

Behinderung alsindividuelles Problem

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.

Namics.

Paradigmenwandel:Barrierefreiheit alsnachträglicher Einfall,drangedübelt

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

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

Namics.

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

Namics.

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

Namics.

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

11.05.2010 Barrierefreiheit. Universität Mainz. Namics.19

Namics.

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

Namics.

http://youtu.be/ffrq6cUoE5A

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

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

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.

Namics.

Die Herausforderungen.

$225Mrd.

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.

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

Namics.

Kollateralnutzen. Barrierefreiheit für Alle.

Namics.

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

Namics.

11.05.2010 32

http://destatis.de/bevoelkerungspyramide/

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.

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.

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.

Namics.

3. Barrierefreiheit von Websites

Namics.

mehr ...

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

Namics.

Wahrnehmbarkeit

Namics.

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

Namics.

Schriftgröße: 16px

Namics.

Inhalt.

Namics.

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

Namics.

Captcha

Namics.

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

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

Namics.

Kleiner Bildschirm

Keine Maus

Keine Popups

Namics.

Inhalte anreichern:Accessible Rich Internet Applications (ARIA)

Namics.

11.05.2010 62

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

Namics.

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

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

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

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

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

Namics.

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

Namics.

<a role="button" aria-controls="nav-direct-third" tabindex="0" title="Untermenü"> Schnellzugriff</a>

<li role="menuitem"> <a href="…">Presse / Medien</a> </li>

Namics.

ARIA + JavaScript

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>

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

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>

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

Namics.

4. Herausforderungen für die Zukunft

Namics.11.05.2010 75

HTML5 <video>

Namics.11.05.2010 76

Barrierefreier Zugang zu Canvas 2D

Namics.11.05.2010 77

http://youtu.be/Ol3qQ4CEUTo

Barrierefreie Interaktion in 3D-Welten

Namics.11.05.2010 78

http://vimeo.com/10903243

Neue Interaktionsformen

Namics.11.05.2010 79

http://youtu.be/kkNxbyp6thM

Gesichtserkennung und Gestensteuerung

Namics.

Danke.

twitter: @kliehmFolien: http://goo.gl/QdCgKontakt: http://klie.hm/profile

Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren

Technology

Barrierefreiheit von synchronem kollaborativem Lernen

Herausforderung Barrierefreiheit - die ATAG 2.0 kommt

Barrierefreiheit für Menschen mit kognitiven ... · Barrierefreiheit für Menschen mit kognitiven Einschränkungen Kriterienkatalog Ein Projekt des BKB Bundeskompetenzzentrum Barrierefreiheit

Punktstabiler Fahrbahnbelag durch Halbstarre Deckschicht ...download.contec-aps.com/uploads/tx_mpdownload...mittels geschlitzter Envirokerb-Bordsteine und Kastenrinnen erforderlich

Barrierefreiheit - Grundlage gerechter webbasierter Lernchancen

Herausforderung Barrierefreiheit - die ATAG 2.0 kommt · Herausforderung Barrierefreiheit – 1. Webedition Benutzerkonferenz. Webstandards zur Barrierefreiheit. Weil Webstandards

Barrierefreiheit zum Mitnehmen und Liebhaben

Nicolai Schwarz Barrierefreiheit

Barrierefreiheit 2010

Bordsteine, Rinnen und Zubehör · Bordsteine, Rinnen und Zubehör • Hochbord • Rundbord • frieda®-Rinne • Rinnenstein • Rinnenplatte • Muldenrinne • Tiefbord • Rasenbord

Barrierefreiheit inklusive - Abschlusskeynote A-Tag 2016

Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen

Vitosoft 300 | Online-Hilfe - connectivity.viessmann.com · VT 200 (GW1) Vitotronic 200 (Typ GW1) V200GW1 Witterungsgeführte Kesselregelung für gleitend abgesenkte Kesselwassertemperatur

Prüfprotokoll Barrierefreiheit Musterimplementierung BKU ... · Prüfprotokoll Barrierefreiheit: MOA-ID Template Erfolgskriterium: 1.4.7 Leiser oder kein Hintergrund-Audioinhalt

Assistierende Technologien und Barrierefreiheit

Stadtplan für Barrierefreiheit

Barrierefreiheit auf Webseiten von Gebietskörperschaften ...€¦ · Barrierefreiheit auf Webseiten von Gebietskörperschaften Seite 9 diesen Abschlussarbeiten (Cavallaro 2014; Zettin

Was ist Barrierefreiheit? Ein Kurztest

Berücksichtigung der Barrierefreiheit bei Auftragsvergaben

Barrierefreiheit Im Datennetz