Ein Fokusindikator ist eine visuelle Markierung, die anzeigt, welches Element gerade den Tastaturfokus hat. Ohne ihn ist die Tastaturbedienung praktisch unmöglich — man weiß nicht, wo man sich befindet. Browser zeigen ihn standardmäßig als Umrandung an.
Die Web Content Accessibility Guidelines verlangen:
Der Fokus muss sichtbar sein, wenn ein Element ihn erhält (2.4.7 Fokus sichtbar, Level AA)
Das fokussierte Element darf durch andere Inhalte nicht vollständig verdeckt werden; etwa durch eine mitlaufende Kopfzeile oder ein Cookie-Banner (2.4.11 Fokus nicht verdeckt (Minimum), Level AA)
Auf Stufe AAA darf es gar nicht verdeckt sein (2.4.12 Fokus nicht verdeckt (Erweitert))
Auf Stufe AAA gilt zusätzlich: Der Indikator muss mindestens die Fläche eines 2 CSS-Pixel starken Rahmens um das Element einnehmen und ein Kontrastverhältnis von 3:1 zwischen fokussiertem und nicht fokussiertem Zustand erreichen (2.4.13 Erscheinungsbild des Fokus)
outline: none ist der verbreitetste CSS-Verstoß gegen Barrierefreiheit und er hat einen nachvollziehbaren Grund: Früher erschien der Fokusring auch nach einem Mausklick, was viele als optischen Makel empfanden. Genau dafür gibt es heute :focus-visible. Die Pseudoklasse zeigt den Indikator nur bei Tastaturbedienung und löst den Zielkonflikt, ohne die Barrierefreiheit zu opfern.
Weitere typische Fehler:
Zu schwacher Kontrast zum Hintergrund
Zu dünner oder zu eng anliegender Ring
Uneinheitliche Darstellung zwischen Komponenten
Fehlender Indikator bei selbst gebauten Bedienelementen
Verdeckung durch fixierte Kopfzeilen, Chat-Fenster oder Consent-Banner
