Accessibility Rule: Main landmark should not be contained in another landmark

About This Accessibility Rule

The <main> element (or role="main") represents the dominant content of a page — the content that is directly related to the central topic or functionality. Screen reader users rely on landmark navigation to jump quickly between major sections of a page, such as the banner, navigation, main content, and footer. When the <main> landmark is nested inside another landmark, this hierarchy becomes confusing. A screen reader might present it as a subsection of, say, the navigation or banner, making it harder for users to understand the page structure and locate the primary content efficiently.

This rule primarily affects users who are blind, deafblind, or have mobility impairments and depend on assistive technologies to navigate by landmarks. When landmarks are properly structured as flat, top-level regions, users can cycle through them predictably and efficiently.

Why landmark hierarchy matters

The HTML Living Standard specifies that a hierarchically correct <main> element is one whose ancestor elements are limited to <html>, <body>, <div>, <form> without an accessible name, and autonomous custom elements. This means <main> should never appear inside <header>, <nav>, <aside>, <footer>, or any element with a landmark role.

Think of landmarks as the top-level sections of your page. They should be siblings, not nested within each other. A well-structured page has a clear, flat hierarchy of landmarks:

Banner (<header> or role="banner") — site-wide header content
Navigation (<nav> or role="navigation") — navigation links
Main (<main> or role="main") — primary page content
Contentinfo (<footer> or role="contentinfo") — footer content

This rule is classified as a Deque best practice and supports the broader principle of providing clear, navigable page structure for assistive technology users.

How to fix it

Move <main> out of any enclosing landmark. If your <main> element is nested inside a <header>, <nav>, <aside>, <footer>, or any element with an ARIA landmark role, restructure your markup so <main> is a direct child of <body> (or only wrapped in non-landmark elements like <div>).
Ensure landmarks are siblings, not nested. The primary landmarks — banner, navigation, main, and contentinfo — should sit at the same level in the DOM.
Use both HTML5 elements and ARIA roles for maximum compatibility. While modern browsers and screen readers handle HTML5 landmark elements well, adding the corresponding ARIA role (e.g., <main role="main">) provides a fallback for older assistive technologies.

Examples

Incorrect: `<main>` nested inside another landmark

In this example, the <main> element is nested inside the <nav> landmark, which breaks the expected landmark hierarchy.

<header role="banner">
  <p>Company Logo</p>
</header>
<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
  <main role="main">
    <p>This is the primary content, incorrectly nested inside nav.</p>
  </main>
</nav>
<footer role="contentinfo">
  <p>Copyright 2024</p>
</footer>

Incorrect: `<main>` nested inside `<aside>`

<aside role="complementary">
  <main role="main">
    <p>Main content should not be inside a complementary landmark.</p>
  </main>
</aside>

Correct: `<main>` as a top-level landmark

All landmarks are siblings at the top level of the document. The <main> element is not contained within any other landmark.

<header role="banner">
  <p>Company Logo</p>
</header>
<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main role="main">
  <p>This is the primary content of the page.</p>
</main>
<footer role="contentinfo">
  <p>Copyright 2024</p>
</footer>

Correct: `<main>` wrapped in a non-landmark `<div>`

Wrapping <main> in a <div> is acceptable because <div> is not a landmark element.

<header role="banner">
  <p>Company Logo</p>
</header>
<div class="content-wrapper">
  <main role="main">
    <p>This is the primary content of the page.</p>
  </main>
</div>
<footer role="contentinfo">
  <p>Copyright 2024</p>
</footer>