AccessLint Rule: All page content should be contained within landmarks.

About this AccessLint rule

Screen reader users rely on landmarks to navigate through a page. Landmarks act as structural signposts, allowing users to jump directly to sections like the main content, navigation, or footer without reading through every element in sequence. When content sits outside any landmark region, screen readers may skip it entirely or present it as orphaned content with no structural context, making it harder to find and understand.

This rule checks that all visible page content is contained within an appropriate landmark element. Content that falls outside landmarks is effectively invisible to landmark-based navigation, which is one of the primary ways assistive technology users move through a page.

This issue relates to WCAG Success Criterion 1.3.1 Info and Relationships (Level A), which requires that the structure and relationships conveyed visually are also available programmatically. When content lacks a landmark container, the structural relationship between that content and the rest of the page is lost for assistive technology users.

Which landmarks to use

HTML5 introduced semantic elements that automatically map to ARIA landmark roles:

<header> (when not nested inside <article> or <section>) maps to banner
<nav> maps to navigation
<main> maps to main
<aside> maps to complementary
<footer> (when not nested inside <article> or <section>) maps to contentinfo
<section> maps to region only when it has an accessible name (via aria-label or aria-labelledby)
<form> maps to form only when it has an accessible name

Every piece of visible content on the page should be inside one of these elements. The <main> element should appear exactly once per page. If you use multiple landmarks of the same type (for example, two <nav> elements), give each one a distinct accessible name so users can tell them apart.

What can exist outside landmarks

Skip links and other hidden content that is not part of the visible page flow may exist outside landmarks. Screen reader users encounter skip links before entering the page structure, so placing them outside landmarks is acceptable.

How to fix it

Wrap all visible page content in the appropriate landmark elements. A typical page structure includes a <header> for the site banner and branding, one or more <nav> elements for navigation, a <main> element for the primary content, and a <footer> for site-wide footer content. Any supplementary content like sidebars belongs in <aside>. If you have a distinct section that doesn't fit these categories, use <section> with an aria-label or aria-labelledby attribute.

Review the page for stray elements like promotional banners, cookie notices, or decorative wrappers that sit directly inside <body> without a landmark ancestor. Move them inside an existing landmark, or wrap them in an appropriate one.

Examples

Incorrect: content outside any landmark

In this example, the introductory paragraph and the "Subscribe" section sit directly inside <body> with no landmark ancestor.

<body>
  <div class="logo">My Site</div>
  <p>Welcome to our website.</p>
  <main>
    <h1>Articles</h1>
    <p>Here are the latest articles.</p>
  </main>
  <div class="subscribe">
    <h2>Subscribe</h2>
    <form>
      <input type="email" aria-label="Email address">
      <button>Subscribe</button>
    </form>
  </div>
</body>

The logo, welcome paragraph, and subscribe section are all outside landmarks. A screen reader user navigating by landmarks would only find the <main> content.

Correct: all content inside landmarks

<body>
  <header>
    <div class="logo">My Site</div>
    <p>Welcome to our website.</p>
  </header>
  <main>
    <h1>Articles</h1>
    <p>Here are the latest articles.</p>
  </main>
  <footer>
    <h2>Subscribe</h2>
    <form aria-label="Newsletter signup">
      <input type="email" aria-label="Email address">
      <button>Subscribe</button>
    </form>
  </footer>
</body>

Correct: skip link outside landmarks

A skip link before the landmarks is acceptable since it exists to help users bypass repeated content.

<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <header>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main id="main">
    <h1>Page title</h1>
    <p>Page content goes here.</p>
  </main>
  <footer>
    <p>Copyright 2024</p>
  </footer>
</body>

Correct: multiple nav landmarks with distinct labels

<header>
  <nav aria-label="Primary">
    <a href="/">Home</a>
    <a href="/products">Products</a>
  </nav>
</header>
<main>
  <h1>Products</h1>
  <p>Browse our catalog.</p>
</main>
<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
  <p>Copyright 2024</p>
</footer>