Tab-Reihenfolge

Die Tab-Reihenfolge bestimmt, in welcher Abfolge interaktive Elemente einer Website mit der Tabulatortaste angesteuert werden. Sie ist grundlegend für die Barrierefreiheit, weil viele Menschen nicht mit der Maus navigieren können oder wollen.

Zwei Erfolgskriterien greifen ineinander: 2.1.1 Tastatur (Level A) verlangt, dass überhaupt alle Funktionen per Tastatur erreichbar sind. 2.4.3 Fokus-Reihenfolge (Level A) verlangt darüber hinaus eine Abfolge, die Bedeutung und Bedienbarkeit erhält.

Standardmäßig fokussierbar sind:

• Links mit href

• Schaltflächen

• Formularelemente: <input>, <select>, <textarea>

• <summary> innerhalb von <details>

• <iframe>

• <audio> und <video> mit controls

• Elemente mit contenteditable

Das Attribut tabindex

• tabindex="0" macht ein Element fokussierbar und fügt es an seiner natürlichen Position in die Reihenfolge ein

• tabindex="-1" macht es programmatisch fokussierbar, aber nicht per Tabulatortaste erreichbar. Nötig etwa für einen Skip-Link und für Dialoge

• tabindex="1" und höher ist ein Antipattern: Solche Elemente werden vor allen anderen angesteuert, unabhängig von ihrer Position im Dokument. Ein einziger positiver Wert bringt die Reihenfolge der gesamten Seite durcheinander

Maßgeblich ist die Reihenfolge im DOM. Wo CSS mit order, flex-direction, grid-row oder position: absolute umsortiert, laufen visuelle und tatsächliche Reihenfolge auseinander: Der Blick springt dorthin, der Fokus hierhin. Für sehende Tastaturnutzende wird die Seite dadurch unbenutzbar.

Verstecktes bleibt teilweise erreichbar

display: none und visibility: hidden nehmen Elemente aus der Tab-Reihenfolge. aria-hidden="true" und rein visuelle Verschiebungen per Transform tun das nicht. Aus geschlossenen Menüs und ausgeblendeten Dialogen tabbt man deshalb regelmäßig ins Nichts. Für ganze Bereiche löst das Attribut inert dieses Problem: Es sperrt Fokus und Zeiger gleichzeitig.