Leitfaden für Verlage, Kapitel 3
Pop-ups und Einwilligung
Zuletzt geprüft im November 2026
Jedes Fenster, das sich über einen Artikel legt, steht zwischen dem Leser und dem Grund, aus dem er gekommen ist. Manche sind gesetzlich vorgeschrieben. Viele nicht. Dieses Kapitel behandelt, was Google verlangt, was europäische Aufsichtsbehörden zur Einwilligung gesagt haben und wie Sie eine Abfrage bauen, die mit Tastatur und Screenreader funktioniert. Es ist keine Rechtsberatung, lassen Sie Ihr Banner daher von Ihrer eigenen Rechtsberatung prüfen.
Was Google verlangt
Google beschreibt aufdringliche Interstitials als Seitenelemente, die dem Leser die Sicht auf den Inhalt versperren, und warnt, dass sie zu schlechteren Ergebnissen in der Suche führen können. Die Hinweise sind konkret:
- Decken Sie nicht die ganze Seite ab.
- Schicken Sie den Leser nicht für Einwilligung oder Eingaben auf eine separate Seite. Wenn jede URL auf eine einzige Einwilligungsseite weiterleitet, können alle außer dieser Seite aus den Suchergebnissen fallen.
- Verwenden Sie Banner, die nur einen kleinen Teil des Bildschirms einnehmen, statt Interstitials über die ganze Seite.
- Gehen Sie mit Werbedialogen jeder Art genauso sorgfältig um, auch mit Newsletter- und App-Installationsaufforderungen.
Für App-Installationen verweist Google auf Optionen, die der Browser unterstützt, etwa Smart App Banner in Safari oder ein einfaches HTML-Banner mit Link zum passenden Store.
Gesetzlich vorgeschriebene Interstitials sind von diesen Hinweisen ausgenommen. Altersabfragen sind Googles Beispiel. Wenn Sie eine brauchen, lassen Sie den Inhalt unter dem Overlay auf der Seite, damit er weiterhin indexiert werden kann.
Die Better Ads Standards betreffen Werbung. Pop-up-Anzeigen sind für Desktop und Mobilgeräte aufgeführt. Auf Mobilgeräten sind Prestitial-Anzeigen mit oder ohne Countdown aufgeführt. Auf dem Desktop ist das aufgeführte Format das Prestitial mit Countdown, und eines, das sich sofort schließen lässt, fällt nicht unter den Standard.
Was europäische Aufsichtsbehörden zur Einwilligung gesagt haben
Der Europäische Datenschutzausschuss (EDSA) hat Leitlinien zur Einwilligung und einen Bericht seiner Cookie-Banner-Taskforce veröffentlicht. Der Bericht der Taskforce hält eine Mindestschwelle fest, auf die man sich für die Bearbeitung von Beschwerden geeinigt hat, und nationale Vorschriften gelten weiterhin. Behandeln Sie diese Punkte daher als Basis.
- Nichts, was eine Einwilligung braucht, läuft zuerst. Cookies, die eine Einwilligung erfordern, dürfen erst gesetzt werden, wenn der Leser durch eine aktive Handlung zugestimmt hat.
- Scrollen ist keine Einwilligung. Die Leitlinien sagen, dass Scrollen oder Wischen unter keinen Umständen als eindeutige, bestätigende Handlung gilt.
- Vorab angekreuzte Kästchen sind keine Einwilligung. Dasselbe gilt für Schweigen oder dafür, den Dienst einfach weiter zu nutzen.
- Bieten Sie eine Möglichkeit zur Ablehnung. Die große Mehrheit der Behörden in der Taskforce sah ein Banner ohne Ablehnungsoption auf einer Ebene mit einem Zustimmungsbutton als Verstoß.
- Verstecken Sie die Ablehnung nicht. Ein Ablehnen-Link, der in einem Absatz vergraben ist und auf den nichts aufmerksam macht, führt nicht zu einer gültigen Einwilligung. Buttonfarben und Kontrast werden im Einzelfall beurteilt.
- Der Zugang darf nicht vom Akzeptieren abhängen. Die Leitlinien nennen als Beispiel für eine nicht freiwillig erteilte Einwilligung eine Seite, die alle Inhalte blockiert, bis der Leser auf „Cookies akzeptieren“ klickt.
- Der Widerruf muss so einfach sein wie die Zustimmung. Wenn die Einwilligung einen Klick gekostet hat, sollte auch der Widerruf einen kosten. Ein dauerhafter Link an einer sichtbaren, üblichen Stelle ist eine Möglichkeit, und die Taskforce nennt auch ein kleines Symbol.
Eine Abfrage bauen, die alle nutzen können
Ein Banner, das die Seite nicht blockiert
Ein kleines Banner lässt den Leser weitermachen, und das bevorzugt Google. Es muss trotzdem WCAG 2.2 erfüllen. Das Erfolgskriterium 2.4.11, Fokus nicht verdeckt (Minimum), ist nicht erfüllt, wenn ein fixiertes Banner das Element mit dem Tastaturfokus vollständig verdeckt. Fügen Sie ein Scroll-Padding in Höhe des Banners hinzu:
html {
scroll-padding-bottom: 96px; /* the banner's height */
}
Legen Sie das Banner als Overlay über die Seite oder reservieren Sie seinen Platz, damit es den Artikel nicht nach unten schiebt und keine Layout-Verschiebung auslöst.
Ein modaler Dialog
Wenn die Abfrage den Leser anhalten muss, bauen Sie sie als echten modalen Dialog nach dem Muster des W3C.
<div role="dialog" aria-modal="true"
aria-labelledby="consent-title" aria-describedby="consent-text">
<h2 id="consent-title">Your privacy choices</h2>
<p id="consent-text">Choose whether this site may use cookies for advertising.</p>
<button type="button">Reject all</button>
<button type="button">Accept all</button>
<button type="button">Choose settings</button>
</div>
- Setzen Sie den Fokus in den Dialog, wenn er sich öffnet.
- Tab und Umschalt + Tab wechseln zwischen den Bedienelementen im Dialog und springen an jedem Ende zum anderen Ende.
- Escape schließt den Dialog. Werten Sie das als nicht getroffene Entscheidung, nie als Zustimmung.
- Geben Sie beim Schließen den Fokus an das Element zurück, das den Dialog geöffnet hat. Wenn sich der Dialog beim Laden der Seite geöffnet hat, setzen Sie den Fokus an den Anfang des Inhalts.
Auf Mobilgeräten
- Verankern Sie das Banner am unteren Bildschirmrand und lassen Sie die Schlagzeile darüber sichtbar.
- Stapeln Sie die Buttons in voller Breite, damit jeder leicht zu treffen ist, mit Akzeptieren und Ablehnen in gleicher Größe.
- Halten Sie den Text kurz und verlegen Sie die Details auf eine zweite Ebene.
- Prüfen Sie das Layout bei 320 CSS-Pixeln Breite und mit auf 200 % vergrößertem Text. Die Buttons müssen ohne seitliches Scrollen erreichbar bleiben.
Auf dem Desktop
- Verwenden Sie eine Leiste am unteren Rand oder ein Panel in einer Ecke und lassen Sie den Artikel frei.
- Machen Sie jedes Bedienelement per Tastatur nutzbar, mit sichtbarem Fokusindikator.
- Halten Sie beim Text ein Kontrastverhältnis von mindestens 4,5:1 ein, bei großem Text 3:1.
Checkliste
- Laden Sie Ihre Startseite und einen Artikel mit einem frischen Browserprofil, auf einem Telefon und auf einem Desktop. Zählen Sie, was sich über den Inhalt legt.
- Entfernen Sie jedes Overlay über die ganze Seite, das das Gesetz nicht verlangt.
- Entfernen Sie jede Weiterleitung auf eine separate Einwilligungsseite.
- Bestätigen Sie, dass kein Tag, das eine Einwilligung braucht, vor der Zustimmung des Lesers ausgelöst wird.
- Bieten Sie überall, wo es eine Akzeptieren-Option gibt, eine Ablehnen-Option als gleichwertigen Button.
- Entfernen Sie vorab angekreuzte Kästchen und jede Logik, die Scrollen als Einwilligung zählt.
- Fügen Sie auf jeder Seite einen dauerhaften Link oder ein Symbol zum Ändern der Datenschutzentscheidungen hinzu.
- Gehen Sie ohne Maus per Tab durch das Banner und bestätigen Sie, dass der Fokus sichtbar bleibt und nie dahinter verschwindet.
- Testen Sie einen modalen Dialog mit einem Screenreader, einschließlich Escape und Rückgabe des Fokus.
- Ersetzen Sie eigene Pop-ups zur App-Installation durch ein kleines Banner.
Quellen
- Interstitials and dialogs, Google Search Central
- The Initial Better Ads Standards, Coalition for Better Ads
- Desktop prestitial ad with countdown, Coalition for Better Ads
- Mobile prestitial ad, Coalition for Better Ads
- Guidelines 05/2020 on consent under Regulation 2016/679, Europäischer Datenschutzausschuss
- Report of the work undertaken by the Cookie Banner Taskforce, Europäischer Datenschutzausschuss
- Understanding Focus Not Obscured (Minimum), W3C WAI
- Dialog (Modal) Pattern, W3C WAI
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C
- Optimize Cumulative Layout Shift, web.dev