Design · Fokus

Fokus-Indikatoren sichtbar gestalten

Wer eine Website ohne Maus bedient, per Tastatur, Sprachsteuerung oder Schalter, muss jederzeit sehen, wo der Fokus gerade steht. Der Fokus-Indikator ist für Tastatur-Nutzer:innen das, was der Maus- Cursor für alle anderen ist. Diese Seite zeigt, welche WCAG-Kriterien gelten, warum outline: 0 der häufigste Fehler ist und wie ein guter Fokusring aussieht.

  • 9 Minuten Lesezeit
  • Stand: Mai 2026

Warum der Fokus sichtbar sein muss

Wenn du eine Seite mit der Tab -Taste durchläufst, springt ein unsichtbarer Zeiger (der Fokus ) von einem bedienbaren Element zum nächsten: von Link zu Link, zu Buttons, zu Eingabefeldern. Der Fokus-Indikator macht diesen Zeiger sichtbar, meist als Rahmen oder Ring um das aktuelle Element.

Für Menschen, die keine Maus nutzen (wegen einer motorischen Einschränkung, einer Sehbehinderung oder schlicht aus Gewohnheit), ist dieser Indikator nicht schmückendes Beiwerk, sondern die einzige Orientierung. Ohne ihn ist Tastatur-Bedienung wie Mausbewegung mit unsichtbarem Cursor: Man weiß nie, was ein Klick gerade auslösen würde.

Der Fokus wandert mit der Tab-Taste durch die Seite Eine Reihe von vier bedienbaren Elementen nebeneinander: ein Link, ein Eingabefeld, ein Button und ein weiterer Link. Das dritte Element, der Button, hat den Tastatur-Fokus und ist von einem kräftigen, abgesetzten Rahmen umgeben. Über der Reihe zeigen Pfeile mit der Beschriftung Tab, wie der Fokus von links nach rechts von Element zu Element springt. Eine Bildunterschrift erklärt, dass der sichtbare Rahmen die Position des Fokus anzeigt, vergleichbar mit dem Mauszeiger. TAB-REIHENFOLGE: WO STEHT DER FOKUS GERADE? Tab Tab Tab Mehr lesen Suche Senden Kontakt Der Fokus-Indikator zeigt, welches Element gerade dran ist, für Tastatur-Nutzer:innen wie der Mauszeiger.
Mit jeder Tab -Eingabe springt der Fokus zum nächsten bedienbaren Element. Nur der sichtbare Indikator (hier um „Senden") verrät, wo man gerade steht.

Die WCAG-Kriterien rund um den Fokus

Die WCAG 2.2 hat das Thema deutlich ausgebaut. Zu dem schon länger bestehenden 2.4.7 (Fokus sichtbar) sind drei neue Erfolgskriterien hinzugekommen. Wichtig für die Einordnung: Nur zwei davon gelten auf Level AA, der Stufe, die BFSG und BITV in der Praxis verlangen. Die strengeren Anforderungen an Größe und Kontrast des Indikators stehen auf Level AAA.

Die WCAG-Kriterien rund um den Tastatur-Fokus
Erfolgskriterium Level Was es verlangt
2.4.7 Fokus sichtbar AA Ein Tastatur-Fokus muss überhaupt sichtbar sein. Seit WCAG 2.0.
2.4.11 Fokus nicht verdeckt (Minimum) AA (neu in 2.2) Das fokussierte Element darf nicht vollständig von anderem Inhalt verdeckt werden, etwa von einer klebenden Kopf- oder Fußzeile.
2.4.12 Fokus nicht verdeckt (Erweitert) AAA (neu in 2.2) Strenger: Das fokussierte Element darf gar nicht verdeckt sein, auch nicht teilweise.
2.4.13 Fokus-Aussehen AAA (neu in 2.2) Mindestgröße und Mindestkontrast für den Indikator: Fläche von mindestens 2 CSS-Pixel Umfang und 3 : 1 Kontrast zwischen fokussiertem und nicht fokussiertem Zustand.

Der häufigste Fehler: den Fokus wegnehmen

Browser zeigen von sich aus einen Fokusring. Der mit Abstand häufigste Barrierefreiheits-Fehler beim Fokus ist, ihn aktiv zu entfernen , meist aus ästhetischen Gründen:

Anti-Muster: niemals so

 /* Entfernt den Fokus für ALLE Nutzer:innen: Verstoß gegen 2.4.7 */ 
*:focus {
  outline: none 
;
}

Diese drei Zeilen machen die ganze Seite für Tastatur-Nutzer:innen unbedienbar. Wenn ein vorhandener Fokusring nicht zum Design passt, lautet die Lösung ersetzen , nicht entfernen.

Moderne Browser bieten dafür :focus-visible : Die Pseudoklasse zeigt den Indikator nur dann, wenn er gebraucht wird (also bei Tastatur-Bedienung), und unterdrückt ihn beim reinen Maus-Klick. So bekommen Tastatur-Nutzer:innen ihren Ring, ohne dass er bei jedem Mausklick aufblitzt.

Empfohlenes Muster: eigenen Indikator setzen

 /* Erst global den Default neutralisieren ... */ 
:focus { outline: none 
; } /* ... dann einen kräftigen, eigenen Indikator setzen */ 
:focus-visible {
  outline: 3px 
solid #DB043B;
  outline-offset: 2px 
;
  border-radius: 2px 
;
}

Einen guten Fokus-Indikator gestalten

Ein verlässlicher Fokus-Indikator orientiert sich an den Werten aus 2.4.13, auch wenn die dort nur AAA-Pflicht sind:

  • Dick genug. Als Faustregel mindestens 2 CSS-Pixel rund um das Element. Ein 3-Pixel-Ring (wie im Beispiel) ist klar erkennbar und ein guter Standardwert.
  • Kontrastreich. Der Indikator braucht mindestens 3 : 1 Kontrast, und zwar zwischen fokussiertem und nicht fokussiertem Zustand und gegenüber dem Hintergrund. Ein hellgrauer Ring auf weißem Grund reicht nicht.
  • Mit Abstand. Ein outline-offset von 1–2 Pixeln hebt den Ring vom Element ab und macht ihn auf farbigen Buttons besser erkennbar.
  • Auf allen interaktiven Elementen. Links, Buttons, Eingabefelder, Auswahl-Listen, eigene Widgets, überall, wohin der Fokus wandern kann.
Drei Button-Zustände: kein Fokus, entfernter Fokus, guter Fokus Drei gleich aussehende Buttons mit der Beschriftung Senden nebeneinander. Der erste, beschriftet „Ohne Fokus", zeigt den normalen Ruhezustand ohne Rahmen. Der zweite, beschriftet „Fokus entfernt", sieht im fokussierten Zustand identisch aus, hier wurde der Fokusring per outline none entfernt, sodass nicht erkennbar ist, dass der Button gerade den Fokus hat. Der dritte, beschriftet „Guter Fokus", trägt einen kräftigen, abgesetzten Ring mit etwas Abstand rund um den Button, sodass der Fokus klar sichtbar ist. Unter dem zweiten Button steht ein Warnhinweis, unter dem dritten ein Häkchen-Hinweis. DERSELBE BUTTON IM TASTATUR-FOKUS: DREI UMSETZUNGEN OHNE FOKUS Senden Ruhezustand FOKUS ENTFERNT Senden ! nicht erkennbar GUTER FOKUS Senden klar sichtbar Der mittlere Button hat den Fokus genauso wie der rechte, nur ist das hier nicht zu sehen. Ein kräftiger, abgesetzter Ring (rechts) macht den Unterschied.
Links der Ruhezustand. In der Mitte hat der Button den Fokus, aber der Ring wurde per outline: none entfernt, von außen nicht vom Ruhezustand zu unterscheiden. Rechts ein kräftiger, abgesetzter Indikator, der den Fokus klar zeigt.

Fokus nicht verdecken lassen

Das neue Kriterium 2.4.11 (Fokus nicht verdeckt, Minimum, Level AA) zielt auf ein Problem, das vom reinen Styling unabhängig ist: Selbst ein perfekt gestalteter Fokusring nützt nichts, wenn das fokussierte Element von anderem Inhalt überdeckt wird. Der klassische Fall ist eine klebende Kopf- oder Fußzeile( position: sticky ), die beim Durchtabben über das gerade fokussierte Element rutscht und es verbirgt.

2.4.11 verlangt auf AA-Ebene, dass das fokussierte Element nicht vollständig verdeckt sein darf. Die strengere AAA-Variante 2.4.12 verbietet auch teilweise Verdeckung. Praktisch hilft scroll-margin-top auf fokussierbaren Elementen oder genug Platz für die klebende Leiste, damit beim Scrollen zum Fokus genug Abstand bleibt.

Klebende Kopfzeile verdeckt das fokussierte Element Zwei Seitenausschnitte im Vergleich, jeweils mit einer klebenden Kopfzeile am oberen Rand. Links unter „Verstoß gegen 2.4.11" liegt die Kopfzeile direkt über dem gerade fokussierten Eingabefeld, sodass der Fokus-Rahmen verdeckt und das Feld nicht mehr sichtbar ist; ein rotes Kreuz markiert das. Rechts unter „Korrekt" bleibt zwischen Kopfzeile und fokussiertem Feld genügend Abstand, der Fokus-Rahmen ist vollständig sichtbar; ein grünes Häkchen markiert das. Eine Notiz nennt scroll-margin-top als Lösung. FOKUS NICHT VERDECKEN (2.4.11): KLEBENDE KOPFZEILE VERSTOSS GEGEN 2.4.11 Menü (sticky) KORREKT Menü (sticky) Lösung: genug Abstand zur Leiste lassen, z. B. scroll-margin-top auf fokussierbaren Elementen.
Selbst ein perfekter Fokusring nützt nichts, wenn eine klebende Kopfzeile das fokussierte Element überdeckt (links). Rechts bleibt genug Abstand, der Fokus bleibt sichtbar.

Praxis-Checkliste

  1. Hat jedes interaktive Element einen sichtbaren Fokus-Indikator?
  2. Wurde outline: none nur zusammen mit einem eigenen :focus-visible -Stil verwendet?
  3. Ist der Indikator mindestens etwa 2 CSS-Pixel dick?
  4. Hat er mindestens 3 : 1 Kontrast zum Hintergrund und zum Ruhezustand?
  5. Ist der Fokus auch auf farbigen Buttons durch outline-offset erkennbar?
  6. Bleibt das fokussierte Element hinter klebenden Kopf-/Fußzeilen sichtbar (2.4.11)?
  7. Funktioniert die ganze Seite per Tab ohne Maus durchlaufbar?
  8. Ist der Fokus-Indikator unabhängig von Farbe erkennbar (Form, Dicke)?

Mythen-Prüfung