Cookie-Banner barrierefrei einrichten

Das Wichtigste in Kürze

• Das Consent-Banner liegt vor dem Inhalt. Ist es nicht bedienbar, ist die Website nicht bedienbar – gleichgültig, wie sauber die Seiten dahinter gebaut sind.
• Am häufigsten messen wir dort: zu schwacher Kontrast auf „Ablehnen“, Schaltflächen ohne zugänglichen Namen, kein sichtbarer Fokusrahmen, Schalter ohne Beschriftung.
• Dazu zwei Befunde, die kein Scan zuverlässig findet: Der Tastaturfokus wird beim Öffnen nicht in den Dialog geführt – oder er lässt sich wieder heraustabben.
• Viele dieser Befunde sitzen im Tool des Anbieters, nicht in Ihrem Theme. Das ist eine gute Nachricht: Farbwerte, Beschriftungen und Anordnung sind meist Konfiguration.
• „Alle ablehnen“ sollte genauso leicht erreichbar sein wie „Alle akzeptieren“. Datenschutzaufsicht und Barrierefreiheit ziehen hier in dieselbe Richtung.
• Fokusführung und Tastaturbedienung sind maschinell nur teilweise prüfbar – dieser Teil bleibt manuelle Prüfung. Fünf Minuten mit der Tabulatortaste genügen für den ersten Eindruck.

Warum ausgerechnet das Banner kritisch ist

Ein Consent-Banner ist kein gewöhnlicher Seitenbereich. Es legt sich über den Inhalt, sperrt das Scrollen und verlangt eine Entscheidung, bevor es etwas freigibt. Das ist sein Zweck – und macht es zum empfindlichsten Bauteil der Website. Ein Ladenlokal kann ebenerdig sein und breite Gänge haben: Wenn die Eingangstür klemmt, zählt nichts davon.

Für Menschen, die mit der Tastatur oder mit Vorlesesoftware arbeiten, entstehen daraus drei Sackgassen. Der Fokus – die Markierung, die zeigt, welches Element die Tastatur bedient – bleibt beim Öffnen am Seitenanfang stehen. Oder er lässt sich heraustabben und läuft danach durch eine gesperrte Seite. Oder es fehlt der sichtbare Fokusrahmen, sodass nicht erkennbar ist, worauf ein Tastendruck wirken würde. In allen drei Fällen endet der Besuch, bevor er begonnen hat.

Dazu kommt, dass das Banner der am wenigsten geprüfte Teil ist: fertig vom Anbieter, einmal eingebaut, farblich grob angepasst, nie wieder angefasst. Bei jeder Abnahme klickt es jeder Beteiligte mit der Maus weg, bevor er auf den Inhalt schaut – dass die Tastaturbedienung scheitert, fällt niemandem auf. Ein Muster, das sich durch die häufigsten Barrierefreiheits-Fehler zieht.

Zur Einordnung: Das BFSG gilt seit dem 28.06.2025, Verstöße können mit einem Bußgeld bis 100.000 Euro belegt werden (§ 37 BFSG). Ob Ihr Angebot darunter fällt, beurteilt eine Anwältin oder ein Anwalt. Ein Dialog, der sich nicht bedienen lässt, kostet auch ohne Behörde Umsatz.

Die typischen Befunde im Consent-Dialog

Diese Muster begegnen uns in Prüfläufen immer wieder – quer durch Branchen, Systeme und Anbieter. Die letzte Spalte sagt, ob ein Scan den Befund sehen kann, vorausgesetzt der Dialog ist beim Messen geöffnet.

Auffällig ist die Verteilung: Die obere Hälfte ist Handwerk, das ein Werkzeug zuverlässig misst. Die untere betrifft Verhalten über die Zeit – das muss jemand ausprobieren, deshalb steht weiter unten ein Selbsttest.

Ablehnen muss so leicht sein wie Akzeptieren

Ein Muster verdient einen eigenen Abschnitt, weil es kein Versehen ist, sondern eine Gestaltungsentscheidung: „Alle akzeptieren“ ist groß, farbig und kontrastreich, die Ablehnung ein blasser Textlink – oder sie liegt gar nicht auf der ersten Ebene, sondern hinter „Einstellungen“.

Barrierefreiheitlich ist das ein messbarer Befund. Hellgrauer Text auf Weiß erreicht die geforderten 4,5:1 nicht, und ein Rand, der sich kaum abhebt, verfehlt zusätzlich den Nicht-Text-Kontrast von 3:1 (WCAG 1.4.11). Das trifft nicht nur Menschen mit einer Sehbeeinträchtigung, sondern jeden, der bei Sonnenlicht auf ein Display schaut.

Dieselbe Gestaltung betrachtet noch jemand anderes. Die Datenschutzaufsicht vertritt seit Jahren die Auffassung, dass eine Einwilligung nur dann freiwillig ist, wenn die Ablehnung genauso leicht möglich ist wie die Zustimmung. Ob und wie das für Ihr Banner gilt, beurteilt eine Anwältin, ein Anwalt oder Ihre Datenschutzbeauftragte – wir nehmen diese Bewertung nicht vor. Wir stellen nur fest, dass beide Blickwinkel zum selben praktischen Ergebnis führen.

Zwei Dinge prüfen Sie mit. Die Reihenfolge: Der Fokus muss die Schaltflächen in derselben Reihenfolge erreichen, in der sie zu sehen sind – sonst entsteht ein Befund nach WCAG 2.4.3. Und die Beschriftung: „OK“ sagt nicht, wozu zugestimmt wird, „Alle akzeptieren“ und „Alle ablehnen“ schon.

Die gute Nachricht: der Fehler sitzt selten in Ihrem Theme

Meldet ein Prüfbericht Befunde im Banner, lautet die erste Reaktion oft: „Dann muss die Agentur ran, die unsere Website gebaut hat.“ Meist ist das die falsche Adresse. Der Dialog wird von einem eingebundenen Skript des Consent-Anbieters erzeugt; sein Aufbau aus Schaltflächen, Kästchen und Texten steht in keiner Ihrer Vorlagen.

Das Unangenehme daran: Was der Anbieter falsch baut, kann Ihre Entwicklerin nicht sauber im Theme reparieren. Nachträglich in fremdes Markup einzugreifen, hält bis zum nächsten Update – dann ändert sich eine Klassenbezeichnung, und die Korrektur ist weg. Von diesem Weg raten wir ab: Er tauscht ein sichtbares Problem gegen ein unsichtbares.

Das Gute: Ein großer Teil der messbaren Befunde ist kein Programmierfehler, sondern eine Einstellung. Farbwerte, Beschriftungen, Anordnung und Reihenfolge der Schaltflächen, Sprache, Layout-Variante – all das liegt im Verwaltungsbereich des Tools und lässt sich ohne eine Zeile Code ändern. Für die Befunde aus der oberen Tabellenhälfte ist das oft der komplette Lösungsweg.

Deshalb prüfen wir bei jedem Befund, ob seine Beispiel-Elemente in einem Consent-Container sitzen oder im eigenen Markup. Diese Trennung entscheidet über den Aufwand: Konfiguration erledigt Ihr Marketing an einem Nachmittag. Was im Theme liegt, ist Entwicklungsarbeit – wie viel zusammenkommt, ordnet Was kostet die BFSG-Umsetzung wirklich? ein. Was im Produkt des Anbieters liegt, ist ein Gespräch, das Sie führen müssen, aber nicht bezahlen sollten.

In Redaktionssystemen ist das Banner oft ein Plugin mit Einstellungen im Backend – welche Stellschrauben dort sitzen und welche im Code, steht in BFSG in Shopware, WordPress und WooCommerce.

Was Sie in der Konfiguration selbst erreichen

Diese Punkte lassen sich in den meisten Consent-Tools ohne Entwicklerin erledigen – im Verwaltungsbereich Ihres Anbieters.

1. Farbwerte beider Schaltflächen gleichziehen

   Für die Ablehnung dieselben Werte wie für die Zustimmung, in allen Feldern, die das Tool anbietet: Hintergrund, Text, Rand. Prüfen Sie das Ergebnis mit einem Kontrastrechner gegen den tatsächlichen Hintergrund des Banners – nicht gegen Weiß, wenn der Kasten hellgrau ist. Zielwerte: 4,5:1 für Text und 3:1 für Ränder; für große Schrift ab 24 Pixel, fett ab 18,66 Pixel, genügen ebenfalls 3:1.

2. Die Fokusfarbe mitdenken

   Viele Tools haben eine eigene Einstellung für die Umrandung des aktiven Elements. Steht sie auf dem Farbton des Hintergrunds, ist der Fokus unsichtbar. Ein deutlich abgesetzter Wert genügt.

3. Beschriftungen eindeutig machen

   „Alle akzeptieren“ und „Alle ablehnen“ statt „OK“ und „Nein danke“; in den Detaileinstellungen jede Kategorie ausschreiben. Bietet das Tool ein Feld für die Beschriftung reiner Symbol-Schaltflächen an – meist „Schließen“ –, füllen Sie es aus. Fehlt das Feld, gehört der Punkt auf die Frageliste.

4. Reihenfolge und Ebene festlegen

   Die Ablehnung gehört auf dieselbe Ebene wie die Zustimmung, nicht hinter „Einstellungen“. Prüfen Sie danach mit der Tabulatortaste, ob die Reihenfolge der sichtbaren Anordnung entspricht.

5. Sprache und Textlänge kontrollieren

   Der Dialog sollte in der Sprache ausgeliefert werden, in der die Seite ausgezeichnet ist – sonst spricht die Vorlesesoftware englische Texte mit deutschen Lautregeln aus.

Wo die Konfiguration endet, sollten Sie ebenso klar sehen: ob der Fokus in den Dialog gesetzt und dort gehalten wird, ob der Dialog als Dialog ausgezeichnet ist, ob die Schalter auf die Leertaste reagieren. Das steckt im Code des Anbieters – diese Punkte gehören nicht auf Ihre Aufgabenliste, sondern in eine E-Mail.

Der Selbsttest mit der Tastatur, fünf Minuten

Diesen Test kann jeder machen, der eine Tastatur hat. Er ersetzt keine vollständige Prüfung, findet aber die Befunde, die kein Skript sieht. Öffnen Sie Ihre Startseite in einem privaten Fenster, damit das Banner erscheint, und lassen Sie die Maus liegen.

1. Einmal Tabulator drücken

   Wo landet die Markierung? Sie sollte im Dialog stehen. Springt sie in die Navigation oder den Sprunglink am Seitenanfang, wird der Fokus nicht in den Dialog geführt.

2. Durch den Dialog tabben

   Ist auf jedem Element deutlich zu sehen, dass es aktiv ist – auch auf „Alle ablehnen“, „Einstellungen“ und dem Schließkreuz? Verschwindet die Markierung zwischendurch, fehlt dort der sichtbare Fokus.

3. Über das letzte Element hinaus weitertabben

   Springt die Markierung an den Anfang des Dialogs zurück, wird der Fokus im Dialog gehalten – dieser Punkt stimmt. Wandert sie in die Seite dahinter – erkennbar an Linkzielen am unteren Fensterrand –, lässt sich der Fokus heraustabben.

4. Escape drücken

   Ein modaler Dialog sollte sich mit Escape schließen lassen. Das ist kein eigenes WCAG-Erfolgskriterium, aber eine Erwartung, die fast jede Bedienoberfläche erfüllt.

5. Detaileinstellungen mit der Tastatur bedienen

   Die Einstellungen mit der Eingabetaste öffnen, die Schalter mit der Leertaste umlegen. Reagiert einer nur auf den Mausklick, ist die Einstellung ohne Maus nicht erreichbar. Prüfen Sie auch, ob nach dem Speichern erkennbar ist, dass die Auswahl übernommen wurde.

6. Auf 200 Prozent zoomen

   Bleiben alle Schaltflächen erreichbar, oder rutscht die Ablehnung aus dem Bild? Lässt sich der Dialog dann noch scrollen?

Notieren Sie jeden auffälligen Punkt mit einem Satz und einem Bildschirmfoto – das ist die Grundlage für das Gespräch mit dem Anbieter. Derselbe Test lohnt sich für den Bestellablauf; welche Schritte dort empfindlich sind, steht im barrierefreien Checkout.

Diese Fragen stellen Sie Ihrem Consent-Anbieter

Was Sie nicht konfigurieren können, muss der Anbieter liefern. Stellen Sie die Fragen schriftlich und nummeriert – Sie bekommen entweder eine brauchbare Auskunft oder ein aussagekräftiges Schweigen.

1. Erfüllt Ihr Consent-Dialog die Anforderungen der WCAG 2.1 auf Stufe AA beziehungsweise der EN 301 549? Bitte antworten Sie mit einem Prüfbericht, nicht mit einem Werbesatz.
2. Welches Datum und welchen Prüfumfang hat der Bericht, und wer hat geprüft – Ihr Team oder eine externe Stelle?
3. Wird der Tastaturfokus beim Öffnen in den Dialog gesetzt, dort gehalten und nach dem Schließen an die vorherige Stelle zurückgegeben?
4. Ist der Dialog als Dialog ausgezeichnet und benannt, und ist der Rest der Seite währenddessen für Vorlesesoftware ausgeblendet?
5. Lässt er sich vollständig mit der Tastatur bedienen, einschließlich Detaileinstellungen, Schaltern und Speichern?
6. Haben alle Schaltflächen einen zugänglichen Namen, auch reine Symbol-Schaltflächen wie das Schließkreuz?
7. Sind die Schalter der Kategorien technisch mit ihrer Beschriftung verbunden, und wird ihr Zustand angesagt?
8. Kann ich alle Farbwerte frei setzen – auch für die Ablehnen-Schaltfläche, die Fokusumrandung und die Schalter?
9. Kann ich Beschriftungen, Reihenfolge und Ebene der Schaltflächen ändern, ohne in den Code einzugreifen?
10. Welche dieser Punkte sind Konfiguration, welche erfordern eine Änderung an Ihrem Produkt – und bis wann ist damit zu rechnen?

Wenn Sie ohnehin neu auswählen: Machen Sie den Selbsttest an der Demo-Installation des Anbieters, bevor Sie unterschreiben.

Was ein Scan im Banner sieht – und was nicht

Zum Schluss die Einordnung, ohne die dieser Artikel unvollständig wäre. Automatische Prüfungen sind im Consent-Dialog besonders anfällig, aus einem Grund, an den kaum jemand denkt: Viele Werkzeuge bekommen das Banner gar nicht zu Gesicht.

Das passiert auf drei Wegen: Der Dialog wird nachgeladen, nachdem die Messung gelaufen ist. Das Werkzeug arbeitet mit einer Sitzung, in der die Einwilligung längst gespeichert ist. Oder das Consent-Skript erkennt den automatisierten Zugriff und liefert eine andere Seite aus. Der Bericht meldet dann null Befunde für einen Bereich, der nie geprüft wurde – ein grüner Haken bedeutet hier nicht „in Ordnung“, sondern „nicht angesehen“.

Ist der Dialog beim Messen offen, sind die Befunde der oberen Tabellenhälfte zuverlässig messbar: fehlende Namen, Kontrastwerte, nicht verbundene Schalter.

Nicht messbar bleibt das Verhalten über die Zeit: wohin der Fokus springt, ob er im Dialog bleibt, ob Escape wirkt, ob die Reihenfolge beim Tabben der sichtbaren Anordnung folgt. Automatisierte Prüfung deckt die maschinell prüfbaren Kriterien ab; eine vollständige Konformitätsbewertung erfordert zusätzlich manuelle Prüfung. Beim Consent-Dialog ist dieser manuelle Anteil größer als anderswo auf der Website.

Diese Grenze halten wir für einen Vorteil: Wer sie nicht benennt, verkauft Ergebnisse, die er nicht gemessen hat. Wir beheben die messbaren technischen Verstöße nach WCAG 2.1 AA / EN 301 549 und schreiben dazu, was ein Mensch geprüft hat.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung. Ob das BFSG Ihr Angebot erfasst, ob die Ausnahme für Kleinstunternehmen nach § 3 Abs. 3 BFSG greift – weniger als zehn Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme, und nur für Dienstleistungen – und wie Ihr Banner datenschutzrechtlich zu bewerten ist, beurteilt eine Anwältin oder ein Anwalt.

Häufige Fragen

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung. Quellen: WCAG 2.1, Erfolgskriterien 1.3.1 Info und Beziehungen (Stufe A), 2.1.1 Tastatur (Stufe A), 2.4.3 Fokus-Reihenfolge (Stufe A), 2.4.7 Fokus sichtbar (Stufe AA), 1.4.3 Kontrast (Minimum) (Stufe AA), 1.4.11 Nicht-Text-Kontrast (Stufe AA), 4.1.2 Name, Rolle, Wert (Stufe A); EN 301 549, Abschnitte 9.1.3.1, 9.1.4.3, 9.1.4.11, 9.2.1.1, 9.2.4.3, 9.2.4.7 und 9.4.1.2; Gesetz zur Stärkung der Barrierefreiheit von Produkten und Dienstleistungen (BFSG), insbesondere §§ 3, 14 und 37; Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV). Die beschriebenen Befundmuster stammen anonymisiert aus eigenen Prüfläufen.