Die 5 Ebenen Barriererfreier Web Entwicklung

Die 5 Ebenen barrierefreier Web-Entwicklung WebTech 17.11.2009 Dirk Ginader http://ginader.de http://twitter.com/ginader

Das HTML ist die Basis und die wichtigste aller Ebenen

Reihenfolge im Code = Tab-Reihenfolge

Welches HTML Element ist am besten für die jeweilige Aufgabe geeignet?

Ist die Seite mit und ohne CSS verständlich?

Interaktionen nur mit Links und Formularen gefolgt von einem Neuladen der Seite

http://ginader.de http://twitter.com/ginader

CSS kann auch eine Barriere sein!

display:none und visibility:hidden verstecken vor jedem

Offscreen platzieren wenn es nur Screen Reader sehen sollen .offscreen{ position: absolut; left: -999em; }

:hover funktioniert nur mit einer Maus

:focus ist die Rettung!

immer nur in Kombination: a:hover, a:focus{ /*wahnsinns CSS*/ }

CSS bestimmt Design und nicht Interaktion

Javascript ist das Sahnehäubchen

Klappt auch wirklich alles was erreicht werden muss ohne Javascript?

ganz Sicher?

Dann darf gezaubert werden :-)

bestehende Elemente mit JS übernehmen und die Art der Funktion ändern

Buttons die nur mit JS funktionieren werden erst mit JS erzeugt

Screenreader verstehen Javascript - sie wissen nur meist nicht was gerade passiert...

focus() ist die Rettung!

Die Tab Reihenfolge ist entscheidend

focus() ist die Rettung! (... schon wieder)

tabindex=0 macht sogar DIVs zugänglich für Nutzer ohne Maus

tabindex=-1 für Elemente die nur JS erreichen darf

genau: focus()

Ajax funktioniert aber die Verzögerungen sind schwer zu verstehen

Informieren was gerade passiert!

richtig geraten: focus()

Screenreader aktualisieren ihren Virtual Buffer “regelmäßig”

im Formular Modus aktualisieren sie in Echtzeit!

Nutze den Forms Mode um den Virtual Buffer zu aktualisieren wenn benötigt

Eine weitere Ebene: extra CSS wenn Javascript verfügbar ist

Javascript kann das gesamte Layout ändern

Aber CSS ist viel viel schneller

CSS über JS informieren: document.documentElement.className += ” js”;

.modul{ /* CSS für Layout ohne JS */ } .js .module{ /* anderes CSS für das Layout mit JS */ }

Wie reagiert das CSS wenn sich die Schriftgröße ändert?

Softwarelupen zeigen nur einen kleinen Ausschnitt des Bildschirms an

Es muss sichergestellt sein dass jeder weiss was gerade passiert

yellow fade + focus() helfen allen besser zu verstehen

die oberste Ebene neu und heiss

WAI-ARIA bringt bekannte Desktop- Bedienkonzepte barrierefrei in den Browser

Fügt unsematischem Markup Semantik hinzu

stellt assestiven Technologien echtzeit updates und Benachrichtigen zur Verfügung

• alert • banner • button • menuitem • slider

Document Landmark Roles

• application • banner • complementary • contentinfo • main • navigation • search

States und Properties

• aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby

Live Regions aktualisieren sich in Echtzeit

• off • polite • assertive • (rude)

heute schon Nutzbar

• validiert leider noch nicht • macht aber nix. Da die WAI ARIA Interaktionen Javascript nutzen kann man auch die Rollen damit hinzufügen

Aber nicht darauf verlassen!

• Es gibt alte Screenreader wie es alte Browser gibt. Es muss also auch weiterhin ohne WAI ARIA funktionieren. • Progressive Enhancement...

Beispiele

without Javascript http://ﬁnance.yahoo.com/currency-converter

with Javascript http://ﬁnance.yahoo.com/currency-converter

http://uk.tv.yahoo.com/

http://de.ﬁnance.yahoo.com/nachrichten/

http://www.yaml.de/ﬁleadmin/examples/

http://www.webkrauts.de	81
http://www.slideshare.net	3
http://coderwall.com	2
http://www.merl.ws	1
http://lanyrd.com	1
http://wk7.textformer.com	1

Die 5 Ebenen Barriererfreier Web Entwicklung

by Dirk Ginader on Nov 23, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 89

Statistics

Die 5 Ebenen Barriererfreier Web Entwicklung — Presentation Transcript