Skip to content
Mera News

Publisher guide, chapter 3

Pop-ups and consent

Last reviewed November 2026

Every box that appears over an article stands between the reader and the reason they came. Some are required by law. Many are not. This chapter covers what Google asks for, what European regulators have said about consent, and how to build a prompt that works with a keyboard and a screen reader. It isn't legal advice, so check your banner with your own counsel.

What Google asks for

Google describes intrusive interstitials as page elements that block the reader's view of the content, and warns that they may lead to poor search performance. Its guidance is specific:

  • Don't cover the whole page.
  • Don't send the reader to a separate page for consent or input. If every URL redirects to one consent page, all but that page can drop out of search results.
  • Use banners that take up a small fraction of the screen instead of full-page interstitials.
  • Apply the same care to promotional dialogs of every kind, including newsletter prompts and app install prompts.

For app installs, Google points to browser-supported options, such as Smart App Banners in Safari, or a plain HTML banner linking to the right store.

Interstitials that are legally required are exempt from this guidance. Age gates are Google's example. If you need one, keep the content on the page beneath the overlay so it can still be indexed.

The Better Ads Standards cover advertising. Pop-up ads are listed on both desktop and mobile. On mobile, prestitial ads are listed with or without a countdown. On desktop, the listed format is the prestitial with a countdown, and one that can be dismissed straight away doesn't fall below the standard.

What European regulators have said about consent

The European Data Protection Board (EDPB) has published guidelines on consent and a report from its cookie banner taskforce. The taskforce report records a minimum threshold agreed for handling complaints, and national rules still apply, so treat these points as a baseline.

  • Nothing that needs consent runs first. Cookies that require consent can't be set until the reader has agreed by a positive action.
  • Scrolling isn't consent. The guidelines say scrolling or swiping will not under any circumstances count as a clear and affirmative action.
  • Pre-ticked boxes aren't consent. The same goes for silence, or simply carrying on with the service.
  • Offer a way to refuse. A vast majority of authorities in the taskforce saw a banner with no refuse option on any layer with a consent button as an infringement.
  • Don't hide the refusal. A refuse link buried in a paragraph, with nothing to draw attention to it, doesn't lead to valid consent. Button colours and contrast are assessed case by case.
  • Access can't depend on accepting. The guidelines give a page that blocks all content until the reader clicks "Accept cookies" as an example of consent that is not freely given.
  • Withdrawal must be as easy as agreeing. If consent took one click, withdrawing it should too. A permanent link in a visible, standard place is one option, and the taskforce also mentions a small icon.

Build a prompt everyone can use

A banner that doesn't block the page

A small banner lets the reader carry on, which is what Google prefers. It still has to meet WCAG 2.2. Success criterion 2.4.11, Focus Not Obscured (Minimum), fails if a sticky banner entirely hides the item that has keyboard focus. Add scroll padding equal to the banner's height:

html {
  scroll-padding-bottom: 96px; /* the banner's height */
}

Overlay the banner, or reserve its space, so it doesn't push the article down and add layout shift.

A modal dialog

If the prompt must stop the reader, build it as a real modal dialog using the W3C pattern.

<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>
  • Move focus into the dialog when it opens.
  • Tab and Shift + Tab cycle through the controls inside the dialog and wrap at each end.
  • Escape closes the dialog. Treat that as no choice made, never as acceptance.
  • When it closes, return focus to the element that opened it. If the dialog opened on page load, move focus to the start of the content.

On mobile

  • Anchor the banner to the bottom of the screen, and keep the headline visible above it.
  • Stack the buttons at full width so each is easy to tap, with Accept and Reject at the same size.
  • Keep the text short and move the detail to a second layer.
  • Check the layout at 320 CSS pixels wide and with text enlarged to 200%. The buttons must stay reachable without scrolling sideways.

On desktop

  • Use a bottom bar or a corner panel, and leave the article clear.
  • Make every control work with the keyboard, with a visible focus indicator.
  • Keep text at a contrast ratio of at least 4.5:1, or 3:1 for large text.

Checklist

  • Load your homepage and an article with a fresh browser profile, on a phone and on a desktop. Count what appears over the content.
  • Remove every full-page overlay that the law doesn't require.
  • Remove any redirect to a separate consent page.
  • Confirm no tag that needs consent fires before the reader agrees.
  • Put a refuse option wherever there is an accept option, as a button of equal weight.
  • Remove pre-ticked boxes and any logic that counts scrolling as consent.
  • Add a permanent link or icon for changing privacy choices, on every page.
  • Tab through the banner with no mouse, and confirm focus stays visible and never disappears behind it.
  • Test a modal with a screen reader, including Escape and focus return.
  • Replace custom app install pop-ups with a small banner.

Sources