Definition: Der Fokusindikator ist die sichtbare Markierung des Elements, das gerade den Tastaturfokus hat – meist ein Rahmen um Link, Button oder Eingabefeld. Ohne ihn wissen Menschen, die mit der Tastatur arbeiten, nicht, wo sie sich auf der Seite befinden. WCAG 2.4.7 Fokus sichtbar verlangt ihn auf Stufe AA [1].
Englisch: Focus indicator · Auch: Fokusrahmen, Fokusring · Zuletzt geprüft: 27. September 2026
Wer ihn braucht
Mit der Maus sieht man, worauf man zeigt. Mit der Tastatur zeigt nur der Fokusindikator, welches Element als Nächstes auf Enter reagiert. Das betrifft sehende Menschen, die wegen einer motorischen Einschränkung die Tastatur oder einen Schalter nutzen, Menschen mit Bildschirmlupe, die nur einen Ausschnitt sehen, und alle, die schneller mit der Tastatur sind. Ohne sichtbaren Fokus ist eine Seite für sie Blindflug: Jeder Tab-Druck könnte überall landen.
Was die WCAG verlangen
- 2.4.7 Fokus sichtbar (AA): Es gibt einen sichtbaren Fokusindikator [1].
- 2.4.11 Fokus nicht verdeckt (Minimum) (AA, neu in WCAG 2.2): Das fokussierte Element wird nicht vollständig von eigenen Inhalten verdeckt, etwa von einer fixierten Kopfzeile oder einem Cookie-Banner [2].
- 2.4.13 Focus Appearance (AAA): legt Mindestgröße und Kontrast des Indikators fest. Stufe AAA ist in der Regel nicht verpflichtend, die Anforderung ist aber ein guter Maßstab [3].
Im Code
/* Fehler: Rahmen entfernt, kein Ersatz */
:focus { outline: none; }/* Besser: deutlich, nur bei Tastaturfokus */
:focus-visible {
outline: 3px solid #1a1a1a;
outline-offset: 2px;
}
/* Fixierte Kopfzeile: Platz beim Scrollen */
html { scroll-padding-top: 5rem; }:focus oder :focus-visible?
:focus greift immer, auch beim Mausklick. :focus-visible überlässt dem Browser die Entscheidung: Bei Tastaturbedienung zeigt er den Rahmen, beim Klick auf einen Button meist nicht. In Textfeldern erscheint er in der Regel auch nach einem Klick [4]. Für Designteams ist :focus-visible oft der Kompromiss, der den Rahmen rettet.
Häufige Fehler
outline: noneim Reset-Stylesheet, ohne dass danach irgendwo ein Ersatz folgt.- Ein Rahmen in der Hintergrundfarbe. Auf einem dunkelblauen Button ist ein dunkelblauer Rahmen unsichtbar.
- Nur eine leichte Farbänderung des Textes, die kaum jemand bemerkt.
- Die fixierte Kopfzeile verdeckt das fokussierte Element beim Rückwärts-Tabben.
- Fokus auf unsichtbaren Elementen, etwa Links in einem zugeklappten Menü, das nur weggeschoben, aber nicht ausgeblendet ist.
Wie Reviseberg damit umgeht
Der Tastatur-Agent merkt sich vor dem ersten Tab-Druck, wie jedes fokussierbare Element ohne Fokus aussieht. Bei jedem Schritt vergleicht er das fokussierte Element mit diesem Ausgangszustand – am Element selbst, an ::before und ::after und am umgebenden Element. Ändert sich nichts Sichtbares, meldet er keyboard:focus-visible. Landet der Fokus auf etwas ohne Größe oder außerhalb des Bildschirms, meldet er keyboard:focus-invisible. Zeichnet ein Element schon ohne Fokus einen Rahmen oder Schatten, kann der Agent den Indikator nicht vom Design unterscheiden und markiert den Schritt für einen Menschen, statt zu raten. Kontrast und Größe des Indikators misst er nicht, und axe-core allein prüft den Fokusindikator gar nicht.
Verwandte Begriffe
Fokusreihenfolge · Tastaturbedienbarkeit · Skip-Link · Nicht-Text-Kontrast · Bildschirmlupe