Dieses WCAG-Kriterium besagt folgendes: Wenn ein Element per Tastatur den Fokus bekommt, darf es nicht komplett von anderem Inhalt verdeckt sein. Das heißt: Nutzende, die mit der Tastatur navigieren (oder vergleichbaren Eingabegeräten), müssen zumindest teilweise sehen können, welches Element aktuell fokussiert ist.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.4.11
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.4.11:
- Achte darauf, dass sticky Header & Footer (also Elemente, die fixiert über oder unter dem Inhalt liegen) nicht vollständig über ein fokussiertes Element gelegt werden.
- Nutze CSS-Eigenschaften wie scroll-padding oder sorge dafür, dass beim Fokussieren automatisch gescrollt wird, sodass das fokussierte Element sichtbar bleibt.
- Wenn Inhalte durch Nutzer geöffnet werden (z. B. Dialoge, Sidebars, Benachrichtigungen), dann sollte entweder der Dialog selbst den Fokus übernehmen, oder das betreffende Element sichtbar bleiben bzw. leicht wieder sichtbar gemacht werden können (z. B. durch ESC zum Schließen).
- Für persistent angezeigte Inhalte (z. B. dauerhaft sichtbare Seitenleisten, Chatfenster, Banner) sollte geprüft werden, ob sie in ihrer Standardposition (beim Laden) den Fokus anderer Elemente verdecken.
- Stelle sicher, dass alle responsive Designelemente und Breakpoints berücksichtigt werden: Auf kleineren Bildschirmen oder bei veränderter Fenstergröße dürfen solche Überdeckungen nicht auftreten.
- Teste mit reiner Tastatur-Navigation (z. B. Tab, Shift-Tab, ESC), ob man immer sehen kann, welches Element fokussiert ist.
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.11 Fokus nicht verdeckt (Minimum).