Tab-Reihenfolge: Die logische Fokus-Abfolge

Kurz erklärt: Die Tab-Reihenfolge ist die Abfolge, in der der Tastatur-Fokus durch interaktive Elemente einer Webseite wandert. WCAG 2.4.3 (Level A) verlangt, dass diese Reihenfolge "sinnvoll" ist und dem visuellen Seitenfluss folgt.

Tab-Reihenfolge ist eine der am häufigsten missverstandenen Accessibility-Eigenschaften. Sie wird oft per tabindex manuell "korrigiert" – und dadurch eigentlich erst kaputt gemacht.

Die natürliche Tab-Reihenfolge

Ohne explizites tabindex folgt der Tastatur-Fokus der DOM-Reihenfolge (Quelltext-Reihenfolge). Das ist fast immer richtig, wenn das HTML semantisch sauber strukturiert ist. CSS-Flexbox und Grid können das visuelle Layout umstellen – die Tab-Reihenfolge folgt aber weiter dem DOM. Problematisch: Spalten visuell umgestellt, Tab springt logisch falsch.

Der tabindex-Teufel

tabindex="0": macht ein Element fokussierbar in natürlicher Reihenfolge. Gut.
tabindex="-1": macht ein Element nur per JS fokussierbar (nicht per Tab). Gut für dynamische Ziele.
tabindex="1", "2" ...: setzt eine explizite Reihenfolge VOR allen natürlichen Elementen. Schlecht – zerstört die Reihenfolge komplett.

Typische Fehler und Fixes

Fehler: <input tabindex="5"> in einem Formular – der rest springt chaotisch.
Fix: alle positiven tabindex entfernen, DOM umstrukturieren.

Fehler: Modal öffnet sich, Tab springt hinter das Modal.
Fix: Focus-Trap im Modal, inert-Attribut auf Hauptinhalt.

Fehler: Custom-Dropdown per

ohne tabindex.
Fix: role="listbox", tabindex="0", Pfeiltasten-Navigation.

Test mit Tab-Taste

Öffne deine Seite, klicke in die Adresszeile, drücke Tab. Jeder Druck muss den Fokus logisch weiterbewegen: Hauptnavigation → Hauptinhalt → Seitenleiste → Footer. Kein Springen quer über die Seite.

WCAG-Bezug

2.4.3 Focus Order (Level A): die Reihenfolge folgt einer sinnvollen Sequenz.
3.2.1 On Focus (Level A): Fokussieren allein darf nichts Unerwartetes auslösen.
2.1.1 Keyboard (Level A): alle Funktionen per Tastatur erreichbar.

Wird geprüft: bf-check prüft auf positive tabindex-Werte und markiert sie als BFSG-kritisch.

Wie steht deine Webseite in diesem Punkt da?

Kostenloser Scan gegen 15 WCAG-2.1-AA-Kriterien – inkl. Tab-Reihenfolge-Check.

Jetzt Webseite prüfen →