Page should not have more than one main landmark.

A page should have only one <main> landmark. The <main> element (or a role of role="main") identifies the primary content area of the page. When a page contains more than one <main> landmark, assistive technologies cannot determine which section holds the primary content, and screen reader users lose the ability to jump directly to "the" main content with a single shortcut.

Screen readers like JAWS, NVDA, and VoiceOver provide landmark navigation that lets users skip past repeated headers, navigation bars, and sidebars to reach the main content quickly. This works well when there is exactly one <main> landmark. With two or more, the user is presented with an ambiguous list of "main" regions and has to guess which one actually contains the content they need. Keyboard-only users who rely on landmark shortcuts face the same confusion.

This rule relates to WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) at Level A. That criterion requires information and relationships conveyed through presentation to be programmatically determinable. A page layout with a single primary content area should map to a single <main> landmark so the structure is unambiguous to assistive technology.

How to fix it

1. Identify all <main> elements and elements with role="main" in the page.
2. Keep only one. This element should wrap the primary content of the page.
3. For other content sections that were incorrectly wrapped in <main>, use <section> elements with descriptive headings, or other appropriate landmarks like <aside>, <nav>, or <footer>.
4. If the page is a single-page application that swaps views, make sure only one <main> is present in the DOM at any given time. Remove or hide the inactive views so they are not exposed to the accessibility tree.

Examples

Incorrect: multiple <main> elements

<header>
  <h1>My Site</h1>
</header>
<main>
  <h2>Featured articles</h2>
  <p>Article content here.</p>
</main>
<main>
  <h2>Recent updates</h2>
  <p>Update content here.</p>
</main>

Both content areas are marked as <main>, so a screen reader user sees two "main" landmarks with no way to tell which is the primary one.

Correct: single <main> with sections

<header>
  <h1>My Site</h1>
</header>
<main>
  <section>
    <h2>Featured articles</h2>
    <p>Article content here.</p>
  </section>
  <section>
    <h2>Recent updates</h2>
    <p>Update content here.</p>
  </section>
</main>

A single <main> wraps all primary content. The two content areas are distinguished with <section> elements and their own headings, which gives screen reader users clear structure without creating duplicate landmarks.

Incorrect: mixing <main> with role="main"

<main>
  <h2>Blog post</h2>
  <p>Post content here.</p>
</main>
<div role="main">
  <h2>Sidebar content</h2>
  <p>Additional info.</p>
</div>

Even though one uses the <main> element and the other uses role="main", both register as main landmarks. The result is the same duplication problem.

Correct: one <main> and an <aside>

<main>
  <h2>Blog post</h2>
  <p>Post content here.</p>
</main>
<aside aria-label="Related info">
  <h2>Sidebar content</h2>
  <p>Additional info.</p>
</aside>

The sidebar content is placed in an <aside> element, which is the appropriate landmark for supplementary information. Only one <main> remains on the page.

Learn more:

W3C Reference

Understanding Success Criterion 1.3.1: Info and Relationships

→

MDN Reference

HTML main element

→

MDN Reference

ARIA: main role

→