WCAG 2.4.7: Fokus sichtbar

WCAG 2.4.7 verlangt, dass bei Tastaturbedienung jederzeit sichtbar ist, welches Element gerade den Fokus hat. Ohne Fokusindikator tappt jeder Tastaturnutzer im Dunkeln. outline: none ohne Ersatz ist einer der häufigsten WCAG-Verstöße überhaupt.

(Englisch: Focus Visible.)

Das Wichtigste in Kürze

• 2.4.7 verlangt nur, dass ein Indikator sichtbar ist – wie er aussieht, lässt das Kriterium offen. Die Leitplanken ziehen die Nachbarkriterien.
• Drei Kriterien greifen zusammen: 2.4.7 (sichtbar), 1.4.11 (mindestens 3:1 Kontrast) und 2.4.11 (nicht verdeckt, neu in WCAG 2.2).
• :focus-visible beendet den alten Designstreit: Der Ring erscheint bei Tastaturbedienung, bleibt beim Mausklick aber weg.
• Ein Ring plus outline-offset erfüllt alle drei Anforderungen auf einmal – der Versatz hebt ihn von der Elementfarbe ab.
• Der häufigste Verstoß ist eine einzige Zeile: *:focus { outline: none } aus alten Reset-Stylesheets.
• Im BITV-Test heißt der Prüfschritt „2.4.7 Aktuelle Position des Fokus deutlich“ – geprüft wird auf jedem fokussierbaren Element, nicht stichprobenartig.
• Stufe AAA legt mit 2.4.13 Fokus-Erscheinungsbild nach und schreibt Mindestfläche und Mindestkontrast des Indikators konkret fest.

Abgrenzung – hier steht die Norm. Diese Seite behandelt das Erfolgskriterium. Den vollständigen Tastaturdurchlauf für die eigene Seite beschreibt Tastatur & Fokus.

Darf ich outline: none setzen?

Nur mit gleichwertigem Ersatz. Bei Tastaturbedienung muss jederzeit sichtbar sein, welches Element den Fokus hat.

Der Normtext ist bewusst offen: Jede über Tastatur bedienbare Benutzerschnittstelle hat einen Bedienmodus, in dem der Tastaturfokusindikator sichtbar ist. Kein Wort zu Farbe, Dicke oder Form. In der Prüfpraxis haben sich daraus drei Anforderungen herauskristallisiert:

• Der Indikator existiert auf jedem fokussierbaren Element – auch auf eigenen Widgets, auf Karten, auf Skip-Links, auf Elementen mit tabindex="-1", die programmatisch Fokus bekommen.
• Er ist erkennbar, also nicht nur eine minimale Aufhellung. Über den Umweg von 1.4.11 gilt hier faktisch die 3:1-Grenze gegen die angrenzenden Farben.
• Er bleibt sichtbar, solange das Element den Fokus hat – kein Ausblenden nach zwei Sekunden, keine Animation, die ihn verschluckt.

Ein Detail, das häufig zu Missverständnissen führt: 2.4.7 verlangt keinen eigenen Fokus-Stil. Der Standard-Indikator des Browsers erfüllt das Kriterium. Verstöße entstehen erst dadurch, dass man ihn entfernt – oder dadurch, dass man Elemente so gestaltet, dass der Standardring darauf verschwindet (weißer Ring auf weißem Grund, Ring vom overflow: hidden des Elternelements abgeschnitten).

Der Wortlaut samt Beispielen steht im Understanding-Dokument des W3C zu 2.4.7.

Wen betrifft es besonders?

Für alle, die eine Seite mit der Tastatur oder mit Switch-Systemen bedienen, ist der Indikator die einzige Rückmeldung darüber, wo sie gerade sind. Ohne ihn wird jede Enter-Taste zum Glücksspiel: Man weiß nicht, ob man den Absenden-Button trifft oder den Link zum Datenschutz.

Besonders hart trifft es Menschen, die den Bildschirm vergrößern. Deren Ausschnitt folgt dem Fokus – ist der Fokus unsichtbar, springt der Ausschnitt an eine Stelle, deren Bezug zum vorherigen Bild sich nicht erschließt. Man verliert nicht nur das Element, sondern die Orientierung auf der ganzen Seite.

Und es trifft eine Gruppe, die selten genannt wird: Menschen mit eingeschränkter Aufmerksamkeit oder Kurzzeitgedächtnis. Für sie ist es keine Kleinigkeit, sich zu merken, wie oft man Tab gedrückt hat – der sichtbare Fokus nimmt genau diese Gedächtnisleistung ab.

Richtig & falsch im Code

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

/* Falsch: Ersatz, der keiner ist – 1,4:1 gegen die Umgebung */
button:focus { outline: 1px solid #cfd8ea; }

/* Falsch: Ring wird vom Elternelement abgeschnitten */
.card { overflow: hidden; }
.card a:focus-visible { outline: 3px solid #1a4fd6; outline-offset: 4px; }

/* Richtig: ein globaler Fokus-Stil, der überall trägt */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;   /* folgt runden Ecken sauber */
}

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

Auf dunklen Flächen braucht der Ring eine zweite Farbe – sonst hält er die 3:1 nicht. Der robusteste Trick ist ein zweifarbiger Ring, der auf jedem Untergrund funktioniert:

/* Richtig: doppelter Ring – innen hell, außen dunkel */
:focus-visible {
  outline: 2px solid #ffffff;
  box-shadow: 0 0 0 5px #1a4fd6;
  outline-offset: 0;
}

Ein Punkt, der in Prüfungen oft auffällt: Fokus nach dem Schließen eines Dialogs. Wird der Dialog aus dem DOM entfernt, landet der Fokus auf <body> – und dort ist er unsichtbar. Das Muster dafür steht unter Dialoge & Modals: Fokus zurück auf das auslösende Element.

Und gegen einen Fokus, der unter einem klebrigen Kopfbereich verschwindet, hilft eine Zeile:

/* Richtig: der Fokus scrollt nicht mehr unter die Sticky-Leiste */
:target, :focus-visible { scroll-margin-top: 6rem; }

Mehr Praxis dazu unter Tastaturbedienung & sichtbarer Fokus.

So testest du es

1. Tab-Durchlauf mit Blick auf den Ring: Ist auf jedem Element – Links, Buttons, Feldern, Karten, eigenen Widgets – jederzeit erkennbar, wo der Fokus steht?
2. Kontrast des Indikators messen: Ringfarbe gegen die direkt angrenzende Farbe. 3:1 ist die Schwelle, siehe 1.4.11. Der Kontrast-Check hilft beim Nachmessen.
3. CSS nach outline: none und outline: 0 durchsuchen. Jede Fundstelle braucht einen sichtbaren Ersatz in derselben Regel oder direkt daneben.
4. Über Sonderfälle gehen: Skip-Link am Seitenanfang, Elemente in Bereichen mit overflow: hidden, Karten mit voller Klickfläche, Elemente in Slidern und Karussells.
5. Nach dem Schließen von Dialogen prüfen: Wo landet der Fokus? Ist er dort sichtbar?
6. Beide Farbschemata durchgehen – ein Ring, der auf Weiß funktioniert, kann im Dark Mode verschwinden.

Häufiger Fehler in der Praxis

Der Auslöser ist fast nie böser Wille, sondern ein alter Reflex: Designer mochten den Ring beim Mausklick nicht. Also flog er raus – meist mit einem globalen Selektor, meist vor Jahren, meist in einer Datei, die heute niemand mehr anfasst. Seit :focus-visible (in allen aktuellen Browsern verfügbar) gibt es für diesen Reflex kein Argument mehr: Der Ring erscheint bei Tab, nicht beim Klick. Das ist der Punkt, den ich in Projekten am häufigsten erklären muss – und meistens hat sich die Sache damit auch schon erledigt.

Der zweite Fall ist subtiler: Der Ring ist da, aber niemand sieht ihn. Ein weißer Standardring auf einem hellen Button, ein blauer Ring auf blauem Grund, ein Ring, der vom overflow: hidden der Karte abgeschnitten wird. Formal gibt’s einen Indikator, praktisch nicht. Genau deshalb reicht die Suche nach outline: none als Prüfung nicht aus – man muss wirklich einmal durchtabben.

Der dritte betrifft eigene Fokus-Stile pro Komponente. Jede Komponente bringt ihren eigenen Ring mit, in leicht anderer Farbe und Dicke, und drei davon sind vergessen worden. Ein einziger globaler :focus-visible-Stil, den einzelne Komponenten nur bei Bedarf überschreiben, ist deutlich pflegeleichter – und man merkt sofort, wenn irgendwo nichts kommt.

Häufige Fragen

Reicht der Standard-Fokusring des Browsers?

Ja. 2.4.7 verlangt keinen eigenen Stil, und der Browser-Standard erfüllt das Kriterium auf normalen Hintergründen. Kritisch wird es erst, wenn eigene Farben ins Spiel kommen: Auf einem dunkelblauen Button kann der Standardring den 3:1-Kontrast verfehlen. Ein eigener, kräftiger Ring ist deshalb meist die sicherere Wahl – aber Pflicht ist er nicht.

Was ist der Unterschied zwischen :focus und :focus-visible?

:focus greift immer, wenn ein Element den Fokus hat – auch beim Mausklick. :focus-visible überlässt dem Browser die Entscheidung, ob ein Indikator angebracht ist; in der Praxis heißt das: bei Tastatur ja, bei Maus meist nein. Für Textfelder zeigen Browser den Ring auch bei Mausklick, weil die Einfügemarke allein zu wenig Rückmeldung gibt.

Muss der Fokusindikator ein Rahmen sein?

Nein. Erlaubt ist alles, was die Fokusposition erkennbar macht – ein Hintergrundwechsel, eine Unterstreichung, ein farbiger Balken an der Seite. Es muss nur ausreichend kontrastreich und eindeutig einem Element zuzuordnen sein. Ein Ring ist bloß die Variante, die überall funktioniert und am wenigsten mit dem Layout kollidiert.

Gilt 2.4.7 auch für Elemente mit tabindex="-1"?

Solche Elemente sind nicht per Tab erreichbar, bekommen aber programmatisch Fokus – etwa ein Dialog beim Öffnen oder ein Fehlerbereich nach dem Absenden. Auch dort muss erkennbar sein, wo der Fokus gelandet ist, sonst wirkt der Sprung wie ein Aussetzer. In der Praxis genügt hier oft ein dezenterer Indikator, weil das Element ohnehin im Blickfeld steht.

Was ändert WCAG 2.2 an diesem Thema?

2.4.7 selbst bleibt unverändert auf Stufe AA. Neu hinzugekommen sind zwei Nachbarn: 2.4.11 Fokus nicht verdeckt (AA) verlangt, dass der fokussierte Bereich nicht vollständig von anderen Inhalten überlagert wird – der Klassiker ist die klebrige Kopfleiste. Und 2.4.13 Fokus-Erscheinungsbild (AAA) definiert erstmals konkret Mindestfläche (Umfang von mindestens 2 CSS-Pixeln Dicke) und Mindestkontrast (3:1) des Indikators.

Verwandte Themen

• Tastaturbedienung & sichtbarer Fokus – der ausführliche Praxis-Artikel
• 2.4.11 Fokus nicht verdeckt – sichtbar heißt auch: nicht überlagert
• 1.4.11 Nicht-Text-Kontrast – die 3:1-Grenze für den Indikator
• 2.1.1 Tastatur und 2.4.3 Fokus-Reihenfolge – im selben Durchlauf mitprüfen
• Dialoge & Modals – Fokus setzen und zurückgeben