Cookie Banner
So wird die erste Hürde auf deiner Website nicht zur letzten
Weil ein Cookie-Banner meistens die erste Hürde ist – und für viele leider auch die letzte.
Weil der Gesetzgeber diese Barriere abbauen will, ist eine informierte und freiwillige Einwilligung nach der DSGVO nur dann gültig, wenn sie auch barrierefrei eingeholt wird. Das heißt: Alle müssen die Einwilligung verstehen, verweigern oder anpassen können – egal, wie sie auf die Website zugreifen. Und natürlich auch dann, wenn sie kognitiv eingeschränkt sind.
Tipp: Im Nachwort findest du ein Beispiel dafür, wie ein Cookie Banner in einfacher Sprache „übersetzt“ aussehen kann.
Wann musst du das machen?
- Bevor du ein Projektteam aufbaust.
- Bevor du Tools oder Agenturen für Barrierefreiheit buchst.
- Sobald du alle Barrieren erfasst (SOP 6) und die Beseitigung der Barrieren priorisiert (SOP 8) hast.
Welches Gesetz verlangt das?
- DSGVO Art. 6, 7, 13: Regeln die Freiwilligkeit, die informierte Einwilligung und die Nachweispflicht.
- TTDSG § 25: Fordert eine vorherige Einwilligung für das Setzen von Cookies.
- EAA/BFSG: Der Consent-Prozess muss für alle zugänglich sein – auch ohne Maus oder bei Seh- und Kognitionsbeeinträchtigungen.
- WCAG 2.1: Insbesondere Kriterien wie 2.1.1 (Keyboard), 2.4.3 (Focus Order), 4.1.2 (Name, Role, Value) und 1.3.2 (Meaningful Sequence).
Der Prozess im Detail
Schritt für Schritt – zum Aufklappen und Abhaken.
1🟧 Phase 1: Die richtige CMP auswählen und konfigurieren›
Nicht jede Consent-Management-Plattform ist von Haus aus barrierefrei. Prüfe mit den drei nachfolgenden Punkten, ob deine CMP tatsächlich barrierefrei ist. Falls nicht: Konfiguriere sie sauber oder wähle eine Lösung, die die grundlegenden Anforderungen erfüllt.
Hier die Anforderungen:
- Tastaturbedienbarkeit: Alle Buttons („Annehmen“, „Ablehnen“, „Einstellungen“) müssen mit der Tab-Taste erreichbar sein.
- Fokus-Management: Der Fokus muss direkt nach dem Laden der Seite auf dem Banner landen und darf diesen nicht verlassen können, solange er offen ist. Das wird beispielsweise dadurch erreicht, dass der Hintergrund verschwommen bzw. Blurry ist und nur die Datenschutz-Hinweise klar erkennbar sind.
- Kein Tracking vor Einwilligung: Es dürfen absolut keine nicht-essenziellen Cookies gesetzt werden, bevor die Zustimmung erteilt wurde.
2🟨 Phase 2: Die Tastatursteuerung aktiv umsetzen›
Eine logische und intuitive Bedienung per Tastatur ist entscheidend.
- Logische Tab-Reihenfolge: Der Fokus sollte logisch durch den Banner wandern, z. B. vom Text zu den Optionen.
- Sichtbarer Fokusindikator: Der sichtbare Rahmen um das fokussierte Element darf niemals per CSS (outline: none) entfernt werden.
- Klare Aktionen: Enter muss die Auswahl bestätigen. Escape sollte den Banner schließen, wenn dies eine logische Option ist (z. B. bei „später entscheiden“).
3🟩 Phase 3: Texte leicht verständlich formulieren›
Natürlich müssen die Texte ehrlich, transparent und einfach sein. Nutze einfache Sprache und verlinke die Datenschutzerklärung. Konkret heißt das:
- Klarer Zweck: „Wir verwenden Cookies für Statistiken & Werbung“ ist besser als ein vages „Wir verwenden Cookies zur Optimierung…“.
- Aktive Wahl betonen: „Du kannst selbst entscheiden, was gespeichert wird“ ist besser als ein irreführendes „Mit der weiteren Nutzung stimmen Sie zu“.
- Eindeutige Button-Beschriftungen: „Nur essenzielle Cookies zulassen“ ist klarer als „Nur notwendige Cookies akzeptieren“.
4🟥 Phase 4: Die technische Umsetzung kontrollieren›
Auch die Semantik im Hintergrund muss stimmen, damit Screenreader den Banner korrekt interpretieren können. Du kennst die technischen Anforderungen bereits aus vorherigen SOP´s:
- Verwende echte Buttons: Nutze <button>-Elemente für alle Aktionen, keine <div>-Elemente mit JavaScript.
- Nutze korrekte Rollen und Attribute: Setze role=“dialog“ und aria-modal=“true“, damit der Banner als modales Dialogfenster erkannt wird.
- Setze sinnvolle ARIA-Labels: Verknüpfe den Banner-Titel über aria-labelledby mit dem Dialog, damit dieser als Erstes vorgelesen wird.
- Setze auch den Fokus programmatisch: Der Fokus muss aktiv per JavaScript (element.focus()) auf den Banner gelenkt werden.
5🟦 Phase 5: Nachweisbarkeit und Dokumentation sicherstellen›
Das ist eine Anforderung der DSGVO: Die eingeholte Einwilligung muss nachweisbar sein, um vor Aufsichtsbehörden bestehen zu können. Das heißtÖ
- Du musst die Einwilligung dokumentieren: Ein Opt-in muss mit Zeitstempel und einer eindeutigen Nutzer-ID gespeichert werden.
- Nutze die Exportfunktion: Deine CMP sollte einen Export der Einwilligungsdaten ermöglichen.
- Tracke NIEMALS ohne Zustimmung: Überprüfe im network-Tab deines Browsers, dass vor der Zustimmung keine Tracking-Skripte geladen werden.
Wie bei allen technischen Anforderungen in allen Phasen gilt auch hier: Falls du nicht weißt, wie du das technische umsetzen sollst, sprich mit den Personen in deinen Team, die es wissen und gib ihnen diese SOP, damit sie wissen, was sie machen müssen.
Ergebnis
Am Ende dieser SOP hast du:
- Einen Cookie-Banner, den alle Menschen nutzen können.
- Texte, die verständlich, ehrlich und vollständig sind.
- Eine DSGVO-konforme Einwilligung mit lückenlosem Nachweis.
- Keinerlei Tracking ohne explizite Zustimmung.
- Einen soliden und vertrauenswürdigen ersten Eindruck – auch bei der Aufsichtsbehörde.
Die E-Mail-Vorlage zu den „neuen Datenschutzeinstellungen“ ist dazu gedacht, an deine bestehenden E-Mail-Abonnenten oder registrierten Nutzer geschickt zu werden.Diese E-Mail-Vorlage hilft dir dabei, deine Nutzer transparent über dein verbessertes Cookie-Management und ihre neuen Einstellungsmöglichkeiten zu informieren. Das schafft Vertrauen und zeigt, dass du Datenschutz ernst nimmst.
Betreff: Wichtige Informationen: Deine Datenschutzeinstellungen auf [Deine Webseite]
Hallo [Vorname des Empfängers oder „du“] / Hallo du,
wir legen großen Wert auf deine Privatsphäre und möchten dir stets die bestmögliche Kontrolle über deine Daten geben. Deshalb haben wir unser Cookie-Management auf [Deine Webseite] überarbeitet und für dich noch transparenter und benutzerfreundlicher gestaltet.
Was ist neu für dich?
Ab sofort hast du noch mehr Einfluss darauf, welche Cookies auf [Deine Webseite] zum Einsatz kommen. Wenn du unsere Seite das nächste Mal besuchst, wirst du unseren aktualisierten Cookie-Banner sehen. Dort kannst du:
- Deine Einstellungen detailliert anpassen: Entscheide selbst, ob du z.B. Analyse- oder Marketing-Cookies zulassen möchtest.
- Jederzeit deine Wahl ändern: Deine Zustimmung ist keine Einbahnstraße. Du kannst deine Einstellungen jederzeit über einen Link in unserer Datenschutzerklärung anpassen.
- Schnelle Übersicht: Der Banner gibt dir eine klare und verständliche Erklärung, wofür wir welche Cookies nutzen.
Warum tun wir das?
Dein Vertrauen ist uns wichtig. Mit dieser Verbesserung stellen wir sicher, dass unser Cookie-Management nicht nur den aktuellen Datenschutz-Vorgaben (wie der DSGVO) entspricht, sondern dir auch volle Kontrolle über deine Daten gibt.
Wir laden dich ein, unsere aktualisierte Datenschutzerklärung zu lesen, um alle Details zu erfahren:
[Link zum Button: „Zur Datenschutzerklärung“] (Dieser Link führt dich direkt zu allen wichtigen Informationen.)
Vielen Dank für dein Verständnis und dein Vertrauen!
Viele Grüße Dein Team von [Dein Unternehmen/Dein Projekt] [Link zu deiner Webseite] [Deine Social-Media-Links (optional)]
Fragen & Antworten
Darf der Cookie-Banner verschwinden, wenn ich einfach nur scrolle oder auf der Seite navigiere?
Nein, absolut nicht! Das sogenannte „Scroll-Opt-In“ oder „implizite Opt-In“ durch Weiternutzung der Webseite ist nicht DSGVO-konform . Eine Einwilligung muss immer eine aktive, bewusste Handlung sein (z.B. ein Klick auf einen Button). Der Banner muss sichtbar bleiben und darf erst verschwinden, nachdem der Nutzer eine explizite Entscheidung getroffen hat (Zustimmen, Ablehnen, Einstellungen speichern). Ansonsten ist die Einwilligung nicht freiwillig und transparent erteilt.
Was mache ich, wenn ein Nutzer meinen Cookie-Banner nicht bedient und einfach die Seite verlässt?
Das ist in Ordnung und sogar die rechtlich korrekte Handhabung . Wenn ein Nutzer den Banner nicht bedient und deine Seite schließt, darfst du keine Cookies setzen (außer den technisch notwendigen) , die einer Einwilligung bedürfen. Du hast keine Zustimmung erhalten, also gibt es auch kein Tracking. Wenn der Nutzer die Seite das nächste Mal besucht, muss der Banner erneut erscheinen, bis eine Entscheidung getroffen wird.
Muss der %22Alles ablehnen%22-Button genauso prominent sein wie der %22Alles akzeptieren%22-Button?
Eine separate Einstellungsseite (oft über einen Link im Footer der Webseite erreichbar, z.B. „Cookie-Einstellungen“) ist stark empfohlen und oft notwendig. Der Cookie-Banner bietet meist nur eine grobe Auswahl. Eine dedizierte Einstellungsseite ermöglicht es dem Nutzer, seine Präferenzen jederzeit zu ändern und detaillierte Einblicke in die einzelnen Cookie-Kategorien und Anbieter zu erhalten. Dies erfüllt das Gebot der leichten Widerruflichkeit und der Transparenz besser als nur der Banner.
Wie kann ich sicherstellen, dass mein Cookie-Banner auch auf Mobilgeräten barrierefrei ist?
Die Barrierefreiheit auf Mobilgeräten ist entscheidend. Achte auf:
- Responsive Design: Der Banner muss sich automatisch an verschiedene Bildschirmgrößen anpassen und immer gut lesbar bleiben.
- Touch-Optimierung: Buttons und Checkboxen müssen groß genug sein, um sie mit dem Finger gut bedienen zu können.
- Kontrast: Achte auf ausreichende Farbkontraste für eine gute Lesbarkeit auf kleinen Bildschirmen und bei unterschiedlichen Lichtverhältnissen.
- Fokus-Management: Auch hier muss der Fokus für Screenreader-Nutzer korrekt gesetzt werden, wenn der Banner erscheint.
- Keine Blockade: Der Banner sollte den Zugriff auf wichtige Inhalte nicht dauerhaft blockieren, bis eine Entscheidung getroffen wurde.
Was ist der Unterschied zwischen einem einfachen Cookie-Banner und einem Consent Management System (CMP)?
Ein einfacher Cookie-Banner ist in der Regel eine selbstgebaute Lösung, die grundlegende Funktionen zur Einholung der Einwilligung bietet. Er ist oft starr und erfordert manuelle Anpassungen, wenn sich Cookies ändern oder neue hinzukommen. Ein Consent Management System (CMP) hingegen ist eine professionelle Softwarelösung , die weit mehr kann. Es scannt deine Webseite automatisch nach Cookies, kategorisiert sie, aktualisiert die Texte im Banner, verwaltet die Einwilligungen DSGVO-konform (inkl. Nachweis), bindet gängige Dienste ein (z.B. Google Analytics, Facebook Pixel) und bietet detaillierte Einstellungsoptionen für Nutzer. Für die meisten Unternehmen mit komplexeren Webseiten ist ein CMP die deutlich sicherere und effizientere Lösung .