Wer mit der Tastatur navigiert, springt mit Tab von Element zu Element. Damit das funktioniert, muss immer klar sichtbar sein, welches Element gerade „dran“ ist — der Fokus-Indikator. Ohne ihn tappt man im Dunkeln.
Worauf es ankommt
WCAG 2.2, 2.4.7: Das fokussierte Element muss sichtbar hervorgehoben sein. Das neue Kriterium 2.4.11 (Focus Appearance) verlangt zusätzlich, dass der Fokus ausreichend groß und kontrastreich ist und nicht von anderen Elementen verdeckt wird.
So prüfst du es
- Tabbe durch die Seite: Ist bei jedem Schritt ein deutlicher Rahmen, Rand oder Hintergrund sichtbar?
- Hat der Fokus genug Kontrast zum Hintergrund (mindestens 3:1)?
- Wird er nicht von Sticky-Headern oder Overlays verdeckt?
Häufige Fehler
- Das größte No-Go:
outline: noneim CSS — entfernt den Fokus komplett. - Ein Fokus, der so dezent ist, dass man ihn kaum sieht.
- Fokus, der hinter einem fixierten Header verschwindet.
Kurz gesagt
Entferne den Fokus nie — gestalte ihn lieber schön und deutlich. Ein klarer Fokus-Ring ist Pflicht, kein Designfehler.
Du willst wissen, wo deine Seite steht? Im Barrierefreiheits-Audit prüfe ich genau das nach WCAG 2.2 AA.