Teil 2: Ajax und neue Trends für Accessibility
- Ajax und neue Trends für Accessibility
- Teil 2: Ajax und neue Trends für Accessibility
<li role="menuitem">Produkte</li>...
<li role="menuitem">Produkte</li>Für komplexere Anwendungen wie den angesprochenen Schieberegler gibt es zusätzlich zum role-Attribut weitere spezifische ARIA-Attribute, die alle mit aria- beginnen. So wird ein Minimal- und Maximalwert für den Schieberegler festgelegt. Außerdem erfährt der Nutzer den aktuellen Wert und kann diesen selbst ändern.
<input type="image"
src="slider.gif"
alt="Lautstärke"
role="slider"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-valuetext="50
Prozent"
aria-labelledby=
"lvolume">Im wahrsten Sinne des Wortes eine Sonderrolle spielen Rollen, die bestimmte Bereiche einer Webseite bezeichnen. Dazu zählen banner, navigation und main. Sie sind sogenannte Landmarks, Markierungen, die die schnellere Navigation in der Seite erlauben. Welche Rollen es gibt, ist im Standard in Abschnitt 4.3 geregelt. Aktuell reicht die Spanne von einer Warnmeldung (alert) bis hin zum hierarchischen Baum (tree).In den Frameworks werden die Rollen entweder im Widget-Template (zum Beispiel bei Dojo) oder im Skript (bei Dojo und YUI) gesetzt. Beides ist für einen entsprechend kompatiblen Screenreader wie NVDA sichtbar, der allerdings noch Schwierigkeiten mit Landmarks hat. In der YUI sieht das etwa so aus:
toolbar.set("role","toolbar");Status
Ein weiteres Problem ist die Aktualisierung von Teilbereichen innerhalb einer Ajax-Anwendung. Die Änderung des Status eines Bereiches spiegelt sich meist bestenfalls in einer sichtbaren Änderung wieder. Wie aber erfährt ein Screenreader davon? Die Lösung ist ein in ARIA festgelegter Status.aria-live ist eine Eigenschaft, die zum Beispiel für ein <div>-Element, das einen solchen Bereich angibt, definiert werden kann. Es erhält verschiedene Werte, die die Dringlichkeit beziehungsweise die Art der Unterbrechung für den Nutzer und für den Browser beziehungsweise Screenreader angibt.Die Spanne reicht von off - keine Benachrichtigung bei Statusänderungen - über polite - beispielsweise Abwarten einer Sprechpause - bis zu assertive - auf jeden Fall benachrichtigen und alles unterbrechen.Neben aria-live gibt es hier noch weitere Statusangaben. aria-busy besagt beispielsweise, ob die Live-Region, die mit aria-live definiert wurde, gerade aktualisiert wird und damit beschäftigt ist. Und auch für Drag-and-Drop gibt es Status-Eigenschaften: aria-grabbed und aria-dropeffect.Einen vollständigen Überblick gibt Abschnitt 5 des Standarddokuments. Der Einsatz in Frameworks erfolgt wie bei den Regionen entweder im Template oder per Skript. Auch hier bieten die YUI-Beispiele einen interessanten Einblick:
oTabViewEl = oTabView.get("element");
oLog = oTabViewEl.ownerDocument.
createElement("div");
oLog.setAttribute("role", "log");
oLog.setAttribute("aria-live",
"polite");
oTabViewEl.appendChild(oLog);In diesen Zeilen wird ein Element der Register- Navigation mit einem <div>-Element versehen, das den Aktualisierungsstatus anzeigt. Die Aktualisierung selbst erfolgt im Hintergrund per Ajax-Aufruf.
Fazit
Barrierefreie Ajax-Widgets sind - bis zu einem gewissen Grad - möglich und dank einiger guter Bibliotheken auch nicht extrem aufwendig. Die hier genannten Bibliotheken sind Vorreiter beziehungsweise besonders bekannt. Aber viele andere bieten auch ARIA-Unterstützung oder werden bald nachziehen.
NVDA - einfach testen
Optimierung für Barrierefreiheit ist nur sinnvoll, wenn man die Wirkung auch testen kann. Dafür bieten sich Screenreader an. Allerdings sind einige, wie zum Beispiel das bekannte JAWS, ziemlich teuer. Eine kostenfreie Alternative - allerdings nur für Windows - ist Non Visual Desktop Access (NVDA).
Dieses Open-Source-Projekt () bietet einen Screenreader, der sich vor allem in Firefox sehr eng integriert. Ein Vergleich von Marco Zehe () bescheinigt ihm auch hervorragende Werte bei der Unterstützung von ARIA.
