Der Fokus-Indikator ist die sichtbare Hervorhebung des Elements, das gerade den Tastatur-Fokus hat. Wer mit der Tab-Taste durch eine Seite navigiert, sieht daran, wo er steht und was Enter jetzt auslösen würde. Browser stellen diesen Indikator von Haus aus dar, oft als blauer oder schwarzer Ring. Er ist Pflicht: Das WCAG-Erfolgskriterium 2.4.7 (Fokus sichtbar) verlangt, dass der Tastatur-Fokus erkennbar ist.
Häufiger Fehler
Der mit Abstand größte Fehler: den Fokus-Indikator per CSS entfernen. Designer empfinden den Standard-Ring oft als störend und schreiben:
:focus { outline: none; }– ohne Ersatz. Damit wird die Seite für Tastatur-Nutzer praktisch unbedienbar.
Wenn dir der Standard nicht gefällt, ersetze ihn durch einen eigenen, gut sichtbaren Stil – entferne ihn nicht ersatzlos.
Wie du es gut umsetzt
- Nutze
:focus-visible, damit der Ring bei Tastatur erscheint, aber nicht bei jedem Mausklick stört. - Sorge für deutlichen Kontrast zwischen Indikator und Hintergrund, siehe Farbkontrast.
- Mach den Ring kräftig genug: dicke Linie oder klarer Versatz, nicht nur eine zarte Farbänderung.
In WordPress überschreiben manche Themes und Page-Builder den Fokus-Stil global. Prüfe nach jeder Theme-Aktualisierung mit der Tab-Taste, ob der Fokus überall sichtbar bleibt. Der Fokus-Indikator ist die Grundlage jeder Tastaturbedienbarkeit und hängt eng mit einer logischen Tab-Reihenfolge zusammen. WCAG 2.2 ergänzt mit SC 2.4.11 zudem Anforderungen an die Mindestgröße des Fokus-Bereichs.