So wird die erste Hürde auf deiner Website nicht zur letzten

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.

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“).

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“.

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 -Elemente für alle Aktionen, keine
  -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.

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.