Make sure the document has at most one main landmark

The landmark-no-duplicate-main rule ensures that each page contains no more than one <main> element or role="main" landmark. If a page contains <iframe> elements, each iframe should have zero or one main landmark.

What is being tested?

This rule verifies that:

• The page contains no more than one main landmark.
• Each iframe, if present, contains zero or one main landmark.

Good example

<header role="banner">
  <p>Company logo</p>
</header>
<nav role="navigation">
  <ul><li>Navigation</li></ul>
</nav>
<main role="main">
  <p>Main content</p>
</main>
<footer role="contentinfo">
  <p>Copyright</p>
</footer>

This example has only one main landmark, following best practices.

Why it matters

Landmarks allow screen reader users to easily navigate between high-level sections of a page. Multiple main landmarks can confuse users and disrupt their ability to quickly locate the primary content.

Combining HTML5 elements and ARIA landmarks improves compatibility across browsers and assistive technologies, making your site more robust and accessible.

Best practices

• Use only one <main> or role="main" per page.
• When using iframes, ensure each iframe contains no more than one main landmark.
• Combine HTML5 and ARIA markup to support a wide range of screen readers and browsers.
• Organize page content into clear regions: header, navigation, main, and footer.