probeo

Why should banner, main, contentinfo and aside landmarks be top-level?

landmark-main-is-top-level page

The issue

The page’s header, main content, footer and complementary content are meant to sit side by side at the top of the page’s structure. When one is nested inside another, such as a footer inside the main content, screen readers announce it as part of its parent. A user jumping between landmarks gets a structure that doesn’t match the page they see.

The cause is usually a layout wrapper: a <main> that also wraps the site footer, or a sidebar <aside> placed inside the <main> or a <nav>.

Scope

Four rules, one per role. Each visible landmark of that role is checked on its own, and fails when any element above it is also a landmark: banner, complementary, contentinfo, form, main, navigation, region or search.

  • landmark-banner-is-top-level: a banner inside another landmark.
  • landmark-main-is-top-level: a main inside another landmark.
  • landmark-contentinfo-is-top-level: a contentinfo inside another landmark.
  • landmark-complementary-is-top-level: an <aside> or role="complementary" inside another landmark.

All four are best-practice rules, related to WCAG 1.3.1.

How to check you have it

  • In probeo: the page reports landmark-banner-is-top-level, “Banner landmark should not be contained in another landmark”; landmark-main-is-top-level, “Main landmark should not be contained in another landmark”; landmark-contentinfo-is-top-level, “Contentinfo landmark should not be contained in another landmark”; or landmark-complementary-is-top-level, “Aside should not be contained in another landmark”. Each has moderate impact.
  • By hand: view the page source and look at what wraps the <header>, <main>, <footer> and <aside> elements.
  • With a tool: the accessibility tree in Chrome or Firefox DevTools shows landmarks nested under other landmarks.

The fix

Move the page’s header, main content, footer and sidebar so they are siblings, not inside one another.

The usual shape is a <header>, then a <main>, an optional <aside>, and a <footer>, all directly inside <body> or a non-landmark wrapper.

<!-- Before -->
<main>
  …
  <footer>…</footer>
</main>

<!-- After -->
<main>…</main>
<footer>…</footer>

Done when: no banner, main, contentinfo or complementary landmark sits inside another landmark, and the check above comes back clean.

Do not

  • Do not wrap the whole page, header and footer included, in a <main>.
  • Do not put the site footer inside a <form> or a <nav>.
  • Do not add landmark roles to wrappers just to group the layout.

FAQ

Can an aside go inside main?

Browsers and the ARIA specification allow an aside that relates to the main content to sit inside it. This rule treats any nesting as a problem, so an <aside> inside <main> is reported. If the aside is about the main content, a <div> or a <section> with a label avoids the report.

Does wrapping everything in a div matter?

No. A <div> has no landmark role, so the landmarks inside it are still top-level for this rule.

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.