Zum Inhalt springen
Percelia

Tutorial

So baust du einen sichtbaren Fokus-Indikator

Kurz gesagt

Entferne nie den Fokus-Ring ohne Ersatz. Nutze :focus-visible, um Tastaturnutzern einen deutlichen Ring zu zeigen, ohne dass er bei jedem Maus-Klick erscheint. Der Indikator muss mindestens 3:1 Kontrast zur Umgebung haben; outline-offset sorgt für sichtbaren Abstand.

In Kürze

  1. outline: none entfernen

    Suche im CSS nach outline: none bzw. outline: 0 und ersetze es durch einen echten Indikator.

  2. :focus-visible nutzen

    Style den Ring über :focus-visible, damit er bei Tastatur-Fokus erscheint, aber nicht bei Maus-Klick.

  3. Kontrast sichern

    Wähle eine Ringfarbe mit mindestens 3:1 zur Umgebung (1.4.11).

  4. Abstand geben

    Setze outline-offset, damit der Ring nicht mit dem Element-Rand verschmilzt.

Wer die Seite mit der Tastatur bedient, muss jederzeit sehen, wo der Fokus gerade steht. Genau das nimmt outline: none weg. Es ist der wohl schädlichste Einzeiler in vielen Stylesheets, oft eingebaut, weil der Standard-Ring als hässlich empfunden wird. Die Lösung ist nicht Entfernen, sondern Ersetzen.

Das Problem

Vorher: nicht barrierefreiCSS
/* Entfernt den Fokus-Ring komplett -> Tastaturnutzer sind verloren */
*:focus {
  outline: none;
}

button:focus {
  outline: 0;
}

Ohne sichtbaren Fokus tabbt ein Nutzer blind durch die Seite: Er weiss nicht, welcher Button oder Link gerade aktiv ist. Das verletzt 2.4.7 (Fokus sichtbar).

Die Lösung: :focus-visible plus Kontrast

:focus-visible zeigt den Ring nur dann, wenn der Browser eine Tastatur-Interaktion erkennt, nicht bei jedem Maus-Klick. So bekommst du das aufgeräumte Bild, das Designer wollen, ohne Tastaturnutzer im Stich zu lassen.

Nachher: barrierefreiCSS
/* Kein Ring bei Maus-Klick, klarer Ring bei Tastatur-Fokus */
:focus-visible {
  outline: 3px solid #1d4ed8;   /* >= 3:1 zur Umgebung (1.4.11) */
  outline-offset: 2px;          /* Abstand, damit der Ring nicht im Element verschwindet */
  border-radius: 2px;
}

/* Fallback fuer aeltere Browser ohne :focus-visible:
   Ring zeigen, aber wieder ausblenden, sobald :focus-visible unterstuetzt wird */
:focus {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
  • Kontrast: der Ring braucht mindestens 3:1 gegen die angrenzende Farbe (1.4.11). Blau (#1d4ed8) auf Weiss erfüllt das.
  • Dicke und Abstand: mindestens 2px Dicke plus outline-offset macht den Ring auch auf farbigen Flächen erkennbar.
  • Nicht verdecken: sticky Header oder Cookie-Banner dürfen das fokussierte Element nicht überdecken (2.4.11 Fokus nicht verdeckt, WCAG 2.2).

Testen

  1. Klicke nirgends hin, drücke nur Tab: Jeder Stopp muss einen deutlich sichtbaren Ring zeigen.
  2. Prüfe interaktive Elemente auf farbigem Hintergrund: Der Ring muss auch dort sichtbar bleiben.
  3. Scrolle mit offenem sticky Header: Das fokussierte Element darf nicht dahinter verschwinden.

Zugehörige WCAG-Kriterien

Häufige Fragen

Warum :focus-visible statt :focus?
:focus würde den Ring auch bei jedem Maus-Klick zeigen, was viele Designer stört und deshalb zum schädlichen outline: none führt. :focus-visible zeigt den Ring nur bei Tastatur-Interaktion und löst den Zielkonflikt.
Reicht ein Farbwechsel als Fokus-Anzeige?
Nur wenn der Wechsel gross genug und kontraststark genug ist. Ein reiner Farbwechsel scheitert oft an 1.4.1 (Farbe allein) oder am 3:1-Kontrast. Ein Ring per outline ist die sicherere Wahl.
Darf ich den Ring runden Ecken anpassen?
Ja, outline folgt border-radius automatisch. Mit outline-offset kannst du den Abstand zusätzlich steuern.

Kostenlosen Scan anfragen

Sagen Sie uns Ihre Domain — wir führen einen kostenlosen Erst-Scan durch und zeigen Ihnen die wichtigsten Barrieren.

Kostenlosen Scan starten
← Zurück zu den Tutorials