Über diese Website

Dieser Kasten steht auf jeder Seite in der linken Spalte. Was darin steht, änderst du in der Konfiguration unter Plugins — oder du schaltest ihn dort ab.

Über dieses Handbuch

Dieses Handbuch gehört zur Vorlage Example für QuartzControl. Es erklärt die Vorlage und führt zugleich alles vor, was sie kann.

Der Text hier kommt aus einer Markdown-Datei, nicht aus der Konfiguration.

Sichtbare Fokusstile

5 Min. Lesezeit

Sichtbare Fokusstile

Empfehlung

Den Fokus nie ersatzlos entfernen. Wer den Fokusring des Browsers nicht mag, gestaltet ihn mit :focus-visible um, statt outline: none zu setzen.

:focus-visible {
  outline: 3px solid black;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px white;   /* zweiter, heller Ring für dunkle Hintergründe */
}

↗ Beispiel in neuem Tab öffnen

Dazu ein paar Regeln:

  • Den Ring mit outline zeichnen, box-shadow höchstens als Ergänzung.
  • Mindestens 2px dick und mit mindestens 3:1 Kontrast.
  • Für Gruppen und Karten :focus-within oder :has(:focus-visible) nutzen.
  • Sticky Header und Banner dürfen das fokussierte Element nicht vollständig verdecken.

Begründung

Warum der Fokus sichtbar sein muss

Für alle, die mit der Tastatur navigieren, ist der Fokusring das, was für alle anderen der Mauszeiger ist. Ohne ihn weiß man nicht, wo man gerade ist.1 WCAG verlangt deshalb auf Stufe AA, dass der Tastaturfokus sichtbar ist (2.4.7), und nennt das Entfernen des Fokusindikators per CSS ausdrücklich als typischen Fehler.2

Warum :focus-visible statt :focus

Früher bekam jedes fokussierte Element einen Ring, auch nach einem Mausklick auf einen Button. Das fanden viele hässlich, und so landete outline: none in unzähligen Stylesheets. Damit war der Fokus auch für Tastaturnutzer weg.3

Heute entscheidet der Browser selbst, wann der Fokus sichtbar sein soll, und :focus-visible trifft genau dann. So ändert man wie der Fokus aussieht, ohne zu ändern, wann er erscheint.3

In Chrome 155 nachgeprüft:

Aktion:focus:focus-visible
Button mit der Maus anklickenjanein
Mit Tab auf einen Buttonjaja
Mit der Maus in ein Textfeld klickenjaja

↗ Beispiel in neuem Tab öffnen

Die letzte Zeile ist wichtig: :focus-visible heißt nicht „nur Tastatur“. In Textfeldern zeigt der Browser den Fokus auch nach einem Klick, weil man dort ja tippen will. Manche Quellen vereinfachen das zu „nur bei Tastaturfokus“.1

WCAG erlaubt dieses Verhalten ausdrücklich: Es reicht, wenn es einen Bedienmodus gibt, in dem der Fokus sichtbar ist.2

Warum outline und nicht nur box-shadow

Im Forced-Colors-Modus (zum Beispiel dem Kontrastmodus von Windows) ersetzt das System Farben, Hintergründe und Schatten. box-shadow verschwindet dabei, outline bleibt erhalten. Ein Fokusring, der nur aus einem Schatten besteht, ist dort also unsichtbar.1

Der Trick mit zwei Ringen stammt von Sara Soueidan: Die outline liegt über dem Schatten. Ein 6px breiter weißer Schatten hinter einer 3px schwarzen Outline ergibt deshalb zwei gleich breite Ringe in Schwarz und Weiß. So ist der Fokus auf hellem und dunklem Hintergrund sichtbar.1 Bei dunklen Seiten tauscht man die Farben.

Wie groß und kontrastreich

WCAG 2.4.13 (Stufe AAA) gibt eine Messlatte: Der Ring soll mindestens so viel Fläche haben wie ein 2px dicker Rahmen um das Element, und zwischen fokussiertem und unfokussiertem Zustand sollen mindestens 3:1 Kontrast liegen.4 Auch auf Stufe AA gilt für den Fokusring 3:1 gegenüber der Umgebung, über das Kriterium 1.4.11 Non-text Contrast.23

Wann anwenden?

Immer. Jede Website mit Links, Buttons oder Formularen braucht einen sichtbaren Fokus.

Gruppen und Karten hervorheben

:focus-within trifft ein Element, wenn es selbst oder irgendetwas darin den Fokus hat.5 Das passt gut zu Formulargruppen:

.feldgruppe:focus-within {
  background: var(--hervorhebung);
}

:focus-within reagiert aber auf jeden Fokus, auch nach einem Mausklick. Soll die Gruppe nur bei Tastaturbedienung reagieren, nimmt man :has(:focus-visible):

.karte:has(:focus-visible) {
  outline: 3px solid;
}

↗ Beispiel in neuem Tab öffnen

Beides habe ich in Chrome 155 nachgeprüft. Ein Anwendungsfall steht in Ganze Karte klickbar machen.

Fokus nicht verdecken

Seit WCAG 2.2 gilt auf Stufe AA: Ein Element mit Tastaturfokus darf nicht vollständig hinter etwas verschwinden, das die Website selbst darübergelegt hat. Typische Verursacher sind Sticky Header, Sticky Footer und Cookie-Banner.6 Gegenmittel ist scroll-padding, siehe Sticky-Header einrichten.

Ausnahmen / Gegenbeispiele

  • Wer Maus und Tastatur abwechselnd benutzt, versteht unter Umständen nicht, warum der Ring mal da ist und mal nicht. MDN nennt das ausdrücklich als Problem für Menschen mit kognitiven Einschränkungen.3 WCAG empfiehlt deshalb als Best Practice, auch Mausnutzern einen sichtbaren Fokus anzubieten, wo es hilft.2 Wer auf Nummer sicher gehen will, gestaltet :focus dezent und :focus-visible deutlich.
  • Den Fokusstil des Browsers unverändert lassen ist ebenfalls zulässig. WCAG 2.4.13 nimmt diesen Fall sogar ausdrücklich aus.4 Er ist nur nicht auf jedem Hintergrund gut sichtbar.
  • Das alte Muster :focus:not(:focus-visible) brauchte man, solange nicht alle Browser :focus-visible konnten.1 Seit 2024 ist das überflüssig.

Checkliste

  • Kein outline: none oder outline: 0 ohne gleichwertigen Ersatz
  • Eigener Fokusstil über :focus-visible
  • Fokusring mit outline (sichtbar im Forced-Colors-Modus)
  • Mindestens 2px dick und mindestens 3:1 Kontrast zur Umgebung
  • Auf allen verwendeten Hintergründen sichtbar (zweiter Ring per box-shadow hilft)
  • Sticky Header, Footer und Banner verdecken keine fokussierten Elemente
  • Einmal die ganze Seite mit Tab durchgehen und schauen, ob man immer weiß, wo man ist

Quellen / Erfahrungen

Eigene Ergänzungen: die Tabelle und die Varianten mit :focus-within und :has(:focus-visible) habe ich am 2026-10-18 in Chrome 155 geprüft. Den Forced-Colors-Modus und Screenreader habe ich nicht getestet.

Browsersupport

Laut web-features 3.43.0 (abgefragt 2026-10-18), alles Baseline widely available: :focus-visible seit 2024-09-14 (Chrome/Edge 86, Firefox 85, Safari 15.4), :focus-within seit 2022-07-15, :has() seit 2026-06-19.

Footnotes

  1. A guide to designing accessible, WCAG-conformant focus indicators (Sara Soueidan), Einleitung, Abschnitte „A ‘universal’ focus indicator“ und „Showing the focus indicator only for keyboard users“, 2021-08-13, aktualisiert 2023-08-27. ↩ ↩2 ↩3 ↩4 ↩5

  2. Understanding SC 2.4.7 Focus Visible (W3C WCAG), Abschnitte „Intent“ und „Failures“. ↩ ↩2 ↩3 ↩4

  3. focus-visible Pseudoklasse (MDN), Abschnitte „:focus vs :focus-visible“ und „Accessibility“, Stand 2026-10-06. ↩ ↩2 ↩3 ↩4

  4. Understanding SC 2.4.13 Focus Appearance (W3C WCAG), Kriterium und Abschnitt „Minimum area“. ↩ ↩2

  5. focus-within Pseudoklasse (MDN), Einleitung, Stand 2026-10-14. ↩

  6. Understanding SC 2.4.11 Focus Not Obscured Minimum (W3C WCAG), Abschnitt „Intent“. ↩

Weiterlesen

Diese Seite gehört zu gui-test — der Beispielvorlage für QuartzControl. Ein Überblick über alle Bereiche steht auf der Startseite.

Auf einem schmalen Bildschirm ist die Navigation oben eingeklappt.

gui-test · Sprache: de-DE · Diese Seite: komponenten/fokusstile