Ajax und neue Trends für Accessibility

Ajax und Javascript sind in Sachen Barrierefreiheit eigentlich eine Horrorvorstellung. Vor allem für Nutzer, die die Maus als Eingabemedium nicht nutzen können oder nichts sehen, sind bei Javascript-Effekten chancenlos. Abhilfe schafft ein Standard mit dem Namen ARIA sowie einige Javascript-Frameworks, die ARIA schon implementieren und den Einsatz deutlich vereinfachen und Browser wie den Firefox 3.5, die die Basis für Screenreader bilden, die dann ARIA verwenden.

Der ARIA-Standard

ARIA steht für Accessible Rich Internet Applications. Der Standard wird aktuell von der WAI, der Web Accessibility Initiative entwickelt, die auch für die WCAG zuständig ist. ARIA hat aktuell den Status eines Working Draft und besteht aus mehreren Dokumenten.

Ein guter Einstieg ist der Primer () und das Intro (). Übrigens, die WCAG 2.0 enthalten auch Teile zur clientseitigen Entwicklung. Sie erinnern sich vielleicht an die Kürzel SRC aus dem technischen Dokument. Diese sind allerdings keine Konkurrenz zur ARIA. Die ARIA-Befehle sind für Widgets aus dem Javascript-Bereich alternativlos.

Ein Vorreiter in Sachen ARIA ist das spezialisierte Framework AxsJAX oder Access- Enabling AJAX (). Entwickelt wurde dieses Google-Projekt von Charles Chen, der auch die Firefox-Erweiterung Fire Vox geschaffen hat, einen als Firefox-Plugin realisierten Screenreader. Von den größeren Frameworks kommt dem Dojo Toolkit eine Vorreiterrolle zu (siehe zum Beispiel ).

Begonnen hat die Entwicklung dabei nicht mit ARIA, sondern mit dem Ansatz, barrierearme Alternativen zu den einfacheren Widgets anzubieten. Yahoo schlägt mit seiner YUI in Version 3.0 ebenfalls den barrierearmen Pfad ein () und setzt in der neuen Bibliothek - aktuell im Beta-Stadium - voll auf ARIA.

Tastensteuerung

ARIA definiert einige eigene Attribute für HTML-Elemente. Für die Tastensteuerung sorgt es dafür, dass ein bekanntes Element zur Tastatursteuerung mit der Tab-Taste für jedes HTML-Element zur Verfügung steht: tabindex steuert in HTML die Tabulator-Reihenfolge von Formularelementen und Links. ARIA erweitert dies auf alle Elemente.

Browser, die ARIA können, beherrschen also den tabindex auch bei <div>, <img> et cetera. Außerdem nimmt ein negativer tabindex ein Element aus der Tabulatorfolge. Diese Erweiterung wird mit einer DTD im Anhang des ARIA-Standarddokuments unterstützt. Der große Vorteil ist, dass im Dokument per Tastatur, also Maus-unabhängig, gesteuert werden kann, welches Element den Fokus besitzt.

Unabhängig von ARIA hat beispielsweise Dojo die Tabulator-Steuerung bereits im Framework integriert. Im Fokus steht dabei ein Browser-unabhängig implementiertes onkey-Ereignis, mit dem der Entwickler einfach die Tastatursteuerung übernehmen kann und einem Element mit der Methode focus() den Fokus gibt, wenn er den tabindex auf -1 setzt.

YUI implementiert zur Steuerung des Fokus einen eigenen Focus Manager (). Damit lässt sich ein Widget-Hauptelement festlegen, das in der Tab-Reihenfolge ist. Innerhalb des Elements sind dann untergeordnete Elemente mit frei wählbaren Tasten steuerbar.

Das folgende Beispiel ist ein kleiner Ausschnitt aus einem umfangreichen Beispiel von Yahoo für eine barrierefreie Werkzeugleiste (). Hier wird zuerst auf das Element zugegriffen. Die YUI spricht hier von Knoten. Anschließend erhält der Knoten ein Plugin des NodeFocusManager. Dort werden die untergeordneten Knoten (descendants) und die Steuerungstasten mit den jeweiligen Tastencodes (keys) festgelegt. Im Beispiel sind das die Pfeiltasten nach unten und nach oben:

Rollenmodell

HTML-Elemente haben bestimmte Basisfunktionen, in Ajax-Anwendungen sind sie aber vielfältig einsetzbar. Aus einem Listeneintrag wird beispielsweise ein Menü oder aus einer Bildschaltfläche ein Schieberegler. Das ist beispielsweise für einen Screenreader nicht zu erkennen. Deswegen definiert ARIA Rollen, die für ein Element verwendet werden können. Eine einfache Rolle wäre zum Beispiel menuitem für ein Menüelement. Festgelegt wird die Rolle mit dem Attribut role: