Das WCAG-Kriterium besagt: Wenn eine Webseite mit der Tastatur bedienbar ist, muss klar erkennbar sein, welches Element gerade den Fokus hat. Das bedeutet: Wenn z. B. ein Nutzender mit Tab durch die Seite navigiert, soll sofort sichtbar sein, welches Feld, welcher Link oder welcher Button gerade ausgewählt ist. Ohne so einen sichtbaren Fokusindikator wüsste der Nutzende wahrscheinlich nicht, wo er gerade ist.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.4.7
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.4.7:
- Verwende CSS, um bei Fokussierung (z. B. über :focus oder :focus-visible) einen klar sichtbaren Rahmen, Rand, Schatten oder Hintergrundfarbe anzuzeigen.
- Achte darauf, dass dieser Fokus-Indikator nicht zeitlich begrenzt ist: Sobald ein Element den Fokus hat, muss der Indikator so lange bestehen bleiben, bis der Fokus wechselt.
- Die Sichtbarkeit sollte unter allen Umständen gegeben sein – auch bei kontrastarmen Designs oder ungewöhnlichen Farbkombinationen. Sollte der Standard-Fokus-Indikator kaum sichtbar sein, muss man ihn anpassen.
- Benutze die CSS-Pseudoklasse :focus-visible (wenn möglich): sie erlaubt es, den Fokusindikator nur dann anzuzeigen, wenn er relevant ist (z. B. bei Tastaturnutzung).
- Vermeide Inhalts- oder CSS-Regeln, die den Fokus verschwinden lassen oder unsichtbar machen (z. B. durch outline: none; ohne Ersatz).
- Teste mit Tastatur-Nutzung und verschiedenen Browsern, ob der Fokus wirklich durchgängig sichtbar ist, nicht nur auf einem Element oder in einem Bereich.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 2.4.7 Fokus sichtbar.