Die WCAG-Kriterien

WCAG 2.4.7: Fokus sichtbar

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

Komplexität:Einfach
Dauer:Schnell

Wichtig für Rolle:

Design, Entwicklung

Zum WCAG-Kriterium:

Fokus sichtbar (englisch)

Worum gehts?

Interaktive Elemente (Buttons, Links usw.) brauchen einen Fokuszustand. Es muss immer sichtbar sein, welches Element auf der Seite den Tastaturfokus hat.

Illustration von zwei Buttons. Der Erste hat einen Fokus-Rahmen, der Zweite nicht. Der Erste ist richtig, der Zweite ist ein Fehler.

Umsetzung

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

Sichtbare Fokusindikatoren bereitstellen
Stelle sicher, dass bei jedem interaktiven Element (wie Buttons, Links oder Formulare), das mit der Tab-Taste angesteuert wird, der Fokuszustand zu erkennen ist. Der Fokusindikator muss sichtbar bleiben, solange das Element fokussiert ist, und darf nicht zeitlich begrenzt sein.

Fokuszustände können sein:
- Unterstreichung
- Fettung
- Farbwechsel (Solange der Kontrast der Farbe vom fokussierten zu nicht-fokussierten Zustand größer als 3:1 ist)
- Die blinkende Linie, nach dem Klick in ein Inputfeld
- Fokusrahmen
Wir empfehlen, einen Fokusrahmen zu nutzen. Dieser ist auf allen Elementen einheitlich und gut zu erkennen. Mehr dazu in dem Blogeintrag von Sara Soueidan über Fokusindikatoren (englisch).
WCAG-Technik(en) in Englisch:
- G149: Hervorgehoben bei Fokus

Wenn notwendig: Überschreibe den Browser-Indikator
Verlasse dich nicht allein auf die Standard-Fokusindikatoren von Browsern oder Betriebssystemen, da diese oft schlecht sichtbar sind und nicht die richtigen Kontraste haben.

Browser nutzen oft einen Fokusrahmen, um die Elemente im Fokuszustand hervorzuheben. Der Kontrast der Rahmen ist aber nicht immer 3:1 zum Hintergrund. Wenn der Kontrast nicht ausreicht, musst du selbst einen Fokusindikator bereitstellen, der die richtigen Kontrastanforderungen erfüllt.
WCAG-Technik(en) in Englisch:
- G195: Nutzen einen vom Autor bereitgestellten, sichtbaren Fokusindikator

So testest dU:

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren