Definition: Die Fokusreihenfolge ist die Reihenfolge, in der Links, Buttons und Formularfelder den Tastaturfokus erhalten, wenn man mit Tab durch eine Seite geht. Sie muss Bedeutung und Bedienbarkeit erhalten – so verlangt es WCAG 2.4.3 Fokus-Reihenfolge auf Stufe A [1].
Englisch: Focus order · Auch: Tab-Reihenfolge · Zuletzt geprüft: 27. September 2026
Wie die Reihenfolge entsteht
Der Browser folgt standardmäßig der Reihenfolge im Quellcode, dem DOM. Das tabindex-Attribut ändert das [3]:
tabindex="0"nimmt ein Element in die Reihenfolge auf, an seiner Stelle im DOM.tabindex="-1"macht es per Skript fokussierbar, aber nicht per Tab.- Ein positiver Wert wie
tabindex="3"zieht das Element nach vorn, vor alle anderen. Das bringt die Reihenfolge fast immer durcheinander.
CSS ändert nur die Anzeige, nicht den Fokus. Wer mit order, Grid-Platzierung oder absoluter Positionierung Elemente optisch umsortiert, bekommt eine Tab-Reihenfolge, die anders springt, als das Auge liest. Dieselbe Frage stellt WCAG 1.3.2 Bedeutungsvolle Reihenfolge für die Lesereihenfolge.
Wer darauf angewiesen ist
Menschen, die mit der Tastatur, einem Schalter oder einem Screenreader arbeiten, erleben eine Seite nacheinander, Element für Element. Springt der Fokus von der Kopfzeile in den Fußbereich und zurück, verlieren sie den Zusammenhang. Wer eine Bildschirmlupe nutzt, verliert zusätzlich die Stelle auf dem Bildschirm.
Beispiele
- Formular: Der Button „Weiter“ steht im Code vor den Feldern. Der erste Tab-Druck landet auf „Weiter“.
- Zwei Spalten, per CSS vertauscht: Optisch links steht der Filter, im Code rechts. Tab erreicht ihn erst nach allen Produkten.
- Dialog: Nach dem Öffnen bleibt der Fokus hinter dem Dialog auf der Seite. Nach dem Schließen landet er am Seitenanfang statt auf dem Button, der den Dialog geöffnet hat [2].
- Zugeklapptes Menü: Seine Links sind nur verschoben, nicht versteckt. Der Fokus verschwindet in unsichtbare Elemente.
Im Code
<!-- Positiver tabindex: springt vor alles -->
<label>Ort <input tabindex="1"></label>
<label>PLZ <input tabindex="2"></label>
<button tabindex="3">Weiter</button><!-- Besser: DOM-Reihenfolge = Lesereihenfolge -->
<label>PLZ <input></label>
<label>Ort <input></label>
<button>Weiter</button>So prüfen Sie es
Legen Sie die Maus weg und gehen Sie mit Tab durch die Seite. Folgt der Fokus der Reihenfolge, in der Sie die Seite lesen würden? Landet er nach dem Öffnen eines Dialogs darin und nach dem Schließen wieder beim Auslöser? Verschwindet er irgendwo?
Wie Reviseberg damit umgeht
Der Tastatur-Agent geht Ihre wichtigste Nutzerreise mit Tab durch und schreibt jeden Schritt mit Rolle und Namen des fokussierten Elements mit. Dieses Protokoll ist die Fokusreihenfolge, wie sie wirklich passiert. Ob sie Sinn ergibt, entscheidet keine Automatik – das beurteilt ein Mensch anhand des Protokolls. Landet der Fokus auf etwas Unsichtbarem, meldet der Agent keyboard:focus-invisible. Die axe-core-Regel tabindex findet positive tabindex-Werte; Reviseberg ordnet sie WCAG 2.4.3 zu. Das Kriterium gilt deshalb als teilweise automatisch prüfbar.
Verwandte Begriffe
Fokusindikator · Tastaturbedienbarkeit · Tastaturfalle · Skip-Link · Semantisches HTML