Fokus-Indikatoren, die wirklich sichtbar sind

So läuft es oft schief: Mitten in einem Redesign fällt jemandem auf, dass der Standard-Fokus-Umriss des Browsers mit den neuen Buttons kollidiert, und fügt dem Reset-Stylesheet outline: none hinzu. Die visuelle QA geht durch, weil nichts anders aussieht — bis der erste Report von jemandem eintrifft, der per Tastatur navigiert und sich durch eine Seite tabbt, die nicht mehr zeigt, wo er gerade ist.

Ein Fokus-Indikator ist die sichtbare Markierung dafür, auf welches Element eine Tastatureingabe wirkt, und ihn zu entfernen macht eine Oberfläche ohne Maus unbrauchbar. WCAG 2.4.7 verlangt auf Stufe AA einen sichtbaren Fokus-Indikator, und der Indikator braucht 3:1 Kontrast gegenüber den Farben um ihn herum. Die funktionierende Lösung: niemals outline: none ohne Ersatz, den Ring mit :focus-visible gestalten und sicherstellen, dass er auf jedem Hintergrund sichtbar ist, auf dem er landen kann. Genau an diesem letzten Punkt scheitern die meisten Ringe unbemerkt, und genau diesen Punkt arbeitet dieser Teil unseres Kontrast-Leitfadens mit berechneten Zahlen durch.

Warum gibt es Fokus-Indikatoren?

Eine Maus-Nutzerin hat auf die Frage „Wo bin ich?” eine ständige Antwort — der Zeiger ist auf dem Bildschirm, und das Element darunter reagiert. Wer sich per Tab durch eine Seite bewegt, hat genau eine Entsprechung — den Fokus-Indikator. Das Gleiche gilt für Menschen, die Switch-Geräte verwenden, und für alle, deren Hände, Augen oder Setup eine Maus unpraktisch machen. Der Ring ist keine Dekoration über der Navigation; er ist die Rückmeldung der Navigation.

Das ist der anschauliche Rahmen für outline: none: Es räumt kein visuelles Detail auf, es schaltet den Zeiger von jemandem ab. Die Oberfläche funktioniert noch in dem Sinne, dass Tab den Fokus weiterhin bewegt — aber unsichtbar, was für die Person, die sich durchtabbt, dasselbe ist wie nicht funktionieren.

Was verlangen die WCAG-Regeln?

Die zentrale Anforderung ist Erfolgskriterium 2.4.7, Focus Visible: Jede per Tastatur bedienbare Oberfläche muss einen sichtbaren Fokus-Indikator zeigen. Es liegt auf Stufe AA — der Stufe, auf die sich Regulierung typischerweise bezieht — ein fehlender Ring ist also ein Compliance-Verstoß, keine Stilfrage.

An Sichtbarkeit hängt eine Zahl. Das Kriterium für Nicht-Text-Kontrast verlangt 3:1 für die visuelle Information, die nötig ist, um Interface-Komponenten zu erkennen, und ein Fokus-Indikator ist genau diese Art von Information — die funktionierende Untergrenze liegt also bei 3:1 zwischen dem Ring und den unmittelbar angrenzenden Farben.

WCAG 2.2 hat das Bild erweitert: Focus Not Obscured (2.4.11, AA) besagt, dass das fokussierte Element nicht vollständig hinter anderem Inhalt verborgen sein darf — sticky Header und Cookie-Banner sind die üblichen Übeltäter — und ein strengeres AAA-Kriterium beschreibt Mindestgröße und Kontrast des Indikators genauer. Die Details der AAA-Stufe sind optional und werden seltener angepeilt; die verlässlichen Erkenntnisse sind der sichtbare Ring, die 3:1-Untergrenze und das fokussierte Element nicht zu verdecken.

Was ersetzt outline: none?

Der historische Grund, warum Designer den Ring gelöscht haben, ist, dass :focus auch bei Mausklicks auslöst, sodass Buttons nach dem Klick weiter aufleuchteten. Für dieses Problem gibt es eine Lösung in Form eines Selektors: :focus-visible greift, wenn der Browser einschätzt, dass der Fokus gezeigt werden sollte — im Wesentlichen bei Tastaturnavigation — und überspringt gewöhnliche Mausklicks.

/* Mausklicks ruhig lassen, den Ring für Tastaturen behalten */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

Das bewahrt die Ästhetik, die zur Löschung motiviert hat, und die Lebensader, die die Löschung gekappt hat. Ein Vorbehalt: Kombiniere die beiden Regeln wie oben — outline: none allein auf :focus, ohne eine :focus-visible-Regel daneben, stellt genau den ursprünglichen Fehler wieder her.

Warum funktioniert eine einzige Ringfarbe selten überall?

Weil der Ring gegen das geprüft wird, worauf er landet, und ein echtes Produkt aus vielen Hintergründen besteht. Hier ist eine einzige Ringfarbe — ein Marken-Blau, #2563eb — getestet gegen vier Oberflächen, auf die er tatsächlich treffen würde, jedes Verhältnis berechnet:

Der Ausfall ist nicht zufällig — er trifft den markenfarbenen Button, oft das am häufigsten fokussierte Element der Seite, und er ist total: Ein Ring in derselben Farbe wie sein Hintergrund scheitert nicht allmählich, er verschwindet. Der dunkle Header erfüllt es nur mit wenig Spielraum. Eine Farbe, vier Urteile.

Deshalb behandelt man eine Fokusfarbe besser als Entscheidung pro Oberfläche statt als globale Konstante. Öffne das Fokus-Rollen-Panel in Scale Composer — es leitet für jede Oberfläche in der Palette eine Fokus-Rolle ab und prüft sie schon bei der Ableitung gegen diese Oberfläche, sodass der Ring, der auf der Markenfüllung landet, nicht derselbe ist wie der, der auf der weißen Karte landet.

Wie behebt ein zweifarbiger Ring das?

Wenn das Design überall einen einzigen Fokus-Stil will, ist das robuste Muster ein Ring mit zwei Schichten — eine helle innere Linie und eine dunkle äußere (oder umgekehrt). Die Begründung ist arithmetisch: Keine einzelne Farbe kontrastiert mit jedem Hintergrund, aber eine helle und eine dunkle Farbe decken zusammen den gesamten Bereich ab, weil jede Oberfläche entweder hell genug für die dunkle Schicht oder dunkel genug für die helle ist. Dieselben vier Oberflächen, mit einem weißen inneren Ring und einem fast schwarzen äußeren Ring #111827:

Jede Schicht scheitert irgendwo; das Paar scheitert nirgends. In CSS sind die beiden Schichten typischerweise ein outline plus ein box-shadow oder zwei gestapelte Schatten.

Spielen Versatz und Stärke eine Rolle?

Ja, und in dieselbe Richtung wie der Kontrast. Eine 1px-Haarlinie, die sich an die Kante des Elements schmiegt, verschwindet oft, selbst wenn ihre Farbe technisch erfüllt — sie liest sich als Teil des Rahmens, und entlang einer farbigen Kante ist sie ein einziges Pixel Information, das das ganze Signal tragen soll. Eine übliche funktionierende Untergrenze ist ein 2px-Ring mit etwa 2px Versatz: Der Abstand trennt den Ring vom Element, sodass er sich als Indikator statt als Rahmen liest, und die Stärke übersteht Subpixel-Rendering und Bildschirme minderer Qualität. Das AAA-Erscheinungskriterium von WCAG 2.2 weist in dieselbe Richtung und verlangt einen Indikator von substanzieller Größe, nicht nur eine erfüllende Farbe.

Gib jeder Oberfläche ihren eigenen Ring

Die Tabelle mit vier Oberflächen oben ist klein; eine echte Palette hat mehr Oberflächen, und ein Theme-Wechsel verdoppelt sie. Leite Fokus-Rollen über deine eigenen Oberflächen hinweg ab — füge einen dunklen Header oder ein getöntes Panel hinzu und beobachte, wie sich die Fokusfarbe pro Oberfläche anpasst, jede Kombination gegen die 3:1-Untergrenze geprüft, sobald sie abgeleitet wird.