WCAG 2.4.7: Fokus sichtbar

Bei Tastaturbedienung muss sichtbar sein, welches Element gerade den Fokus hat – der Fokusindikator ist für Tastaturnutzer, was der Mauszeiger für alle anderen ist. outline: none ohne gleichwertigen Ersatz ist der direkteste WCAG-Verstoß, den CSS zu bieten hat. (Englisch: Focus Visible.)

Was verlangt das Kriterium?

Jedes fokussierbare Element braucht in dem Moment, in dem es den Tastaturfokus erhält, eine sichtbare Kennzeichnung. Wie sie aussieht, lässt 2.4.7 offen – aber die Nachbar-Kriterien ziehen Leitplanken ein: Der Indikator selbst braucht 3:1 Kontrast gegen seine Umgebung, und er darf nicht verdeckt werden. Ein kräftiger Ring mit outline-offset erfüllt alles zugleich.

Wen betrifft es besonders?

Alle Tastatur- und Switch-Nutzer: Ohne Indikator ist Tastaturbedienung Blindflug – man drückt Enter und hofft. Ebenso sehbehinderte Nutzer, deren Bildausschnitt dem Fokus folgt: Ein unsichtbarer Fokus heißt, den Arbeitspunkt zu verlieren.

Richtig & falsch im Code

/* Falsch: der Klassiker aus alten Reset-Stylesheets */
*:focus { outline: none; }

/* Richtig: kräftiger, abgesetzter Fokus-Ring –
   nur bei Tastaturfokus, Maus-Klicks bleiben ringfrei */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Fallback für alte Browser ohne :focus-visible */
:focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

:focus-visible löst den historischen Streit: Designer störten sich am Ring beim Mausklick – der Selektor zeigt ihn (in der Regel) nur noch bei Tastaturbedienung. Es gibt damit kein ästhetisches Argument mehr gegen einen deutlichen Fokus-Stil. Mehr Praxis (inklusive scroll-margin gegen verdeckten Fokus): Tastaturbedienung & sichtbarer Fokus.

So testest du es

1. Tab-Durchlauf mit Blick auf den Ring: Ist auf jedem Element – Links, Buttons, Felder, eigene Widgets – jederzeit erkennbar, wo der Fokus steht?
2. Kontrast des Indikators gegen Hintergrund messen (3:1, siehe 1.4.11).
3. CSS-Suche nach outline: none / outline: 0 – jede Fundstelle braucht einen Ersatz in Sichtweite.

Verwandte Themen

• Tastaturbedienung & sichtbarer Fokus – der ausführliche Praxis-Artikel
• 2.4.11 Fokus nicht verdeckt – sichtbar heißt auch: nicht überlagert
• 2.4.3 Fokus-Reihenfolge