Das bedeutet
Alle interaktiven Steuerelemente müssen mit der Tastatur erreichbar sein. Nutzer und Nutzerinnen müssen mit der Tabulator-Taste zu jedem klickbaren Element wie Schaltflächen, Links, Formularfeldern oder benutzerdefinierten Komponenten navigieren können. Zusätzlich muss eine sichtbare Fokusanzeige vorhanden sein, damit erkennbar ist, welches Element aktuell aktiv ist.
Auswirkung
Wenn Steuerelemente nicht fokussierbar sind, können Nutzer und Nutzerinnen, die keine Maus verwenden, bestimmte Funktionen nicht erreichen oder bedienen. Auch Screenreader-Nutzer verlieren so den logischen Navigationsfluss. Fehlende Fokusanzeigen führen zu Orientierungslosigkeit und Verstößen gegen WCAG 2.1.1 (A) Tastatur sowie WCAG 2.4.7 (AA) Fokus sichtbar.
Empfehlung
-
Alle interaktiven Elemente müssen über die Tastatur erreichbar sein (zum Beispiel durch tabindex="0").
-
Verwenden Sie native HTML-Elemente wie button, a, input oder select, die von Haus aus fokussierbar sind.
-
Entfernen Sie keine Fokusrahmen per CSS (outline: none;) – passen Sie diese stattdessen optisch an.
-
Bei benutzerdefinierten Komponenten muss der Fokus explizit per tabindex oder JavaScript steuerbar gemacht werden.
Beispiele
Problematisch:
<div onclick="submitForm()">Absenden</div>Dieses Element ist per Maus bedienbar, aber nicht über die Tastatur erreichbar.
Besser:
<div role="button" tabindex="0" onclick="submitForm()">Absenden</div>
Durch role="button" und tabindex="0" wird das Element für die Tastatur zugänglich.
Optimal:
<button type="submit">Absenden</button>
Die native Schaltfläche ist automatisch fokussierbar, bedienbar und zeigt standardmäßig einen sichtbaren Fokusrahmen.
Im besten Fall sollte Ihre Seite eindeutig zeigen, wo Sie sich gerade befinden, wenn Sie mit der "TAB"-Taste navigieren:
Hinweis
Eine sichtbare Fokusanzeige ist ein zentrales Merkmal barrierefreier Navigation. Entfernen Sie sie nicht, sondern gestalten Sie sie passend zum Design – sie ist für viele Menschen der einzige sichtbare Hinweis auf die aktuelle Position im Interface.
Verknüpftes WCAG-Kriterium:
WCAG 2.1.1 – Tastatur
WCAG 2.4.7 – Fokus sichtbar
Zur offiziellen WCAG-Dokumentation →