Ensure the main landmark is at top level

The landmark-main-is-top-level rule checks that the <main> element or role="main" landmark is not nested inside another landmark. This ensures that screen reader users can reliably navigate to the primary content of the page.

What is being tested?

This rule verifies that:

• The <main> element or role="main" is placed at the top level of the page, not inside landmarks like banner, navigation, or contentinfo.
• The page uses a clear, logical landmark structure to organize content.

Example

<header role="banner">
  <p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main role="main">
  <p>Put main content here.</p>
</main>
<footer role="contentinfo">
  <p>Put copyright, etc. here.</p>
</footer>

This example uses both HTML5 elements and ARIA landmarks together for maximum compatibility.

Why it matters

Navigating a web page becomes much easier for screen reader users when the page is divided into high-level landmark regions. If the main landmark is nested inside another landmark, it can disrupt keyboard and screen reader navigation, making it harder for users to locate the primary content.

Using both HTML5 elements and ARIA landmarks is considered best practice, improving accessibility across browsers and assistive technologies.

Best practices

• Place the <main> element or role="main" at the top level, not inside banner, navigation, or contentinfo landmarks.
• Use both HTML5 and ARIA landmarks to maximize cross-technology support.
• Organize your page structure into distinct, meaningful regions: header, navigation, main content, and footer.