BITV Reloaded – Anforderung 9
Bedingung 9.4: Per Tabulator schlüssig navigierbar (Prio. 2)
Es ist eine mit der Tabulatortaste navigierbare, nachvollziehbare und schlüssige Reihenfolge von Hyperlinks, Formularkontrollelementen und Objekten festzulegen.«
Was heißt das?
Eine wichtige Bedingung, der immer noch zu wenig Bedeutung zugemessen wird. Bereits im Vortest des BIENE-Prüfverfahrens scheitern eine große Anzahl an Einreichungen, weil sich die Angebote nicht mit der Tastatur bedienen lassen, sondern zur Nutzung zwingend eine Maus voraussetzen. Dabei ist gerade die Bedienung per Tastatur oder vergleichbaren Hilfsmitteln für viele Menschen mit unterschiedlichsten Behinderungen von enormer Bedeutung. Menschen mit motorischen Behinderungen, blinde und stark sehbehinderte Nutzer sind gleichermassen auf die Erfüllung dieser Bedingung angewiesen und werden ohne eine sinnvolle Abfolge der Inhalte an einer Nutzung gehindert.
Eine »navigierbare, nachvollziehbare und schlüssige Reihenfolge«
ergibt sich beinahe von selbst, wenn der Quelltext einer Seite oder Anwendung entsprechend strukturiert ist. Generell arbeiten assistive Werkzeuge die Inhalte in der Reihenfolge ab, in der sie im Quelltext stehen.
Wenn diese Reihenfolge z. B. in einem komplexen Formular nicht mehr sinnvoll für die Bewältigung der Aufgabe erscheint (und nur dann), sollten Sie die Reihenfolge durch das tabindex
-Attribut korrigieren. Hiermit wird die Reihenfolge festgelegt, in der sich ein Nutzer mit der Tabulatortaste durch eine Seite bewegt. Die Werte dieses Attributs müssen nicht fortlaufend durchnummeriert sein. Sie können in einem Dokument zum Beispiel mit 1
, 2
, 3
…anfangen und dann mit 10
, 11
, 12
, … weitermachen. So bleibt Ihnen Raum für eventuelle Erweiterungen, bei denen Sie nicht immer wieder alles neu nummerieren müssen.
Das heißt nicht, dass Sie alle erdenklichen Elemente einer Seite mit einem solchen tabindex
ausstatten sollten; wesentlich sinnvoller ist eine brauchbare Strukturierung. Erlaubt sind übrigens Werte zwischen 0 und 32767, die Sie aber hoffentlich nie benötigen werden. Auch negative Werte (tabindex="-1"
) sind möglich. Hierdurch wird ein Element per Skript oder Mausklick fokussierbar, dieses Element ist dann aber nicht Bestandteil der Tabreihenfolge.
Ein übermäßiger oder unbedachter Einsatz von tabindex
kann neue Barrieren aufbauen. Mehr dazu in unserem Artikel: »Widersprüche in der Barrierefreiheit: Tastaturbedienung und Tabindex«.
Im HTML-Standard ist das tabindex
-Attribut für die Elemente A
, AREA
, BUTTON
, INPUT
, OBJECT
, SELECT
und TEXTAREA
vorgesehen. In Internet Explorer und Firefox ist es darüberhinaus möglich, sämtlichen Elementen einer Seite ein tabindex
-Attribut zuzuweisen. Mit einer entsprechenden Erweiterung des HTML-Standards ist zu rechnen, weitere Informationen zu diesem Thema finden Sie in der »Dynamic Accessible Web Content Roadmap« des W3C bzw. unter »Accessible DHTML« im Mozilla Developer Center.
In rein inhaltsorientierten Webauftritten ist diese Erweiterung nicht nötig – hier sollten Sie von vorne herein für einen logischen Aufbau der Dokumente sorgen, sodaß der Einsatz von tabindex unnötig ist. In Web-basierten Anwendungen lässt sich dieser logische Ablauf im Quelltext jedoch nicht so ohne weiteres herstellen, zumal die Reihenfolge der Inhalte oft aufgrund von Interaktionen des Nutzers verändert wird. Dazu kann es nötig sein, mehr Elemente als Links und Formularelemente fokussierbar zu machen, sodaß man hier auf den Einsatz des Attributs an Stellen angewiesen ist, die eine Validierung des HTML unmöglich machen.
Attribut / Wert | Tab-Reihenfolge | Mit der Maus oder per element.focus() fokussierbar |
---|---|---|
Kein tabindex definiert | Normales Verhalten des Elements | Nur Formularelemente und Links sind fokussierbar |
tabindex="0" | In der Tab-Reihenfolge entsprechend seiner Position im Dokument | Ja |
tabindex="n" (Wert n = ganze Zahl zwischen 1 und 32768) | Der Wert bestimmt die Position in der Tabreihenfolge | Ja |
negativer Wert tabindex="-1" | Nicht in der Tab-Reihenfolge, aber per JavaScript mit der element.focus() -Methode auf Basis eines Tastendrucks (z.B. Pfeiltasten) fokussierbar. | Ja |
Wie können Sie das testen?
Endlich mal ein Test, bei dem Sie nicht mehr, sondern weniger Testwerkzeuge brauchen: ziehen Sie den Stecker Ihrer Maus ab und benutzen Sie nur die Tabulator- und Eingabetasten zur Navigation Ihrer Website. Wenn Sie alle Inhalte in einer Reihenfolge erreichen, die sinnvoll und nachvollziehbar erscheint, haben Sie diesen Test bestanden.
Wie viele andere Bedingungen gilt diese nicht nur für reine HTML-Dokumente, sondern sie ist auch auf Formate wie PDF und insbesondere Flash anwendbar. Wenn Sie Flash verwenden sollten Sie hier ebenfalls per Tastatur testen, ob alle relevanten Objekte wie Schaltflächen, Movieclips oder Textfelder in einer sinnbildenden Reihenfolge erreichbar sind.
Was meint die BIENE?
Im BIENE-Prüfverfahren fallen mit schöner Regelmässigkeit eine hohe Anzahl von Einreichungen bereits im Vortest durch, die auf bestimmten Redaktionssystemen basieren. So hinterlegt ein bekanntes Open Source Content Management System Navigationslinks mit dem JavaScript-Schnipsel a href="index.php?id=1" onfocus="blurLink(this);">Link</a>
, um eine vermeintlich hässliche Hervorhebung von Links zu verhindern. Damit sind die Seiten praktisch nicht mit der Tastatur bedienbar, da beim Antabben des Links der Fokus sofort wieder per Skript entfernt wird.