Tastaturbedienung und Fokus nach WCAG richtig umsetzen

Wie prüfen Sie eine Website mit der Tastatur?

Kurzantwort: Legen Sie die Maus zur Seite. Navigieren Sie mit Tab vorwärts und mit Umschalt+Tab rückwärts. Aktivieren Sie Links und Schalter mit Enter beziehungsweise Leertaste und schließen Sie überlagernde Elemente mit Escape. Jede Funktion muss erreichbar sein, der Fokus sichtbar bleiben und einer nachvollziehbaren Reihenfolge folgen.

Native Elemente sind der sichere Ausgangspunkt

Problematisch

<div class="button" onclick="save()">Speichern</div>

Das div ist weder automatisch fokussierbar noch besitzt es die Tastaturinteraktion und Semantik eines Schalters.

Besser

<button type="button" onclick="save()">Speichern</button>

Verwenden Sie Links für Navigation und Buttons für Aktionen. Ein tabindex="0" macht ein beliebiges Element zwar fokussierbar, baut aber seine Bedienlogik nicht nach.

Den Fokus sichtbar gestalten

Entfernen Sie die Browser-Markierung nicht ersatzlos. Ein robuster Stil kann so aussehen:

:focus-visible {
  outline: 3px solid #185fa5;
  outline-offset: 3px;
}

Der Fokus muss sich ausreichend vom fokussierten Element und seiner Umgebung unterscheiden. Prüfen Sie ihn auf hellen und dunklen Flächen sowie in Hover- und Fehlerzuständen. Fixierte Kopfzeilen oder Cookie-Banner dürfen das fokussierte Element nicht vollständig verdecken.

DOM-Reihenfolge statt positiver tabindex-Werte

Die Tab-Reihenfolge folgt grundsätzlich dem Dokument. Wenn die visuelle Reihenfolge mit CSS stark verändert wird, kann sie von der Fokus- und Lesereihenfolge abweichen. Reparieren Sie in diesem Fall die DOM-Struktur.

Vermeiden Sie tabindex="1", tabindex="2" und weitere positive Werte. Sie erzeugen eine zweite, schwer wartbare Reihenfolge. tabindex="-1" ist dagegen sinnvoll, um ein Ziel nur programmatisch zu fokussieren – etwa eine Fehlerzusammenfassung oder den Hauptinhalt nach einem Skip-Link.

Ein Skip-Link sollte beim ersten Tab-Schritt sichtbar werden und direkt zum Hauptinhalt führen:

<a class="skip-link" href="#main">Zum Inhalt springen</a>
<main id="main" tabindex="-1">…</main>

Testen Sie nicht nur, ob die Seite scrollt. Nach der Aktivierung muss auch der Tastaturfokus am Hauptinhalt ankommen.

Menüs und Dialoge

Ein aufklappbares Menü benötigt einen echten Button mit aria-expanded und aria-controls. Beim Schließen mit Escape sollte der Fokus zum auslösenden Button zurückkehren.

Bei einem modalen Dialog gelten zusätzliche Anforderungen:

Fokus beim Öffnen sinnvoll in den Dialog setzen.
Tab und Umschalt+Tab innerhalb des offenen Dialogs halten.
Escape zum Schließen anbieten, sofern die Aktion nicht zwingend fortgesetzt werden muss.
Fokus anschließend zum Auslöser zurückgeben.
Hintergrundinhalte dürfen nicht weiter bedienbar sein.

Das native <dialog>-Element übernimmt Teile dieses Verhaltens, ersetzt aber keinen realen Tastaturtest.

Ein reproduzierbarer Zehn-Minuten-Test

Laden Sie die Seite neu und drücken Sie Tab.
Prüfen Sie Skip-Link und Hauptnavigation.
Folgen Sie der sichtbaren Fokusmarkierung durch die gesamte Seite.
Bedienen Sie Menüs, Filter, Akkordeons und Dialoge.
Füllen Sie Formulare aus und lösen Sie Fehler aus.
Navigieren Sie mit Umschalt+Tab zurück.
Prüfen Sie, ob ein Element unerreichbar ist oder der Fokus verschwindet.
Wiederholen Sie den Test bei 200 % Zoom und schmalem Viewport.

Notieren Sie für jeden Fehler URL, Element, Tastenschritte, erwartetes und tatsächliches Verhalten. So wird aus „funktioniert nicht“ ein reproduzierbarer Befund für die Entwicklung.

Nutzen Sie ergänzend die WCAG-Schnellcheckliste oder lesen Sie den Überblick zu automatischen und manuellen Tests.

Quellen und weiterführende Standards

Stand: 7. August 2026.