WCAG 2.4.7 Fokus sichtbar

Erfolgskriterium 2.4.7 verlangt, dass jede per Tastatur bedienbare Nutzeroberfläche einen Betriebsmodus hat, in dem der Tastaturfokusindikator sichtbar ist. Es ist ein Kriterium der Stufe AA unter Richtlinie 2.4 (Navigierbar).

Warum ein sichtbarer Fokusindikator wichtig ist

Ein per Tab navigierender Tastaturnutzer hat keinen Mauszeiger, der ihm zeigt, wo er sich befindet – das einzige Signal ist der Fokusrahmen des Browsers (oder ein benutzerdefiniertes Äquivalent) um das aktuell fokussierte Element. Ohne ihn bedient ein reiner Tastaturnutzer im Wesentlichen blind: Er kann den Fokus bewegen und Aktionen auslösen, hat aber keine Möglichkeit zu sehen, welches Element er gleich aktivieren wird, bevor er Eingabe drückt.

Wie dies am häufigsten scheitert

outline: none oder outline: 0, breit in CSS angewendet, meist um den Standard-Fokusring des Browsers aus ästhetischen Gründen zu entfernen, ohne Ersatzstil bereitzustellen. Dies ist ein extrem verbreitetes Muster in Designsystemen, die visuellen Feinschliff priorisieren, ohne zu erkennen, dass der Standardrahmen echte Barrierefreiheitsarbeit leistete, nicht nur unerwünschte visuelle Unordnung hinzufügte.

/* Entfernt den Fokusindikator vollständig – ein Verstoß ohne Ersatz */
button:focus {
  outline: none;
}

/* Entfernt den Standard, ersetzt ihn aber durch eine bewusste, sichtbare Alternative */
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

Die Unterscheidung zwischen :focus und :focus-visible

Die moderne CSS-Pseudoklasse :focus-visible zielt speziell auf Fokus ab, der über die Tastatur (oder andere Nicht-Zeiger-Mittel) ankam, und lässt Maus-Klick-Fokuszustände ungestylt – dies erfüllt ein gängiges Designziel ("Ich möchte keinen Fokusrahmen bei Mausklick, nur bei Tastaturnavigation"), ohne versehentlich den Indikator zu entfernen, auf den Tastaturnutzer tatsächlich angewiesen sind. :focus-visible zu verwenden, statt :focus-Styling bedingungslos vollständig zu entfernen, ist die moderne Standardlösung für Teams, die den Standardrahmen speziell bei Mausinteraktion visuell unerwünscht fanden.

Was ein konformer Fokusindikator braucht

Er muss nicht der blaue Standardrahmen des Browsers sein – jeder benutzerdefinierte Stil funktioniert, solange er deutlich sichtbar gegenüber der umgebenden Seite ist (erfüllt das Minimum von 3:1 aus Nicht-Text-Kontrast) und das fokussierte Element klar von seinem unfokussierten Zustand unterscheidet.