Ein Fokusindikator ist eine visuelle Markierung, die anzeigt, welches Element auf einer Webseite gerade den Fokus hat – also über die Tastatur angewählt ist. Diese Markierung ist essentiell für die Tastaturnavigation und damit ein Kernbestandteil der digitalen Barrierefreiheit. Standardmäßig zeigen Browser einen Fokusindikator als Umrandung an.
Anforderungen an einen guten Fokusindikator:
Deutlich sichtbar – ausreichender Kontrast
Klar erkennbar – mindestens 2px Stärke
Durchgängig – auf allen interaktiven Elementen
Konsistent – gleiches Erscheinungsbild
Unterscheidbar von anderen Zuständen (hover, active)
Die WCAG-Anforderungen verlangen:
Mindestkontrastverhältnis von 3:1 zur Umgebung
Mindestens 2 CSS-Eigenschaften zur Hervorhebung
Fokusindikator darf nicht verborgen werden
Größe mindestens 1px
Keine vollständige Überlappung durch andere Elemente
Typische Fehler in der Entwicklung:
Entfernen des Fokusindikators mit outline: none
Zu schwacher Kontrast
Unzureichende Größe
Inkonsistente Darstellung
Fehlende Anzeige bei bestimmten Elementen
Falsche Tab-Reihenfolge
Ein barrierefreier Fokusindikator ist keine optionale Gestaltungsentscheidung, sondern eine notwendige Voraussetzung für die Zugänglichkeit einer Website – besonders für Menschen, die auf die Tastaturnavigation angewiesen sind.
