Fokusreihenfolge: Logische Tab-Reihenfolge (WCAG 2.4.3)
Also called: Tab-Reihenfolge, Tabulatorreihenfolge, Fokus-Reihenfolge
Definition
Die Fokusreihenfolge ist die Abfolge, in der interaktive Elemente beim Drücken der Tab-Taste den Tastaturfokus erhalten. WCAG 2.4.3 verlangt, dass diese Abfolge Bedeutung und Bedienbarkeit der Seite erhält.
Die Fokusreihenfolge bestimmt, in welcher Abfolge Links, Buttons und Formularfelder den Tastaturfokus bekommen, wenn jemand die Tab-Taste drückt. Folgt sie dem Aufbau der Seite, kommen Tastaturnutzer genauso logisch voran, wie andere lesen. Springt der Fokus dagegen kreuz und quer, wird schon ein kurzes Kontaktformular zum Suchspiel.
Was es bedeutet
Das Erfolgskriterium WCAG 2.4.3 Fokus-Reihenfolge gehört zur Stufe A der WCAG 2.2. Es greift, wenn sich eine Seite sequenziell durchlaufen lässt und die Reihenfolge Bedeutung oder Bedienung beeinflusst. Dann müssen fokussierbare Elemente den Fokus in einer Abfolge erhalten, die Sinn und Bedienbarkeit bewahrt.
In HTML ergibt sich die Tab-Reihenfolge aus der Reihenfolge der Elemente im Quellcode. Zwei Dinge verändern sie: positive tabindex-Werte und Skripte, die den Fokus verschieben oder Inhalte einfügen. Das W3C stellt klar, dass mehrere Reihenfolgen richtig sein können – eine Tabelle lässt sich zeilen- oder spaltenweise durchgehen – und dass die Fokusreihenfolge dem Layout nicht pixelgenau folgen muss. Verwirren darf sie aber niemanden.
Betroffen sind Menschen, die per Tastaturbedienung surfen, Screenreader-Nutzer, Personen mit Schaltersteuerung und alle, die Formulare mit Tab statt Maus ausfüllen. Stimmt die Abfolge nicht, landen Eingaben im falschen Feld, Inhalte werden übersehen, die Orientierung geht verloren.
| Situation | Ergebnis |
|---|---|
| Quellcode-Reihenfolge entspricht der sichtbaren Reihenfolge | Erfüllt |
| Seitenleiste im HTML nach dem Hauptinhalt, per CSS links platziert | Erfüllt (Beispiel des W3C) |
Positive tabindex-Werte, die zwischen Bereichen springen |
Nicht erfüllt (F44) |
| Dialog oder Menü steht in der Tab-Reihenfolge nicht neben seinem Auslöser | Nicht erfüllt (F85) |
| Modaler Dialog hält den Fokus und gibt ihn beim Schließen zurück | Erfüllt |
Praxisbeispiele
Ein Newsletter-Formular, in dem positive tabindex-Werte den Cursor vom Vornamen direkt zur Checkbox am Ende schicken:
<!-- Falsch: positiver tabindex zerstört die natürliche Reihenfolge -->
<input id="vorname" tabindex="1">
<input type="checkbox" id="newsletter" tabindex="2">
<input id="nachname" tabindex="3">
<!-- Richtig: Quellcode = Lesereihenfolge, kein tabindex nötig -->
<input id="vorname">
<input id="nachname">
<input type="checkbox" id="newsletter">Ein Menü oder Dialog gehört im DOM direkt hinter den Button, der es öffnet (Technik SCR26) – so landet der nächste Tab-Schritt darin. Ein modaler Dialog mit dem HTML-Element dialog (H102) hält den Fokus, solange er offen ist.
HTML-Reihenfolge und Lesereihenfolge gleich halten. Aufklappende Inhalte direkt nach ihrem Auslöser einfügen. Beim Schließen eines Dialogs den Fokus zum Auslöser zurückgeben. Einen Skip-Link anbieten, damit Tastaturnutzer die Navigation überspringen können.
Mit tabindex="1" oder höher ein Layout „reparieren“. Inhalte nur per CSS umsortieren (order, flex-direction: row-reverse, absolute Positionierung), sodass sichtbare und Tab-Reihenfolge auseinanderlaufen. Dialoge ans Ende von body hängen, ohne den Fokus zu setzen.
So prüfen Sie die Fokusreihenfolge
Häufige Fragen
Was ist der Unterschied zwischen Fokusreihenfolge und Tab-Reihenfolge?
Im Alltag meinen beide dasselbe: die Abfolge, in der Elemente mit der Tab-Taste den Fokus erhalten. „Fokus-Reihenfolge“ ist der Begriff der WCAG, „Tab-Reihenfolge“ beschreibt, wie Tastaturnutzer sie erleben.
Sollte ich die Reihenfolge mit tabindex festlegen?
Nur mit tabindex="0" und tabindex="-1". Positive Werte erzeugen eine eigene Reihenfolge, die vor allem anderen kommt und schwer zu pflegen ist – geht dabei Sinn oder Bedienbarkeit verloren, wertet das W3C das als Fehler F44.
Muss die Fokusreihenfolge genau dem Layout folgen?
Nein. Laut W3C muss sie nicht exakt dem Layout entsprechen, aber nachvollziehbar sein. Eine Seitenleiste, die im HTML nach dem Hauptinhalt steht, ist in Ordnung; ein Formular, das zwischen nicht zusammengehörigen Feldern springt, nicht.
Welche Gesetze verlangen eine logische Fokusreihenfolge?
2.4.3 ist ein Kriterium der Stufe A und damit Teil jeder Norm, die auf WCAG AA aufbaut – etwa der EN 301 549 (Abschnitt 9.2.4.3), auf die sich das Barrierefreiheitsstärkungsgesetz stützt.
Wie finde ich Fokusprobleme auf meiner Website?
Am zuverlässigsten ist es, die Seite selbst mit Tab zu durchlaufen, denn ob eine Reihenfolge sinnvoll ist, kann kein Tool beurteilen. Für alles, was sich automatisch erkennen lässt, prüft der kostenlose WCAG-Scanner Ihre Startseite nach WCAG 2.2 AA.
Related terms
Tastaturbedienung: WCAG 2.1.1 einfach erklärt
Tastaturbedienung bedeutet, dass sich jede Funktion einer Website allein mit der Tastatur erreichen und bedienen lässt – meist mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten. WCAG 2.1.1 verlangt das auf Stufe A.
Read definition: Tastaturbedienung: WCAG 2.1.1 einfach erklärtSichtbarer Fokus: WCAG 2.4.7 richtig umsetzen
Sichtbarer Fokus bedeutet, dass eine Website das Element, das gerade den Tastaturfokus hat, deutlich markiert – meist mit einem Rahmen. WCAG 2.4.7 verlangt das auf Stufe AA.
Read definition: Sichtbarer Fokus: WCAG 2.4.7 richtig umsetzenTastaturfalle: WCAG 2.1.2 erklärt und behoben
Eine Tastaturfalle ist ein Bereich einer Seite, in den der Tastaturfokus hineinkommt, aus dem er aber nicht allein per Tastatur wieder herauskommt. WCAG 2.1.2 Keine Tastaturfalle verbietet das auf Stufe A.
Read definition: Tastaturfalle: WCAG 2.1.2 erklärt und behobenSkip-Link: Direkt zum Hauptinhalt springen
Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.
Read definition: Skip-Link: Direkt zum Hauptinhalt springen