Fokus sichtbar

Was gefordert wird

Wann immer ein interaktives Element den Tastaturfokus erhält, muss der Browser — oder das CSS der Seite — einen sichtbaren Indikator rendern, der anzeigt, welches Element fokussiert ist. Das Erfolgskriterium schreibt nicht vor, wie der Indikator aussehen muss; das ist Aufgabe von 2.4.13 auf AAA-Stufe. Es fordert lediglich, dass irgendetwas sichtbar ist. Der klassische Fehler ist *:focus { outline: none; } ohne Ersatz.

Dieses Erfolgskriterium gilt für jedes fokussierbare Element: Links, Schaltflächen, Formulareingaben, benutzerdefinierte Widgets, Iframes — alles mit tabindex. Es gilt unabhängig davon, ob der Fokus per Tab, Shift+Tab oder einem programmatischen Fokusaufruf dorthin gelangt ist.

So wird die Anforderung erfüllt

• Niemals outline: none (oder outline: 0) schreiben, ohne sofortigen Ersatz. :focus-visible verwenden, um den benutzerdefinierten Ring auf Tastaturnutzende zu beschränken, wenn die Darstellung bei Mausklicks unterdrückt werden soll.
• Einen Fokus-Stil bereitstellen, der durch ausreichenden Kontrast und Breite unübersehbar ist: Ein 2 px breiter, durchgezogener Ring mit 3:1 Kontrast zum angrenzenden Hintergrund ist der konservative Ausgangswert.
• Bei hellen Bedienelementen auf hellem Hintergrund einen dunklen Ring verwenden (oder umgekehrt). Ein grauer Ring auf grauem Hover-Zustand ist die klassische Unsichtbarkeitsfalle.
• Benutzerdefinierte Widgets (Combobox, Listbox, Menü) müssen den Fokus auf die aktive Option verschieben und dort einen sichtbaren Indikator anzeigen.
• Die gesamte Seite ausgehend von der Adressleiste per Tab durchnavigieren. Jeder Haltepunkt muss ohne Anstrengung erkennbar sein.

Häufige Fehler

• Globaler Reset: *:focus { outline: none; } in der Basis-CSS, nie nachgetragen.
• Komponentenbibliotheken, die mit einem 1 px breiten, kontrastarmen Ring in der Markenfarbe auf einem Hero-Farbverlauf ausgeliefert werden — in der Praxis unsichtbar.
• Fokusindikator beim Scrollen hinter einem fixierten Header verborgen (vgl. 2.4.11 — gleiche Ursache, anderes Erfolgskriterium).
• Schaltflächen, die beim :hover die Hintergrundfarbe ändern, nicht aber beim :focus, sodass Tastaturnutzende keinerlei Signal erhalten.
• Benutzerdefinierte Dropdown-Menüs, bei denen der Fokus auf ein unsichtbares, außerhalb des Bildschirms liegendes <li> springt und sich visuell nichts verändert.
• Gestaltende, die den Ring durch einen winzigen Schatten ersetzen, der auf unruhigem Hintergrund unsichtbar ist.

Wie :focus-visible eingesetzt wird

Browser stellen :focus-visible bereit, um Tastaturfokus von Mausfokus zu unterscheiden. Empfohlenes Muster:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Mausklicks bleiben dadurch sauber, Tastaturnutzende erhalten einen Indikator. Ab 2026 in allen modernen Browsern produktionssicher einsetzbar.

Warum es wichtig ist

„Fokus sichtbar“ ist das am häufigsten zitierte Erfolgskriterium in Tastaturbarrierefreiheits-Audits — und wohl das wirkungsvollste. Eine Website, die 2.4.7 nicht erfüllt, ist für Tastaturnutzende unbrauchbar, selbst wenn jedes andere Erfolgskriterium bestanden wird. Menschen mit motorischen Behinderungen, sehbeeinträchtigte Nutzende mit Vergrößerungssoftware und Nutzende mit Handverletzungen verlieren gleichermaßen den Zugang. Mobile Tastaturnutzende (externe Bluetooth-Tastaturen an Tablets) treffen auf dieselbe Wand. Die Behebung erfordert in der Regel nur eine einzige CSS-Regel — was das anhaltende Auftreten dieses Fehlers im Web umso bemerkenswerter macht.