←  Alle Begriffe
F
Barrierefreiheit

Fokus-Indikator

Ein Fokus-Indikator zeigt sichtbar, welches interaktive Element bei Tastaturbedienung aktuell ausgewählt ist.

Ein Fokus-Indikator zeigt sichtbar, welches interaktive Element bei Tastaturbedienung aktuell ausgewählt ist. Die Umsetzung sollte native Webstandards bevorzugen und automatisierte Prüfungen durch Tests mit Tastatur und assistiven Technologien ergänzen. Eng verbunden ist der Begriff mit Tastaturnavigation und WCAG.

Weiterlesen

Tastaturnavigation

WCAG

Farbkontrast

FAQ

Fokus-Indikator

Was ist der Unterschied zwischen :focus und :focus-visible?
Die Pseudoklasse :focus greift bei jedem fokussierten Element, auch nach einem Mausklick. :focus-visible greift nur, wenn der Browser einen sichtbaren Fokus für sinnvoll hält, typischerweise bei Tastaturbedienung. So lässt sich der Rahmen bei Mausklicks zurückhalten, ohne Tastaturnutzer zu benachteiligen. Bei Textfeldern zeigen Browser den Fokus in der Regel immer.
Wie wird ein Fokus-Indikator getestet?
Der Kern ist ein manueller Test: Mit der Tab-Taste durch die Seite gehen und prüfen, ob jedes interaktive Element sichtbar markiert wird. Automatische Werkzeuge finden fehlende Stile, erkennen aber nicht, ob der Rahmen im Kontext erkennbar ist. Ergänzend sollten Modale, Menüs und Overlays geprüft werden, weil der Fokus dort besonders leicht verloren geht.
Warum ist das Entfernen des Fokus-Indikators per CSS ein Fehler?
Wird der Standardrahmen mit outline: none entfernt, sehen Tastaturnutzer nicht mehr, wo sie sich befinden. Links, Menüs und Formulare sind dann kaum noch bedienbar. Wer den Browser-Standard aus Designgründen ersetzt, muss einen gleichwertig sichtbaren Ersatz liefern. Die Pseudoklasse :focus-visible erlaubt, den Rahmen vor allem bei Tastaturbedienung zu zeigen.
Welches Kontrastverhältnis braucht ein Fokus-Indikator?
Für Bedienelemente und grafische Objekte fordert WCAG 2.1 AA ein Kontrastverhältnis von mindestens 3:1. Das gilt auch für den sichtbaren Fokusrahmen gegenüber seiner Umgebung. Ein hellgrauer Rahmen auf weißem Grund besteht diesen Wert oft nicht. Der Kontrast sollte daher auf allen Hintergrundfarben der Seite geprüft werden.