Das bedeutet
Beim Navigieren mit der Tastatur müssen Nutzer und Nutzerinnen den Inhalt einer Seite in einer logischen Reihenfolge durchlaufen können. Die Reihenfolge, in der per Tabulator zwischen interaktiven Elementen gewechselt wird, sollte dem visuellen Aufbau und der inhaltlichen Struktur entsprechen. Der Fokus darf nicht auf unsichtbare oder außerhalb des Bildschirms liegende Elemente springen.
Auswirkung
Wenn die Tab-Reihenfolge unlogisch ist, verlieren Nutzer und Nutzerinnen die Orientierung. Der Fokus springt scheinbar zufällig über die Seite oder bleibt in versteckten Bereichen hängen. Das erschwert die Bedienung erheblich und kann wichtige Inhalte oder Funktionen unzugänglich machen. Der Fehler verletzt WCAG 2.4.3 (A) Fokusreihenfolge.
Empfehlung
-
Ordnen Sie interaktive Elemente so an, dass sie im DOM der visuellen Reihenfolge entsprechen.
-
Verwenden Sie tabindex nur, wenn die natürliche Reihenfolge angepasst werden muss – und nur sparsam.
-
Vermeiden Sie negative tabindex-Werte (tabindex="-1") für sichtbare Inhalte, da diese mit der Tastatur nicht mehr erreichbar sind.
-
Prüfen Sie, ob modale Fenster, Menüs oder Overlays beim Öffnen den Fokus korrekt setzen und beim Schließen wieder zurückgeben.
Beispiele
Problematisch:
<header>
<a href="#main">Zum Inhalt springen</a>
</header>
<main>
<button tabindex="5">Absenden</button>
<a href="#">Mehr erfahren</a>
<input type="text" placeholder="Ihr Name">
</main>
Hier ist die Tab-Reihenfolge willkürlich, da tabindex die natürliche Reihenfolge überschreibt.
Besser:
<header>
<a href="#main">Zum Inhalt springen</a>
</header>
<main>
<input type="text" placeholder="Ihr Name">
<a href="#">Mehr erfahren</a>
<button>Absenden</button>
</main>
Eine sinnvolle Tab-Reihenfolge sollte so aussehen:
Die Reihenfolge folgt der visuellen Struktur. Nutzer und Nutzerinnen können intuitiv per Tab durch die Inhalte navigieren.
Hinweis
Die logische Fokusreihenfolge ist entscheidend für Tastatur- und Screenreader-Navigation. Besonders bei komplexen Layouts mit flexbox oder Grid sollte regelmäßig überprüft werden, ob die Reihenfolge im DOM der sichtbaren Darstellung entspricht.
Verknüpftes WCAG-Kriterium:
WCAG 2.4.3 – Fokusreihenfolge
Zur offiziellen WCAG-Dokumentation →