How to fix page content that isn't inside a landmark?

region page

The issue

Screen reader users often move around a page by its landmarks: banner, navigation, main, footer. Content that sits outside every landmark doesn’t appear in that list, so a notice, a promotional strip or a block of text between the header and the main content can be skipped entirely.

The cause is usually an element placed directly in <body> next to the landmarks: a cookie banner, an announcement bar, a skip link or a modal container. The page has landmarks, but not everything is in one.

Scope

The check runs only on pages that already have at least one landmark: <header>, <nav>, <main>, <aside>, <footer>, <form>, or an element with a landmark role such as banner, navigation, main, complementary, contentinfo, region or search. On those pages, each visible direct child of <body> that isn’t itself a landmark is reported. Scripts, styles, <noscript> and <template> are ignored.

A page with no landmarks at all isn’t reported by this rule. The bypass check covers that case.

How to check you have it

In probeo: the page reports region, “All page content should be contained by landmarks”, as moderate, on each direct child of <body> that isn’t a landmark. It is a best practice rule rather than a WCAG criterion.
By hand: in DevTools, collapse <body> to its direct children. Every visible one should be a <header>, <nav>, <main>, <aside> or <footer>, or carry a landmark role.
With a tool: axe DevTools has a rule with the same name. Screen readers can list a page’s landmarks, which shows what is left out.

The fix

Place every visible top-level element inside a landmark.

An announcement bar or skip link belongs inside the <header>. A cookie banner or a site-wide notice can be its own labeled region, such as <section aria-label="Cookie notice"> with role="region", or go inside the footer. Page content goes inside <main>.

<body>
  <header>
    <a href="#main" class="skip-link">Skip to content</a>
    <nav aria-label="Main">…</nav>
  </header>
  <main id="main">…</main>
  <footer>…</footer>
</body>

Done when: every visible direct child of <body> is a landmark, and the check above comes back clean.

Do not

Do not leave notices, banners or skip links directly in <body>.
Do not add role="region" without a label; an unlabeled region doesn’t help anyone find it.
Do not wrap content in landmarks that don’t fit it just to pass, such as a <nav> around a cookie notice.

FAQ

Our framework wraps the whole page in a div. Is that a problem?

Probeo reports it. A root <div> directly in <body>, such as <div id="root">, isn’t a landmark itself, so it is reported even when every landmark sits inside it. In that case the content is covered and the report is about the wrapper; making the landmarks direct children of <body> removes it.

Why is a page with no landmarks not reported here?

Because there is nothing to be outside of. That page is a bigger problem, and the bypass and main-landmark checks report it.

Does a hidden element count?

No. Hidden direct children of <body>, such as a closed dialog with the hidden attribute, are skipped.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.