Fokus nicht sichtbar (keyboard:focus-visible)

Die Regel keyboard:focus-visible meldet Elemente, die den Tastaturfokus bekommen, ohne dass sich an ihnen sichtbar etwas ändert. Wer mit der Tastatur arbeitet, weiß dann nicht mehr, wo er gerade ist. Die Lösung ist ein deutlicher Fokusrahmen über :focus-visible – und kein outline: none ohne Ersatz.

Was die Regel bedeutet

WCAG 2.4.7 verlangt: Jede per Tastatur bedienbare Oberfläche hat einen Modus, in dem der Fokus sichtbar ist. Browser zeigen standardmäßig einen Fokusrahmen. Das Kriterium reißt fast immer, weil eine Website diesen Rahmen entfernt oder überdeckt.

2.4.7 schreibt keine Mindestgröße und keinen Mindestkontrast für den Fokusindikator vor. Diese Maße regelt erst 2.4.13 „Fokus-Darstellung“ auf Stufe AAA. Ein Rahmen von mindestens 2 px mit 3:1 Kontrast zu den angrenzenden Farben ist trotzdem die sichere Wahl. So erfüllen Sie auch 1.4.11 Nicht-Text-Kontrast.

Wen es betrifft

Alle, die sehen und mit der Tastatur navigieren: Menschen mit motorischen Einschränkungen, die Tastatur, Schalter oder Mundstab nutzen, und Menschen mit Sehbehinderung, die eine Bildschirmlupe verwenden und nur einen Ausschnitt der Seite sehen. Ohne sichtbaren Fokus drücken sie Enter, ohne zu wissen, was sie auslösen.

Warum die Prüfung anschlägt

• CSS-Resets mit *:focus { outline: none; } oder outline: 0 ohne Ersatz.
• „Hässlichen“ Rahmen nach Mausklick entfernt, damit aber auch für Tastatur-Nutzende. Genau dafür gibt es heute :focus-visible.
• Eigene Komponenten (<div role="button">, Dropdowns, Tabs) ohne Fokus-Stil.
• Framework-Overrides, z. B. box-shadow: none auf Buttons in Dialogen.

So beheben Sie es

/* Vorher – der Fokus ist für alle unsichtbar */
*:focus { outline: none; }

/* Nachher – sichtbar für Tastatur-Nutzende, ruhig bei Mausklick */
:focus-visible {
  outline: 2px solid #005fcc;   /* 5,98:1 auf Weiß */
  outline-offset: 2px;
}

/* Auf farbigen oder dunklen Flächen: zweifarbiger Rahmen */
.btn-primary:focus-visible {
  outline: 2px solid transparent; /* bleibt im Windows-Kontrastmodus sichtbar */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1a1a1a;
}

Drei Hinweise:

• :focus-visible zeigt den Rahmen bei Tastaturbedienung, bei Mausklick auf Buttons meist nicht. Sie müssen den Rahmen also nicht mehr global entfernen.
• box-shadow verschwindet im erzwungenen Farbmodus (Windows-Kontrastdesigns). Das transparente outline sorgt dafür, dass dort trotzdem ein Rahmen erscheint.
• Prüfen Sie klebende Header und Cookie-Banner: Ein sichtbarer Fokus hinter einem überdeckenden Element verletzt 2.4.11 Fokus nicht verdeckt (Minimum).

So prüfen Sie es von Hand

1. Laden Sie die Seite, klicken Sie in die Adresszeile und drücken Sie Tab.
2. Sehen Sie bei jedem Schritt sofort, wo der Fokus ist – auf hellen, dunklen und farbigen Flächen?
3. Wiederholen Sie das in geöffneten Dialogen und Menüs und in der Mobilansicht.
4. Schalten Sie in Chrome unter DevTools › Rendering „forced-colors: active“ ein. Ist der Fokus noch sichtbar?

Zugehöriges WCAG-Kriterium

2.4.7 Fokus sichtbar, Stufe AA. Verwandt: 2.4.11 Fokus nicht verdeckt (Minimum), Stufe AA, neu in WCAG 2.2, und 1.4.11 Nicht-Text-Kontrast.

So meldet Reviseberg diese Regel

Diese Regel stammt nicht aus axe-core. Eine regelbasierte Prüfung drückt keine Tasten und sieht deshalb nicht, was beim Fokussieren passiert. Der Tastatur-Agent von Reviseberg geht die Nutzerreise, die Sie festlegen, mit echten Tastendrücken in Chromium durch. Vor dem ersten Tastendruck hält er fest, wie jedes fokussierbare Element gezeichnet ist. Bei jedem Tab-Schritt vergleicht er das fokussierte Element – samt ::before, ::after und Elternelement, wo Design-Systeme den Rahmen oft ansetzen – mit diesem Stand: Umriss, Schatten, Rahmen, Hintergrund, Textfarbe und Unterstreichung. Ändert sich nichts, meldet er: „Nothing about this element changes when it takes focus.“ Ändert sich nichts, zeichnet das Element aber schon einen Umriss oder Schatten, kann der Agent den Fokus nicht vom Design unterscheiden und markiert den Schritt für einen Menschen, statt zu raten.

Zu jedem Befund gehören der Selektor, der Schritt in der Tastenfolge und ein zugeschnittener Screenshot. In der Befundliste steht die Regel mit Schweregrad, WCAG 2.4.7, Seitenzahl und den Punkten, die ein Fix zurückbringt. Der Agent prüft die Reise, die Sie festlegen. Elemente außerhalb dieser Reise erreicht er nicht.

Verwandte Regeln

• undefined – der Fokus landet auf einem Element, das man nicht sieht.
• undefined – der Fokus kommt aus einem Element nicht mehr heraus.
• undefined – Text, der sich nicht genug vom Hintergrund abhebt.

Tastatur-Agent auf Ihrer Website – kostenloser Bericht