Die Tab-Reihenfolge ist die Abfolge, in der der Tastatur-Fokus beim Drücken von Tab durch die Elemente wandert. Standardmäßig richtet sie sich nach der Reihenfolge im HTML-Quelltext. Das WCAG-Erfolgskriterium 2.4.3 (Fokus-Reihenfolge) verlangt, dass diese Abfolge sinnvoll ist und Bedeutung sowie Bedienbarkeit erhält. Steuern kannst du sie über das Attribut tabindex.
Die drei Werte von tabindex
tabindex="0": Macht ein Element fokussierbar und reiht es an seiner natürlichen Stelle ein. Nützlich für eigene Widgets.tabindex="-1": Nimmt das Element aus der Tab-Folge, lässt es aber per Skript fokussierbar – etwa um den Fokus in einen geöffneten Dialog zu setzen.tabindex="1"oder höher: Erzwingt eine eigene Reihenfolge. Finger weg – das führt fast immer zu chaotischer Navigation.
Häufiger Fehler
Positive tabindex-Werte sind der Klassiker. Wer einzelne Elemente mit tabindex="1" nach vorn zieht, zerstört die natürliche Reihenfolge für alle übrigen Elemente. Die Folge: Der Fokus springt wild über die Seite. Lass die Reihenfolge dem Quelltext folgen und sortiere stattdessen dein HTML logisch.
Ein zweiter Fallstrick: Wenn die visuelle Anordnung per CSS (etwa Flexbox-Order) von der HTML-Reihenfolge abweicht, springt der Fokus sichtbar durcheinander, obwohl der Code stimmt. Halte HTML-Reihenfolge und sichtbare Lesefolge deckungsgleich. In WordPress-Page-Buildern entsteht das oft durch umsortierte Spalten auf dem Desktop. So testest du: Mit Tab durch die Seite gehen und prüfen, ob der Fokus der erwarteten Lesefolge folgt. Eine saubere Tab-Reihenfolge ist Voraussetzung für gute Tastaturbedienbarkeit und baut auf semantischem HTML auf.