Barrierefrei trotz Javascript

Ajax und neue Trends für Accessibility

Mausereignisse, Bewegungen, nachgeladene Daten: Barrierefreiheit ist damit nur schwer zu erzielen. Entsprechende Standards und praktische Lösungen sind aber in Sichtweite.

  1. Ajax und neue Trends für Accessibility
  2. Teil 2: Ajax und neue Trends für Accessibility
Ajax und neue Trends für Accessibility

© Archiv

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:

Ajax und neue Trends für Accessibility

© Archiv

Frei: NVDA ist eine Open-Source-Alternative für Screenreader.
var toolbar = Y.Node.get
("#toolbar-1");
toolbar.plug(Y.Plugin.
NodeFocusManager, {
descendants: "input",
keys: { next: "down:39",
previous: "down:37" },
focusClass: "focus",
circular: true
});

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:

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​".