Ein Fokusindikator ist die visuelle Hervorhebung des Elements, das gerade den Tastaturfokus besitzt – typischerweise ein Rahmen, Umriss oder eine deutliche Farb- bzw. Formänderung. Wer mit der Tab-Taste durch eine Seite navigiert, erkennt nur daran, wo er sich befindet. Das betrifft Menschen mit motorischen Einschränkungen, blinde Menschen mit Restsehvermögen, Nutzer von Schaltersteuerungen und alle, die schlicht lieber die Tastatur verwenden.
Rechtliche und normative Grundlage
- WCAG 2.4.7 Fokus sichtbar (AA) – Pflicht nach EN 301 549, BITV 2.0 und BFSG
- WCAG 2.4.11 Fokus nicht verdeckt (AA, neu in 2.2)
- WCAG 1.4.11 Nicht-Text-Kontrast (AA) – mindestens 3:1
- WCAG 2.4.13 Fokus-Darstellung (AAA) – Größe und Kontrastwechsel
Beispiel für einen guten Fokusstil
:focus-visible { outline: 3px solid #4b1d6b; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
Der dunkle Rahmen mit hellem Außenring bleibt auf hellen und dunklen Flächen sichtbar. Auf dieser Website verwenden wir einen ähnlichen, in den Markenfarben gestalteten Fokusstil.
Häufige Fehler
outline: noneim CSS-Reset ohne Ersatz- Fokus nur durch minimale Farbänderung, die kaum auffällt
- Fokus verschwindet hinter fixierten Headern oder Cookie-Bannern
- Eigene Komponenten, die gar nicht fokussierbar sind
Häufige Fragen zum Fokusindikator
Wie teste ich den Fokusindikator?
Maus beiseitelegen und mit Tab und Shift+Tab durch die gesamte Seite navigieren. An jeder Stelle muss klar erkennbar sein, wo der Fokus liegt.
Stört der Fokusrahmen Mausnutzer?
Mit :focus-visible erscheint er nur bei Tastaturbedienung. Ein gut gestalteter Fokus wirkt zudem hochwertig statt störend.
Praxis-Tipp: Ist der Fokus auf Ihrer Website immer sichtbar? Das prüfe ich im Screenreader- und Tastaturtest.
Verwandte Begriffe: Fokusanzeigen, Tastaturnavigation, Fokus-Reihenfolge, Skip-Links