Fokus-Ring: Sichtbarkeit des Tastatur-Fokus

Der Standard-Browser-Fokus (meist blauer Outline) sieht nicht schön aus – Designer entfernen ihn gerne. Genau das ist einer der häufigsten BFSG-Verstöße: outline:none ohne Ersatz.

Die Grundregeln

1. Fokus-Indikator NIE entfernen ohne Ersatz. outline:none OK, aber nur mit anderem sichtbaren Styling.
2. Ausreichender Kontrast. WCAG 1.4.11 Non-text Contrast fordert 3:1 gegenüber Hintergrund.
3. Ausreichende Größe. WCAG 2.2 2.4.13 Focus Appearance: mindestens 2px dick.
4. Konsistenz. Alle fokussierbaren Elemente gleicher Stil.

Code-Beispiel: gutes Styling

:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,102,204,0.2);
}

focus vs. focus-visible

:focus – immer, auch bei Mausklick (zeigt Ring beim Klicken).
:focus-visible – nur bei Tastatur-Fokus (kein Ring beim Mausklick).
Best Practice: :focus-visible für Outline, :focus für evtl. andere Styles.

Typische Fehler

* { outline: none } – globaler CSS-Reset, alle Fokus-Ringe weg.
button { outline: none } – Button-Fokus entfernt.
Outline nur auf :hover, nicht auf :focus.
Fokus-Ring zu leicht (gleiche Farbe wie Hintergrund – unsichtbar).

WCAG-Bezug

2.4.7 Focus Visible (Level AA): Fokus muss sichtbar sein.
1.4.11 Non-text Contrast (Level AA): Fokus-Indikator hat 3:1 Kontrast.
2.4.11 Focus Not Obscured (WCAG 2.2, AA): Fokus nicht verdeckt.
2.4.13 Focus Appearance (WCAG 2.2, AAA): strengere Anforderungen an Größe und Kontrast.