Sichtbaren Tastaturfokus herstellen

WCAG 2.4.7, 2.4.11, 1.4.11 · leicht · etwa 30 Minuten · Stand 08.11.2026

Worum es geht

Wer die Tab-Taste drückt, springt von Link zu Link und von Button zu Button. Der Browser zeigt dabei normalerweise einen Rahmen um das aktive Element, den Fokus. Viele Themes entfernen diesen Rahmen mit outline: none, weil er beim Klicken mit der Maus stört. Dann weiß niemand mehr, wo er sich auf der Seite befindet. WCAG 2.4.7 (Stufe AA) verlangt, dass der Tastaturfokus sichtbar ist.

Wen es betrifft

Menschen, die keine Maus nutzen können, etwa wegen motorischer Einschränkungen oder Zittern, und mit Tastatur, Schaltern oder Mundsteuerung arbeiten.
Sehende Menschen, die mit Screenreader und Tastatur arbeiten, zum Beispiel bei Leseschwierigkeiten.
Menschen, die aus Gewohnheit oder Geschwindigkeit lieber die Tastatur nutzen, etwa beim Ausfüllen des Checkouts.

So behebst du es

Suche nach entferntem Fokus. Durchsuche dein CSS nach outline: none, outline: 0 und :focus { outline und prüfe, ob danach ein Ersatz definiert ist.

Schlecht:
```
*:focus {
  outline: none;
}
```
Gib einen deutlichen Fokusstil vor. Mit :focus-visible erscheint der Rahmen bei Tastaturbedienung, beim Mausklick zeigen Browser ihn in der Regel nicht.

Gut:
```
:focus-visible {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
}
```
Achte auf Kontrast. Die Fokusmarkierung ist ein Bedienelement-Zustand. Sie sollte sich mit mindestens 3:1 von den angrenzenden Farben abheben (1.4.11). Wenn dein Shop helle und dunkle Bereiche hat, hilft ein zweifarbiger Rahmen, der auf beiden Hintergründen sichtbar bleibt:
```
:focus-visible {
  outline: 3px solid #1a1a1a;
  box-shadow: 0 0 0 6px #ffffff;
}
```
Prüfe die Farben mit unserem Kontrast-Prüfer.
Nicht nur die Farbe ändern. Ein Link, der beim Fokus nur leicht die Farbe wechselt, ist schwer zu erkennen. Ein Rahmen oder eine Unterstreichung ist deutlicher.
Eigene Bedienelemente einbeziehen. Mengenauswahl, Farbwähler, Slider und Akkordeons brauchen denselben sichtbaren Fokus. Wenn du ein echtes Eingabefeld visuell versteckst und ein eigenes Element zeigst, muss die Markierung am sichtbaren Element erscheinen:
```
.farbwahl input:focus-visible + label {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
}
```
Fokus nicht verdecken lassen (2.4.11, neu in WCAG 2.2). Ein Element mit Fokus darf nicht vollständig von Inhalten verdeckt werden, die du selbst eingebaut hast: fixierte Kopfzeilen, Chat-Buttons, Newsletter-Popups oder Cookie-Banner. Dieses Kriterium gibt es erst seit WCAG 2.2, es ist in WCAG 2.1 noch nicht enthalten. Es lohnt sich trotzdem, weil sonst der sichtbare Fokus nichts nützt. Bei einer fixierten Kopfzeile hilft scroll-padding:
```
html {
  scroll-padding-top: 5rem; /* Höhe der fixierten Kopfzeile */
}
```

WCAG 2.2 enthält zusätzlich 2.4.13 Focus Appearance mit genauen Vorgaben zu Größe und Kontrast. Das ist Stufe AAA, also eine Empfehlung über AA hinaus.

So prüfst du es

Tastaturtest: Klicke in die Adressleiste und drücke dann wiederholt Tab. Bei jedem Schritt muss klar erkennbar sein, wo der Fokus ist. Gehe mit Shift + Tab zurück. Teste Startseite, Produktseite, Warenkorb und Checkout.
Auf dem Mac: Safari springt mit Tab standardmäßig nicht zu allen Links. Aktiviere in den Safari-Einstellungen unter "Erweitert" die Option, mit Tab alle Elemente einer Webseite hervorzuheben, oder nutze Option + Tab.
Verdeckung prüfen: Achte beim Durchtabben darauf, ob das fokussierte Element hinter Kopfzeile, Chat-Fenster oder Banner verschwindet.
Browser-Devtools: In Chrome und Edge kannst du im Bereich "Styles" über ":hov" den Zustand :focus-visible erzwingen und den Stil prüfen.
Automatische Tools: axe DevTools und WAVE können einen fehlenden Fokus kaum erkennen. Hier ist der manuelle Tastaturtest entscheidend. Die kostenlose Erweiterung Accessibility Insights for Web zeigt mit "Tab stops" die Reihenfolge der Tab-Stopps auf der Seite an.

Sichtbaren Tastaturfokus herstellen

Worum es geht

Wen es betrifft

So behebst du es

So prüfst du es

Mehr dazu