Prüfpunkt 2.4.11Stufe AATastatur und Fokus
Wie wird ein Cookie-Banner barrierefrei?
Ein Cookie-Banner ist barrierefrei, wenn ein Besucher ihn ohne Maus erreicht, vorgelesen bekommt und schließen kann und die Seite danach normal weiter bedient. Das W3C beschreibt dafür das modale Fenster, das die Seite sperrt, bis der Besucher gewählt hat, und die Leiste am Rand, die keinen Fokus verdeckt. Dazu kommen die üblichen Werte für Schrift und Knöpfe. Viele Banner kommen fertig von einem Anbieter, deshalb zählt die Probe auf Ihrer eigenen Seite.
Fenster oder Leiste: Beide Bauformen erfüllen die Anforderung
Beim modalen Fenster trifft der Besucher seine Wahl, bevor er die Seite bedient. Der Fokus kann nicht dahinter geraten, und das Fenster darf groß sein: Das W3C zeigt ein Beispiel mit 30 Prozent Breite. Die Leiste lässt die Seite frei bedienbar. Sie braucht scroll-padding, damit der Inhalt beim Tabben unter ihr hervorrollt, und am Seitenende Platz, damit auch der letzte Link sichtbar wird. Auf schmalen Bildschirmen löst das W3C die Fixierung in seinem Beispiel auf. Hinweise, die sich schließen, sobald der Fokus sie verlässt, nennt das W3C nur für Meldungen ohne nötige Entscheidung. Zu einer Einwilligung passt das nicht.
Der Fokus muss im Banner ankommen
Beim Fenster wandert der Fokus beim Öffnen hinein, so steht es im Dialog-Muster des W3C. Tab und Umschalt+Tab bleiben im Fenster, und das Fenster bekommt einen Namen, meist über aria-labelledby mit seiner sichtbaren Überschrift. Bei der Leiste zählt die Stelle im Code: Die Tabulatortaste folgt in aller Regel dem Quelltext. Steht der Banner dort am Ende, erreicht ihn ein Tastaturnutzer erst nach allen anderen Links der Seite. Setzen Sie ihn deshalb an den Anfang des Quelltexts, wie es auch das Beispiel des W3C tut.
Schrift und Knöpfe brauchen dieselben Werte wie der Rest der Seite
Der Text im Banner braucht 4,5:1 Kontrast gegen den Hintergrund, große Schrift 3:1. Das gilt für „Ablehnen“ genauso wie für „Akzeptieren“: Ein blassgrauer Link neben einem kräftigen Knopf bleibt für Menschen mit Sehschwäche kaum lesbar. Jeder Knopf braucht eine Fläche von mindestens 24 mal 24 CSS-Pixeln oder genügend Abstand zum Nachbarn und einen sichtbaren Fokusrahmen.
Im Shop-Test verdeckten Cookie-Overlays den Hauptinhalt
Aktion Mensch und Google ließen 2025 die 65 meistbesuchten Webshops in Deutschland von Hand testen. Eingeblendete Banner und Cookie-Overlays, die den Hauptinhalt verdecken und sich nicht ohne Weiteres schließen lassen, nennt der Bericht als eigene Hürde. Für den Shop heißt das: Der Banner steht vor dem ersten Produkt. Wer ihn mit der Tastatur nicht schließen kann, sieht weder Sortiment noch Preise und bestellt woanders.
So gehen Sie es an
- Öffnen Sie die Seite in einem privaten Browserfenster, damit der Banner erscheint, und legen Sie die Maus weg.
- Drücken Sie die Tabulatortaste. Der Fokus muss nach wenigen Drücken im Banner stehen, und Sie sehen bei jedem Halt den Rahmen.
- Wählen Sie „Ablehnen“ mit der Eingabetaste. Der Banner schließt sich, und der nächste Druck auf die Tabulatortaste landet auf der Seite.
- Lassen Sie den Banner einmal von einem Vorleseprogramm vorlesen. Es nennt Überschrift, Text und jede Wahlmöglichkeit.
Mehr zu diesem Thema
Weiter im Prüfbereich Barrierefreiheit
- Für wen macht die Stufe AAA im Alltag einen Unterschied?Ältere Augen, nachlassendes Gehör, Menschen, die Texte nicht sinnentnehmend lesen: Welche AAA-Kriterien wem helfen, mit Zahlen von WHO und LEO-Studie.
- Wie stelle ich meine Website auf barrierefrei um?Was WordPress, TYPO3, Drupal, Joomla, Shopify und Wix zur Barrierefreiheit zusagen und was Vorlage, Erweiterungen und Redaktion selbst leisten.
- Warum brauchen Wischgesten eine einfache Klick-Alternative?Wisch- und Mehrfinger-Gesten kann nicht jeder ausführen. WCAG 2.5.1 verlangt für jede solche Geste einen gleichwertigen Weg mit einfachen Tipps.
- Warum soll ein Klick erst beim Loslassen auslösen?Löst ein Klick erst beim Loslassen aus, lässt sich ein Fehlgriff abbrechen: Finger zur Seite ziehen, außerhalb loslassen. Das verlangt WCAG 2.5.2.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
