So gestalten Sie ein konformes und nutzerfreundliches Cookie-Banner

Ein konformes, nutzerfreundliches Cookie-Banner zeigt auf dem ersten Bildschirm klare Optionen, typischerweise „Alle akzeptieren“, „Alle ablehnen“ und „Anpassen“, mit gleicher optischer Gewichtung. Es erklärt die Zwecke in einfacher Sprache, lässt nicht notwendige Cookies deaktiviert, bis der Besucher entschieden hat, funktioniert mit Tastatur und Screenreader, verschiebt das Seitenlayout nicht und lässt Menschen ihre Meinung später ändern.

Was sollte die erste Ebene eines Cookie-Banners enthalten?

Die erste Ebene braucht genug Informationen für eine informierte Entscheidung und gleich einfache Wege, zuzustimmen oder abzulehnen. Alles andere kann einen Klick tiefer liegen.

Nehmen Sie diese Elemente auf:

• Eine kurze Zweckangabe, die nennt, wofür Sie Cookies verwenden, etwa für Analyse und Werbung, und darauf hinweist, wenn Partner beteiligt sind.
• Drei gleich prominente Aktionen: Alle akzeptieren, Alle ablehnen und Anpassen, mit gleicher Größe, gleichem Stil und auf derselben Ebene.
• Einen Link zu Ihrer Cookie-Richtlinie für alle Details.
• Die Zahl der Anbieter, wenn Sie das IAB Transparency & Consent Framework nutzen, denn TCF v2.2 verlangt die Angabe der Anbieterzahl auf der ersten Ebene. Siehe IAB TCF 2.2 erklärt.

Beispieltext für die erste Ebene:

Wir verwenden Cookies, damit diese Website funktioniert, und mit Ihrer Erlaubnis, um gemeinsam mit unseren Partnern Besucherzahlen zu messen und relevante Werbung anzuzeigen. Sie können alle akzeptieren, alle ablehnen oder nach Kategorie wählen und Ihre Entscheidung jederzeit unter „Cookie-Einstellungen“ ändern.

Vermeiden Sie eine Überschrift wie „Ihre Privatsphäre ist uns wichtig“ mit einem einzigen „OK“-Button darunter. Ein Text, der beruhigend klingt, aber keine Zwecke nennt, informiert niemanden. Die meisten Dark Patterns, die Aufsichtsbehörden ins Visier nehmen, sind das genaue Gegenteil der Praktiken in diesem Leitfaden.

Wie sollte die Einstellungsebene funktionieren?

Auf der Einstellungsebene wählen Besucher nach Zweck aus. Fassen Sie Cookies in wenigen Kategorien zusammen, etwa notwendig, Präferenzen, Analyse und Marketing, und lassen Sie jede nicht notwendige Kategorie standardmäßig deaktiviert.

Zeigen Sie für jede Kategorie eine Beschreibung in einem Satz, einige konkrete Beispiele und die beteiligten Anbieter. Kennzeichnen Sie die Kategorie „notwendig“ als „immer aktiv“, statt einen Schalter anzubieten, der nichts bewirkt. Bieten Sie „Auswahl speichern“ neben „Alle akzeptieren“ und „Alle ablehnen“ an, ohne eine der Optionen optisch zu bevorzugen.

Halten Sie die Ebene übersichtlich. Eine lange Wand aus Anbieter-Schaltern erschwert eine informierte Entscheidung, statt sie zu erleichtern. Legen Sie Details auf Anbieterebene in einen aufklappbaren Bereich für alle, die sie sehen möchten.

Wo sollte das Banner auf der Seite platziert werden?

Es gibt nicht die eine konforme Position. Entscheidend ist, dass das Banner wahrgenommen wird, die Ablehnungsoption nicht versteckt und die Seite nicht beeinträchtigt.

• Leiste am unteren Rand oder Box in der Ecke: stört weniger und eignet sich für die meisten Websites, solange nicht notwendige Cookies deaktiviert bleiben, bis eine Wahl getroffen wurde.
• Zentriertes Modal: erzwingt eine Entscheidung vor der Nutzung, muss aber trotzdem eine gleichwertige Ablehnung bieten, sonst wirkt es wie eine Cookie-Wall.
• Mobil: Verdecken Sie nicht den ganzen Bildschirm, ordnen Sie die Buttons in voller Breite und mit identischem Stil untereinander an und halten Sie sie in Daumenreichweite.

Performance gehört zum Design. Rendern Sie das Banner als fest positioniertes Overlay, damit es keine Inhalte nach unten schiebt, was sich negativ auf den Cumulative Layout Shift (CLS) auswirken würde. Ein großes Text-Banner kann außerdem als Largest-Contentful-Paint-Element (LCP) der Seite gemessen werden, und aufwendige Klick-Handler können die Interaction to Next Paint (INP) verlangsamen. Unser Leitfaden zu Cookie-Bannern und Core Web Vitals behandelt die Details.

Wie mache ich ein Cookie-Banner barrierefrei?

Bauen Sie es aus semantischem HTML: echte Buttons, ein beschrifteter Container, sichtbare Fokus-Stile und ausreichender Farbkontrast. Wer das Banner nicht bedienen kann, kann weder einwilligen noch ablehnen.

<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Ihre Cookie-Auswahl</h2>
  <p id="cc-desc">
    Wir verwenden Cookies für Analyse und Werbung nur, wenn Sie es erlauben.
    <a href="/cookie-policy">Unsere Cookie-Richtlinie lesen</a>
  </p>
  <button type="button">Alle ablehnen</button>
  <button type="button">Anpassen</button>
  <button type="button">Alle akzeptieren</button>
</div>

Einige Regeln machen den Unterschied:

1. Verwenden Sie <button>-Elemente statt klickbarer <div>-Elemente, damit Tastaturen und assistive Technologien von vornherein funktionieren.
2. Blockiert das Banner die Seite, ergänzen Sie aria-modal="true", verschieben Sie den Fokus in das Banner, halten Sie ihn dort, bis eine Wahl getroffen wurde, und geben Sie ihn dann an die Seite zurück.
3. Erfüllen Sie bei jedem Button, auch beim Ablehnen-Button, den WCAG-AA-Kontrast (4,5:1 für normalen Text).
4. Geben Sie jedem Kategorie-Steuerelement einen zugänglichen Namen und Zustand, etwa eine beschriftete Checkbox oder ein Element mit role="switch" und aria-checked.
5. Unterstützen Sie Zoom und kleine Bildschirme, ohne eine der drei Aktionen auszublenden.

Wie sollte sich das Banner nach einer Entscheidung verhalten?

Setzen Sie die Entscheidung sofort um und speichern Sie sie. Akzeptiert jemand Analyse, laden Sie diese Tags sofort. Lehnt jemand ab oder widerruft später, laden Sie sie nicht mehr und entfernen Sie die First-Party-Cookies, über die Sie die Kontrolle haben.

Achten Sie dann auf die Details:

• Dauerhafter Zugang: Ergänzen Sie einen Link „Cookie-Einstellungen“ im Footer oder einen kleinen schwebenden Button, denn der Widerruf der Einwilligung muss so einfach sein wie ihre Erteilung.
• Sinnvolles erneutes Nachfragen: Zeigen Sie das Banner nicht bei jedem Besuch. Fragen Sie nach einem angemessenen Zeitraum erneut oder wenn sich Ihre Zwecke oder Anbieter wesentlich ändern.
• Regionales Verhalten: Besucher aus der EU und dem Vereinigten Königreich brauchen eine Opt-in-Einwilligung. Kalifornien setzt auf ein Opt-out-Modell mit einem Link „Do Not Sell or Share My Personal Information“ und der Beachtung von Global-Privacy-Control-Signalen.
• Nachweise: Speichern Sie, was jeder Besucher wann gewählt hat und welche Banner-Version er gesehen hat, damit Sie die Einwilligung später nachweisen können.

Was sollte ich vor dem Launch prüfen?

Gehen Sie diese Abfolge durch, bevor Sie ein neues oder überarbeitetes Banner veröffentlichen:

1. Prüfen Sie in einer sauberen Browsersitzung, dass vor einer Entscheidung nichts Nicht-Notwendiges geladen wird.
2. Klicken Sie auf „Alle ablehnen“ und prüfen Sie, dass Analyse- und Werbeanfragen auf allen Seiten blockiert bleiben.
3. Stimmen Sie zu, widerrufen Sie dann über den Footer-Link und prüfen Sie, dass die Tags stoppen.
4. Durchlaufen Sie den gesamten Ablauf nur mit der Tastatur und anschließend mit einem Screenreader.
5. Testen Sie auf einem kleinen Smartphone-Bildschirm im Hochformat.
6. Messen Sie CLS, LCP und INP bei sichtbarem Banner.
7. Prüfen Sie das Banner in jeder Sprache und Region, die Sie bedienen.

Fazit

Ein gutes Cookie-Banner ist ehrlich, ausgewogen und schnell: gleichwertige Optionen, klare Worte, barrierefreie Bedienelemente und ein Verhalten, das zu dem passt, was auf den Buttons steht. Gestalten Sie für den Besucher, der ablehnen möchte, mit derselben Sorgfalt wie für den, der zustimmt. Tools wie Cookiesh können geo-targetierte Banner für DSGVO, CCPA und LGPD über einen Loader ausspielen, der keinen Layout-Shift verursacht, sodass sich Ihr Team auf Texte und Design konzentrieren kann.

Dieser Artikel dient der allgemeinen Information und stellt keine Rechtsberatung dar. Für Entscheidungen zu Ihrer konkreten Situation wenden Sie sich an qualifizierte Datenschutzfachleute.