Barrierefrei trotz Javascript

Teil 2: Ajax und neue Trends für Accessibility

  1. Ajax und neue Trends für Accessibility
  2. Teil 2: Ajax und neue Trends für Accessibility
<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:

Ajax und neue Trends für Accessibility

© Archiv

Fundgrube: Die YUI-Beispiele für den ARIA-Einsatz sind trotz Beta-Version vorbildlich.
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:

Ajax und neue Trends für Accessibility

© Archiv

Wählbar: NVDA erlaubt die Wahl, was alles per Sprache ausgegeben wird.
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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".