Tabben statt Klicken veröffentlicht in 2001/2011

Änderung der Tab-Reihenfolge

Wenn eine Seite linearisierbar ist, dann ist die Extern, englischsprachig: Tab-Reihenfolge meist schlüssig. Manchmal ist aber das, was am Bildschirm neben- oder untereinander angeordnet ist, mit der Tastatur umständlich zu bedienen, weil die Tabulatortaste den Nutzer woanders hinbringt als er erwartet oder sich wünscht. In Layouts mit vielen Informationsblöcken können solche Schwierigkeiten vor allem an einer Kombination aus der Anordnung der Inhalte und den Erwartungen des Nutzers liegen.

Eindeutige Lösungen sind meist nicht gegeben

Die folgenden Fragen zeigen, mit welchen Aspekten man sich in der Entwicklung von tastaturbedienbaren Seiten auseinandersetzen muss:

Sollte in einer Tabelle reihenweise oder spaltenweise navigiert werden?
Welche Spalten sollten in einem dreispaltigen Layout nacheinander angesprungen werden?
Wenn viele Informationsblöcke einer Seite gleichrangige Inhalte haben, welche sollen zuerst angesprungen werden können?

Die Antworten sind immer abhängig von den Inhalten. Beispielsweise sollten in einem dreispaltigen Layout Hauptnavigation und Inhalte eher am Anfang der Tab-Reihenfolge stehen; wenn eine Spalte wichtige Funktionen zum Bedienen der Inhalte aufweist, können diese aber auch höher bewertet werden und in der Tab-Reihenfolge an vorrangiger Stelle stehen. In Tabellen wird allgemein horizontal navigiert, aber es kann Fälle geben, in denen eine vertikale Navigation besser ist. Bei verschiedenen Informationsblöcken spielt das Layout hingegen eine wesentliche Rolle:

Bildschirmfoto einer Webseite des WDR mit drei Spalten, die jeweils eine unterschiedliche Anzahl an Textblöcken enthalten. Es gibt mehrere denkbare Tab-Reihenfolgen

Wichtig ist stets, dass visuell vermittelte logische Beziehungen von Links und Steuerelementen Extern, englischsprachig: zusammenhängend per Tabulatortaste angesteuert werden. Dies wird mit linearisierbarem Code bewirkt. Nur wenn die logischen Beziehungen am Bildschirm mit der Tastatur nicht intuitiv bedient werden können, kann man sich für den Einsatz des tabindex-Attributs entscheiden.

Sorgfältiger Einsatz

In einigen wenigen Fällen ist die Extern: Beeinflussung der Tab-Reihenfolge mit tabindex-Attributen sinnvoll.

Das von vielen Webanbietern genutzte Tool phpMyAdmin ist ein Beispiel für den Einsatz von tabindex-Attributen für einzelne Eingabefelder. Bei der Bearbeitung einzelner Tabellen mit der Tabulatortaste werden im Bereich "Einfügen" die Steuerelemente nicht horizontal nacheinander angesteuert, sondern spaltenweise.

Ausschnitt einer grafischen Tabelle mit Formularfeldern in mehreren Spalten und Reihen. Datenbanktabelle in phpMyAdmin

Wenn abzusehen ist, dass ein Nutzer nur bestimmte Angaben ändern wird, kann in Vorwegnahme dieses Verhaltens die Tab-Reihenfolge optimiert werden. Bei phpMyAdmin werden u.a. Tabindizes für die Steuerelemente in der Spalte "Wert" gesetzt, wodurch ein Tastaturnutzer zuerst diese Spalte vertikal nach unten durchwandert. Eine solche Festlegung ist sinnvoll, wenn man davon ausgehen kann, dass Nutzer nur den "Wert" und nicht etwa die Funktion eines Feldes ändern werden. Für sehende Tastaturnutzer, die aufgrund der visuellen Anordnung eine andere Tab-Reihenfolge erwarten, kann dieses Verhalten allerdings verwirrend sein.

Nachteile des `tabindex`-Attributs

Einige Nachteile von tabindex sind:

Alle Links und Steuerelemente müssen ein tabindex-Attribut erhalten. Geschieht dies nicht, entsteht ein "Bruch" in der Tab-Reihenfolge und es wird nach dem Anspringen des letzten ausgezeichneten Links oder Steuerelements zum ersten Link oder Steuerelement der Seite ohne tabindex gesprungen.
In manchen Browsern sind bei vergebenen tabindex-Attributen nur noch diese Links und Steuerelemente ansteuerbar. Dies betrifft vor allem ältere Versionen von Firefox.

Für die erste Extern, englischsprachig: Einschränkung soll ein kleines Beispiel gegeben werden. Wenn ein einfaches Suchformular mit einem tabindex für das Eingabefeld, aber nicht für die Schaltfläche ausgezeichnet wurde, dann kann es mit der Tabulatortaste nicht mehr bedient werden.

<form action="#" method="get"> <p><input type="text" name="suche" title="Suchbegriffe eingeben" tabindex="123" /> <button type="submit">Suche starten</button></p> </form>

Nach Eingabe eines Suchbegriffs und Betätigen der Tabulatortaste wird der Fokus nicht unbedingt auf die Schaltfläche gesetzt, sondern entweder zu einem Element mit dem nächsthöheren tabindex-Wert oder zum ersten aktiven Element ohne tabindex-Attribut. Das kann zwar die Schaltfläche sein, aber meist ist sie es nicht.

Das tabindex-Attribut ist in der Regel nicht nur unnötig, sondern verursacht oft Folgeprobleme, die nur durch intensives Testen ermittelt werden können. Wenn die Manipulation der Tab-Reihenfolge nicht zwingend erforderlich ist, sollte also darauf verzichtet werden. Wenn jedoch tabindex eingesetzt wird, dann sollten alle Steuerelemente und Links damit versehen werden. Sonst wird mehr Schaden angerichtet als Nutzen gestiftet.