No walls before the content

walls · Readability · weight 20 of 120

What we check

We look for an overlay that comes before your content in the page’s HTML: a cookie or consent banner, an age check, a newsletter sign-up, a paywall, or any pop-up or dialog. We find these by their usual markup (a dialog element, a modal role) and their usual names (cookie, consent, newsletter, paywall, popup, and so on).

The check fails if such an overlay comes before the main content and has more text than the content does, or if the page’s text opens with it. An overlay inside the main content is treated as part of the content. Otherwise, the check passes.

Why it matters

People see a banner floating over the page. A bot reading the HTML sees text in order, and if the first thing on the page is three paragraphs of cookie policy, that’s what it reads first — and sometimes all it reads. An assistant summarizing your site may describe your consent banner.

How to pass

Put the content first in the HTML, and the overlay after it. Its position on screen is set by the stylesheet, so moving it in the source doesn’t change how it looks:
```
<body>
  <main>…your content…</main>
  <div class="cookie-banner" role="dialog">…</div>
</body>
```
Or load the overlay with JavaScript after the page has loaded, or when someone scrolls or clicks.
Keep consent text short and link to the full policy rather than including it.
If your consent tool injects its banner at the top of the body, look for a setting that loads it at the end instead.

Back to the rules