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.
Die Web Content Accessibility Guidelines verlangen:
Jede Benutzeroberfläche, die mit der Tastatur bedienbar ist, muss einen Modus haben, bei dem der Tastaturfokus-Indikator sichtbar ist.
Der Fokusindikator muss visuell erkennbar sein, wenn ein Element den Fokus erhält.
Der Fokusindikator darf nicht vollständig verdeckt werden (Kriterium 2.4.11 und Kriterium 2.4.12)
Im Level AAA: Mindestens 2px dick, Kontrastverhältnis von 3:1 zum nicht-fokussierten Bereich (Kriterium 2.4.13)
Wichtig ist, dass der Fokus-Indikator deutlich sichtbar ist, auf allen interaktiven Elementen verfügbar ist, unterscheidbar von anderen Zuständen (wie hover oder active) ist und ein konsistentes Erscheinungsbild hat.
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
