WCAG 2.2: Wenn der Cookie-Banner den Tastatur-Fokus verdeckt

Wer eine Website nur mit der Tastatur bedient – etwa mit der Tabulator-Taste (kurz "Tab", springt von einem Bedienelement zum nächsten) – verlässt sich auf eine sichtbare Markierung: einen Rahmen oder eine Umrandung um den Link, Button oder das Formularfeld, das gerade aktiv ist. Ohne diese Markierung weiß man nicht, wo man sich auf der Seite befindet. Genau diese Markierung wird häufig verdeckt: von Cookie-Bannern, die am unteren Bildschirmrand kleben, von Sticky-Headern (Kopfzeilen, die beim Scrollen sichtbar bleiben) oder von Chat-Widgets, die in der Ecke schweben. Springt der Fokus per Tab-Taste hinter eines dieser Elemente, sieht die Nutzerin oder der Nutzer nur noch: nichts.

Was WCAG 2.2 dazu festlegt

WCAG (Web Content Accessibility Guidelines) sind die international anerkannten Richtlinien für barrierefreie Websites, herausgegeben vom World Wide Web Consortium (W3C). Die Version 2.2 wurde am 5. Oktober 2023 als offizieller W3C-Standard veröffentlicht und ergänzt die bisherigen Regeln um neun zusätzliche Kriterien. Zwei davon betreffen genau das beschriebene Problem:

• 2.4.11 Fokus nicht verdeckt (Minimum): Das fokussierte Element darf nicht vollständig von anderen Inhalten überdeckt werden – ein Teil muss sichtbar bleiben. Dieses Kriterium gehört zur Konformitätsstufe AA, die in der Praxis meist als Zielwert gilt.
• 2.4.12 Fokus nicht verdeckt (Erweitert): Die strengere Variante auf Stufe AAA verlangt, dass das fokussierte Element vollständig sichtbar bleibt, ohne jede Überdeckung.

Für die Praxis heißt das: Ein Cookie-Banner darf am unteren Rand liegen bleiben – aber er darf nicht dazu führen, dass ein Link oder Button, den jemand per Tab-Taste anspringt, komplett darunter verschwindet. Gleiches gilt für Sticky-Header, die über den Seiteninhalt gelegt sind, und für Chat-Widgets, die permanent eine Ecke belegen.

Wo das in der Praxis auffällt

Typische Situationen, in denen der Fokus verschwindet:

• Ein Cookie-Banner liegt über der Fußzeile, und die dortigen Links (Datenschutz, Impressum, Kontakt) werden beim Durchtabben komplett verdeckt.
• Ein fixierter Header überlappt den oberen Seitenbereich, sodass die ersten Navigationspunkte einer langen Menüliste dahinter verschwinden.
• Ein Chat-Widget unten rechts überdeckt einen "Jetzt anfragen"-Button oder ein Formularfeld, sobald der Fokus dort ankommt.
• Auf schmalen Bildschirmen (Smartphones, aber auch schmale Browserfenster) tritt das Problem häufiger auf, weil weniger Platz für Banner und Inhalt gleichzeitig vorhanden ist.

Warum das gerade jetzt relevant wird?

WCAG 2.2 ist kein neuer Standard mehr, aber er wird gerade zum verbindlichen Prüfmaßstab in Europa. Die technische Grundlage für gesetzliche Barrierefreiheits-Anforderungen in der EU ist die Norm EN 301 549. Laut Fahrplan des europäischen Normungsinstituts ETSI soll eine überarbeitete Fassung dieser Norm am 23. Oktober 2026 im Amtsblatt der EU veröffentlicht werden und damit zum neuen harmonisierten Standard werden. Diese Fassung nimmt die WCAG-2.2-Kriterien der Stufe AA auf – also auch das Kriterium zum nicht verdeckten Fokus. Wer heute ein Cookie-Banner, einen Sticky-Header oder ein Chat-Widget einbaut, baut damit an einem Element, das in gut einem Jahr an einem strengeren Maßstab gemessen wird.

Das betrifft nicht nur große Unternehmen. Cookie-Banner, Sticky-Header und Chat-Widgets gehören inzwischen zur Standardausstattung fast jeder Website, unabhängig von der Betriebsgröße – oft eingebunden über Drittanbieter-Tools, deren Standardeinstellungen niemand im Betrieb selbst geprüft hat.

Was Sie konkret tun können

Ein einfacher Selbsttest braucht keine Spezialsoftware:

1. Öffnen Sie Ihre Website im Browser und klicken Sie einmal auf eine freie Stelle der Seite (nicht in ein Feld).
2. Drücken Sie mehrfach die Tabulator-Taste und beobachten Sie, ob die Markierung (meist ein farbiger Rahmen) durchgehend sichtbar bleibt.
3. Achten Sie besonders auf die Bereiche unter einem Sticky-Header, hinter einem Cookie-Banner und in der Nähe eines Chat-Widgets.
4. Wiederholen Sie den Test in einem schmaleren Browserfenster oder auf einem Smartphone – dort tritt das Problem häufiger auf.

Verschwindet die Markierung vollständig hinter einem dieser Elemente, ist das ein Ansatzpunkt für die Entwicklung: oft reicht es, dem überlagernden Element etwas Abstand zum fokussierten Bereich zu geben oder die Seite beim Fokussieren automatisch leicht zu verschieben, damit das aktive Element sichtbar bleibt.

Was ein automatisierter Check leisten kann – und was nicht

Automatisierte Werkzeuge (wie das häufig genutzte Prüfwerkzeug axe-core) erkennen viele technische Mängel zuverlässig, etwa fehlende Alternativtexte oder zu geringe Farbkontraste. Ob ein Cookie-Banner den Tastaturfokus tatsächlich verdeckt, lässt sich damit aber nur eingeschränkt feststellen, weil dafür ein echter Tab-Durchlauf über die fertig geladene, interaktive Seite nötig ist – inklusive aller Overlays, die oft erst nach Sekunden oder nach einem Klick erscheinen. Ein automatisierter Vorab-Check kann solche Hinweise liefern, ersetzt aber nicht den manuellen Tastatur-Test durch einen Menschen.

Unser kostenloser Barriere-Check untersucht mehrere Seiten Ihrer Website automatisiert auf WCAG-Basis und zeigt, wo technische Ansatzpunkte liegen. Er ist ein erster Überblick, kein vollständiges Prüfergebnis und keine Rechtsberatung – für den Tastatur-Durchlauf und den Screenreader-Eindruck bleibt der Blick eines Menschen nötig.