Barrierefreies Cookie-Banner: 7 Punkte, die Sie in 10 Minuten prüfen

Auf fast jeder Website erscheint beim ersten Besuch zuerst ein Banner. Wer ihn nicht bedienen kann, kommt an den Inhalt dahinter nicht heran. Das trifft Menschen, die ohne Maus arbeiten, mit Screenreader, mit Zoom oder mit zittriger Hand am Handy. In den Suchdaten dieser Seite taucht die Frage nach einem barrierefreien Cookie-Banner bereits auf. Dieser Beitrag geht sieben Punkte durch, die Sie in etwa zehn Minuten selbst prüfen: je Punkt der Handgriff, der Maßstab und die Stelle, an der Sie nachbessern.

Die Maßstäbe stammen aus den Web Content Accessibility Guidelines (WCAG) 2.2 des W3C. Wo wir Zahlen nennen, steht die Quelle mit Abrufdatum dabei. Wir liefern die Technik, keine Rechtsberatung.

Wo Banner typischerweise scheitern

Ein Banner ist ein eigener kleiner Bereich, der über der Seite liegt. Genau deshalb geht bei ihm vieles schief, was auf der übrigen Seite funktioniert:

• Die Tabulatortaste springt hinter den Banner, statt in ihm zu bleiben.
• Der Fokusrahmen ist unsichtbar, weil das Theme ihn abschaltet.
• Schaltflächen sind Textlinks ohne Fläche oder grau auf grau.
• „Ablehnen“ steckt hinter einem Link „Einstellungen“.
• Am Handy verdeckt der Banner die Hälfte der Seite.

Die 7 Punkte

1. Nur mit der Tastatur bedienbar

Öffnen Sie die Seite in einem privaten Fenster und legen Sie die Maus weg. Drücken Sie Tab. Der Fokus sollte beim Banner beginnen oder ihn früh erreichen. Mit Tab, Umschalt+Tab, Enter und Leertaste müssen Sie jede Schaltfläche erreichen, die Auswahl treffen und den Banner schließen können. Bleibt der Fokus hinter dem Banner auf der Seite hängen, ist er für Tastaturnutzer ein Hindernis.

2. Sichtbarer Fokus

Bei jedem Tastendruck muss erkennbar sein, wo Sie gerade sind. Fehlt der Rahmen, liegt es meist an einer Zeile im Theme, die den Standard-Fokus abschaltet. Das lässt sich im Zusatz-CSS beheben, ohne den Banner selbst zu ändern.

3. Kontrast der Schrift

Der Maßstab ist Erfolgskriterium 1.4.3: Text braucht ein Kontrastverhältnis von mindestens 4,5:1, großer Text von mindestens 3:1 (W3C, WCAG 2.2, Understanding 1.4.3, Stand der Seite 06.09.2026, abgerufen 02.11.2026). Prüfen können Sie das in den Entwicklerwerkzeugen: Taste F12, Element anklicken, den Farbwert im Stilbereich ansehen; Chrome und Firefox zeigen dort das Verhältnis an. Typischer Fehler: Hellgrauer Text auf weißem Banner oder weißer Text auf einer Markenfarbe, die zu hell ist.

4. Kontrast von Schaltflächen und Schaltern

Für Rahmen, Schalter und Zustände gilt Kriterium 1.4.11: mindestens 3:1 gegen die angrenzende Farbe (W3C, WCAG 2.2, Understanding 1.4.11, Stand der Seite 06.09.2026, abgerufen 02.11.2026). Das betrifft besonders die Schalter pro Kategorie („Statistik“, „Marketing“): Ein blasser Schalter, bei dem man nicht sieht, ob er an oder aus ist, fällt durch.

5. Klickfläche von mindestens 24 × 24 Pixeln

Kriterium 2.5.8 verlangt für Bedienelemente mindestens 24 × 24 CSS-Pixel, oder genug Abstand zu den Nachbarn (W3C, WCAG 2.2, Understanding 2.5.8, Stand der Seite 11.05.2026, abgerufen 02.11.2026). Kleine Textlinks wie „Details anzeigen“ in einer Zeile mit anderen Links sind ein typischer Fall. Am Handy sind große Flächen ohnehin leichter zu treffen. Das W3C stellt in der Erläuterung klar: Die Größenregel gilt nicht für Elemente, die ein nach dem Laden eingeblendeter Cookie-Banner verdeckt, wohl aber für die Elemente im Banner selbst.

6. „Ablehnen“ ist so leicht erreichbar wie „Zustimmen“

Das ist zugleich eine Barrierefreiheits- und eine Abmahnfrage. Wer ohne Maus arbeitet, braucht für „Ablehnen“ nicht mehr Tastendrücke als für „Alle akzeptieren“. Zählen Sie nach: Wie oft müssen Sie Tab drücken, bis Sie ablehnen können? Der rechtliche Stand dazu steht in der Info Cookie-Banner-Abmahnung.

7. Verständliche Texte und Handy-Ansicht

Kurze Sätze, klare Beschriftung („Alle ablehnen“, nicht „Weiter ohne Zustimmung zu Verbesserungen“) und ein Banner, der bei vergrößerter Schrift nicht abgeschnitten wird. Stellen Sie am Handy die Schrift auf die größte Stufe und öffnen Sie die Seite neu. Sind Schaltflächen nicht mehr erreichbar oder muss man im Banner scrollen, um „Ablehnen“ zu finden, ist die Bedienung für viele Menschen zu mühsam.

Und der Screenreader?

Ob ein Screenreader den Banner richtig vorliest, mit Rolle, Titel und den Namen der Schalter, zeigt nur ein Test mit einem Screenreader, etwa NVDA unter Windows oder VoiceOver am Mac. Ein automatischer Test findet fehlende Beschriftungen, aber nicht jede Verständnisfrage. Für den ersten Überblick nutzen Sie unseren kostenlosen Barrierefreiheits-Check. Er sieht Alternativtexte, Kontraste und Formularbeschriftungen der Seite und ersetzt keinen Test mit Menschen.

Was Sie selbst beheben können und was nicht

Selbst: Texte und Beschriftungen im Plugin ändern, Farben anpassen, den Fokusrahmen im Zusatz-CSS wieder einschalten.

Abgeben: Wenn der Banner Skripte nicht wirklich blockiert, wenn das Theme und das Plugin sich bei Fokus und Farben gegenseitig überschreiben oder wenn Sie einen Nachweis brauchen, dass vor der Einwilligung nichts zu Dritten fließt. Unsere Cookie-Banner-Einrichtung kümmert sich um die Technik: Skripte blockieren, „Ablehnen“ so leicht wie „Zustimmen“, Nachweis als PDF. Für die Prüfung der übrigen Seite auf Barrierefreiheit gibt es den BFSG-Check.

Ob Sie überhaupt einen Banner brauchen, hängt davon ab, was Ihre Seite beim Besucher speichert. Eine Seite ohne Auslöser kommt ohne aus; wie das geht, steht im Beitrag Website ohne Cookie-Banner. Wer prüfen will, welche Tracker und Cookies die Seite tatsächlich setzt, nutzt den Tracker-Check.

Kurz zusammengefasst

1. Mit Tab durchgehen: Jede Schaltfläche muss erreichbar sein.
2. Der Fokus muss sichtbar sein.
3. Text mindestens 4,5:1, große Schrift 3:1.
4. Rahmen und Schalter mindestens 3:1.
5. Klickflächen mindestens 24 × 24 Pixel oder genug Abstand.
6. „Ablehnen“ so erreichbar wie „Zustimmen“.
7. Verständliche Texte, am Handy auch bei großer Schrift nutzbar.

Zehn Minuten reichen für einen ersten Befund. Wer die Pflichten rund um die Barrierefreiheit insgesamt einordnen will, liest den Beitrag Barrierefreiheit: Pflicht für Ihre Website?.