Bewährte Praktiken

Cookie-Banner barrierefrei: Die DSGVO-Zustimmung muss abgelehnt werden können

Ein nicht barrierefreies Cookie-Banner ist nicht nur ein Accessibility-Mangel: Es verstößt gegen die DSGVO, indem es die Zustimmung für alle unmöglich macht. Zwischen dem European Accessibility Act und den Pflichten zur schriftlichen Einwilligung muss Ihr Banner mit der Tastatur, beim Zoomen und bei minimalen Kontrasten funktionieren. Erfahren Sie, wie Sie es in wenigen Minuten bewerten und die sieben wichtigsten Punkte.

Die kurze Antwort

Ein nicht barrierefreies Cookie-Banner führt zu einer doppelten Nichtkonformität: Die DSGVO erklärt jede Einwilligung für ungültig, die der Nutzer nicht ausdrücken kann (z. B. Ablehnung per Tastatur unmöglich, unzureichender Kontrast, Schaltflächen ohne Beschriftung), und der EAA verlangt die Barrierefreiheit aller Benutzeroberflächenelemente. Die sieben Mindestprüfungen: sichtbarer Fokus bei Öffnung, vollständige Tastaturnavigation, Kontrastverhältnis von 4,5:1, zugängliche Namen für Schaltflächen, Ablehnung genauso einfach wie Zustimmung, keine Fokusfallen, Lesbarkeit bei 200-Prozent-Zoom.

Warum ein nicht barrierefreier Cookie-Banner die DSGVO verletzt

Die DSGVO verlangt eine explizite und freie Einwilligung. Diese ist jedoch nur frei, wenn die Ablehnung genauso einfach wie die Zustimmung ist, und nur dann zugänglich, wenn jeder sie ausdrücken kann: per Tastatur, Screenreader, bei Sehbehinderung oder motorischen Einschränkungen. Wenn die Schaltfläche „Ablehnen“ nicht im Tastaturfokus erreichbar ist, unter 50 Pixeln klickbarem Inhalt verborgen ist, einen leeren Namen hat (leeres oder fehlendes aria-label) oder einen Kontrast von 2:1 auf weißem Hintergrund aufweist, kann ein Nutzer mit Behinderung diese technisch nicht ablehnen: Die von Ihrer Website gesammelte Einwilligung ist daher rechtlich nicht gültig.

Die CNIL geht seit ihren Leitlinien von 2021, die 2023 bestätigt wurden, davon aus, dass jedes Hindernis bei der Ausübung der Wahl (Zustimmung oder Ablehnung) diese Wahl nicht konform macht. Barrierefreiheit ist keine Option mehr: Sie ist eine technische Voraussetzung der DSGVO selbst.

Die zusätzliche Konformitätsebene: der European Accessibility Act

Der EAA, der am 28. Juni 2025 in Kraft tritt, schreibt vor, dass alle Websites und Webanwendungen in Europa die Barrierefreiheit gemäß WCAG 2.1 Stufe AA erfüllen müssen. Dies betrifft auch Cookie-Banner, die die ersten Elemente sind, die auf der Seite angezeigt werden: Es handelt sich also um die erste EAA-Konformität, die Ihre Website dem Besucher präsentiert. Wenn diese erste Ebene scheitert, erhalten die CNIL und die Barrierefreiheitsbehörden ein sofortiges Signal für Nachlässigkeit.

Die Kombination ist unerbittlich: Ein nicht barrierefreies Banner führt zu einer gleichzeitigen Nichtkonformität auf zwei Ebenen (DSGVO und EAA). Die zuerst identifizierten Mängel (Kontrast, Tastaturnavigation, Beschriftung) werden sowohl als Verstöße gegen die Einwilligung als auch als Verstöße gegen den EAA gemeldet.

Die sieben Punkte, die Sie bei Ihrem Cookie-Banner überprüfen sollten

1. Sichtbarer Fokus bei der Öffnung

Wenn das Banner angezeigt wird, muss der Tastaturfokus auf einem Element des Banners (meist der erste Button oder ein Schließknopf) sichtbar sein. Zu viele Websites zeigen das Banner an, lassen den Fokus aber im Hintergrund: Nutzer, die die Tastatur verwenden, wissen nicht, wo sie handeln sollen.

2. Vollständige Tastaturnavigation

Die Tab-Taste (Tab) muss alle Buttons des Banners in einer logischen Reihenfolge (von links nach rechts oder von oben nach unten) durchlaufen, und die Eingabetaste muss den fokussierten Button aktivieren. Auch Eingabefelder und interne Links im Banner müssen zugänglich sein. Die Eingabetaste (oder die Leertaste bei Buttons) muss funktionieren.

3. Ausreichender Farbkontrast

Text auf Hintergrund: Mindestens 4,5:1 für normalen Text, 3:1 für große Schrift (18 pt und fett). Rahmen und grafische Elemente: 3:1. Ein weißes Banner mit hellgrauem Text besteht diesen Test oft nicht. Auch halbtransparente Buttons auf weißem Hintergrund scheitern häufig.

4. Klare Button-Beschriftungen

Jeder Button muss eine sichtbare Beschriftung UND einen zugänglichen Namen haben (z. B. aria-label, falls die Beschriftung ein Icon ist, oder der sichtbare Text des Buttons). Ein Button mit nur einem „X„-Icon zum Schließen muss aria-label="Schließen" oder eine gleichwertige Alternative haben. Screenreader müssen „Alle Cookies akzeptieren“ vorlesen, nicht „Button“.

5. Ablehnung genauso zugänglich wie die Annahme

DSGVO verlangt dies. Der Button „Ablehnen“ darf nicht in kleinerer Schrift, hinter einem indirekten Link oder versteckt hinter einem präzisen Klick sein. Wenn „Akzeptieren“ per Tastatur bedienbar ist, muss „Ablehnen“ dies ebenfalls sein und klar sichtbar. Keine unterschiedliche Gewichtung oder Farbe darf eine falsche Hierarchie suggerieren.

6. Keine Fokus-Fallen

Focus Trap: Wenn Sie am Ende des Banners die Tab-Taste drücken, darf der Fokus nicht unendlich zum Anfang zurückspringen oder Sie außerhalb des Banners blockieren, während das Banner noch sichtbar ist. Der Fokus muss das Banner verlassen können, nachdem eine Aktion (Akzeptieren, Ablehnen, Schließen) ausgeführt wurde.

7. Lesbarkeit bei 200-Prozent-Zoom

Bei 200-Prozent-Zoom im Browser muss der Text des Banners lesbar bleiben und die Buttons mit dem Zeiger bedienbar sein. Kein unsichtbarer Überlauf, keine Textüberlappungen. Ein sehbehinderter Nutzer, der zoomen muss, darf nicht die Möglichkeit verlieren, abzulehnen.

Wie Sie Ihr Cookie-Banner in einer Minute testen

Mit der Tastatur: Öffnen Sie Ihre Website und schließen Sie die Maus. Drücken Sie die Tab-Taste: Der Fokus muss auf dem Banner erscheinen. Tabulieren Sie weiter, durchlaufen Sie die Schaltflächen und drücken Sie die Eingabetaste. Versuchen Sie, abzulehnen und dann zu akzeptieren. Wenn Sie „Ablehnen“ nicht mit der Tastatur erreichen können, besteht Ihr Banner den Test nicht.

Beim Kontrast: Machen Sie einen Screenshot des Banners und fügen Sie ihn in ein Online-Kontrastprüfwerkzeug ein (z. B. WebAIM Contrast Checker, Accessible Colors). Überprüfen Sie, ob Text und Schaltflächen mindestens ein Kontrastverhältnis von 4,5:1 erreichen. Ist das Ergebnis rot, korrigieren Sie es.

Beim Zoom: Drücken Sie dreimal Strg++ (Zoom auf 200 Prozent). Das Banner muss vollständig, lesbar bleiben und alle Schaltflächen müssen ohne horizontalen Scrollbar klickbar sein.

Mit Screenreader: Wenn Sie einen Browser mit NVDA (Windows, kostenlos) oder VoiceOver (Mac) verwenden, aktivieren Sie diesen und hören Sie zu, was vorgelesen wird. Die Schaltflächen müssen explizit benannt sein („Alle Cookies akzeptieren“ und nicht „Schaltfläche“). Die Abschnitte müssen eine logische Struktur aufweisen.

Konformität weitergedacht: manuelle Tests und Governance

Diese sieben Punkte decken automatisierbare Mängel ab (Kontrast, Beschriftung, Tastaturnavigation, Fokus). Doch die vollständige Barrierefreiheit des Banners erfordert auch manuelle Tests: Ein Entwickler oder Prüfer muss überprüfen, ob die Fokuslogik den Erwartungen entspricht (keine versteckten Fallen), ob die Anpassungsfelder (falls vorhanden) per Tastatur navigierbar sind und ob das Banner keine anderen kritischen Elemente verdeckt, wenn es angezeigt wird.

Denken Sie auch an die Governance: Die meisten CMPs (Consent-Management-Plattformen auf dem Markt) weisen standardmäßig Barrierefreiheitsmängel auf. Bevor Sie sich für einen entscheiden, prüfen Sie dessen Dokumentation zu EAA und DSGVO, testen Sie das Banner in der Pre-Production mit den oben genannten sieben Punkten und fordern Sie, falls möglich, vor dem Livegang Korrekturen an. Inclaria ermöglicht das Scannen Ihrer Website in wenigen Sekunden; das Cookie-Banner ist oft das erste Element des Barrierefreiheits-Audits und wird als blockierend eingestuft, da es den Zugang zu allen anderen Inhalten bedingt.

Aktualisierung: Testen Sie das Banner alle drei bis sechs Monate. Jede Änderung des CMPs, jedes Browser-Update oder jede Designanpassung kann neue Nicht-Konformitäten verursachen.

Wichtige Punkte zum Merken

• Ein nicht barrierefreies Cookie-Banner macht die DSGVO-Einwilligung ungültig und verstößt gegen den EAA.
• Die sieben Mindestprüfungen umfassen Fokus, Tastaturbedienung, Kontrast, Bezeichnungen, Gleichheit von Annahme/Ablehnung, Fallen, Zoom.
• Manuelle Tests ergänzen automatisierte Tests: tatsächliche Tastaturbedienbarkeit, Fokuslogik, Kohärenz der CMP-Steuerung.
• Ein konformes Banner ist das erste Signal für die allgemeine Konformität Ihrer Website.