ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Schnell
Wichtig für Rolle:
Design, Entwicklung
Worum gehts?
Es muss immer sichtbar sein, welches Element auf der Seite den Tastaturfokus hat.
Wenn man per Tastatur navigiert, soll das momentan fokussierte Element deutlich angezeigt werden, damit User immer wissen, auf welchem Element sie sich gerade mit der Tastatur befinden.
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
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 Zustand zu der Farbe vom nicht-fokussierten Zustand größer als 3:1 ist)
- Die blinkende Linie, nach dem Klick in ein Inputfeld
- und so weiter
Wir empfehlen allerdings, einen Fokusrahmen zu nutzen. Dieser ist auf allen Elementen einheitlich und gut zu erkennen. Mehr dazu in dem Blogeintrag von Sara über Fokusindikatoren (englisch).
WCAG-Technik(en) in Englisch:
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:
Unser Test-Tool!
Die neuen Kick-off-Audits!
Prüfe selbstständig die kritischsten WCAG-Kriterien! Mit unseren einfach erklärten Anleitungen kannst du zu Beginn eines Projektes den Zustand einer Website schnell einschätzen: Was sind Kosten und Aufwände? Für nur 99,- €
