Ensure the document has a main landmark

The landmark-one-main rule ensures that each page contains exactly one <main> element or role="main" landmark. If the page includes <iframe> elements, each iframe should have zero or one main landmark.

What is being tested?

This rule verifies that:

• The page has exactly one main landmark for the primary content.
• Each <iframe>, if used, contains zero or one main landmark.
• All main content is contained within a defined landmark region.

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 markup uses both HTML5 elements and ARIA roles, making it robust and accessible for screen reader users.

Why it matters

Landmarks allow screen reader users to easily jump between major sections of a page. Ensuring there is exactly one main landmark helps users reliably locate the primary content.

Without landmarks or with multiple main landmarks, screen reader navigation becomes confusing, and important content can become hard to find.

Best practices

• Use exactly one <main> or role="main" on the page.
• For each <iframe>, include zero or one main landmark.
• Combine HTML5 and ARIA landmarks to maximize accessibility and compatibility across assistive technologies.
• Include additional landmarks such as banner, navigation, and contentinfo to improve page structure.