AccessLint Rule: Page should have exactly one main landmark.

About this AccessLint rule

Every web page should have exactly one main landmark. This landmark tells assistive technology where the primary content of the page begins, allowing screen reader users to skip past repeated elements like headers, navigation menus, and sidebars and jump straight to what they came for.

When a page has no main landmark, screen reader users have no shortcut to the primary content. They must navigate through every element on the page sequentially, which is slow and frustrating. When a page has more than one main landmark, the purpose becomes ambiguous: which one is the "real" primary content? Screen readers typically list all landmarks in a rotor or landmarks menu, and duplicate main landmarks create confusion about page structure.

This rule relates to WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships), which requires that information and structure conveyed visually be available programmatically. A clear, single main landmark communicates the page's content hierarchy to assistive technology. It also supports WCAG 2.4.1 (Bypass Blocks) by giving users a mechanism to skip repeated content blocks.

How to fix it

Wrap the primary content area of the page in a single <main> element. This element should contain the unique content of the page and exclude repeated blocks like site headers, footers, and navigation.

If the page already uses <main> but has more than one, consolidate them into a single <main> element. In rare cases where multiple <main> elements exist in the markup (for example, in a single page application that shows different views), only one should be visible at a time. All others should have the hidden attribute.

The <main> element is preferred over role="main" because it has the correct semantics built in and requires no additional attributes in modern browsers.

A few practical points:

Place <main> as a direct child of <body> or within a non-landmark wrapper like a <div>. It should not be nested inside <header>, <footer>, <nav>, or <aside>.
Do not put the site-wide header or footer inside <main>. Only the content unique to the current page belongs there.
If the page has sections within the main content, use <section> or <article> elements inside <main>, not additional <main> elements.

Examples

No main landmark (incorrect)

This page has no <main> element, so screen reader users have no way to jump to the primary content.

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <div class="content">
    <h1>Welcome</h1>
    <p>This is the primary content of the page.</p>
  </div>
  <footer>
    <p>Copyright 2024</p>
  </footer>
</body>

Multiple main landmarks (incorrect)

Two <main> elements are present and both are visible. Screen readers will list two main landmarks, making the page structure unclear.

<body>
  <header>
    <nav>
      <a href="/">Home</a>
    </nav>
  </header>
  <main>
    <h1>Blog post</h1>
    <p>Article content here.</p>
  </main>
  <main>
    <h2>Related posts</h2>
    <ul>
      <li><a href="/post-2">Another post</a></li>
    </ul>
  </main>
</body>

Single main landmark (correct)

The page has exactly one <main> element that wraps the primary content. Related content is placed inside it or in an <aside>.

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <h1>Blog post</h1>
    <p>Article content here.</p>
  </main>
  <aside>
    <h2>Related posts</h2>
    <ul>
      <li><a href="/post-2">Another post</a></li>
    </ul>
  </aside>
  <footer>
    <p>Copyright 2024</p>
  </footer>
</body>

Multiple views with hidden main elements (correct)

In a single page application, multiple <main> elements can exist in the DOM as long as only one is visible at a time. The hidden attribute removes the others from the accessibility tree.

<body>
  <header>
    <nav>
      <a href="#home">Home</a>
      <a href="#settings">Settings</a>
    </nav>
  </header>
  <main id="home">
    <h1>Home</h1>
    <p>Welcome to the app.</p>
  </main>
  <main id="settings" hidden>
    <h1>Settings</h1>
    <p>Adjust your preferences.</p>
  </main>
</body>