Barrierefrei trotz Javascript

Ajax und neue Trends für Accessibility

8.3.2010 von Redaktion pcmagazin und Tobias Hauser

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

ca. 2:40 Min
Ratgeber
  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
Ajax und neue Trends für Accessibility
© Archiv

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
Frei: NVDA ist eine Open-Source-Alternative für Screenreader.
© Archiv
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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.