# Document should not have more than one main landmark

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/landmark-no-duplicate-main
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Landmarks are semantic regions that help assistive technology users understand the structure of a page and jump between sections efficiently. The `main` landmark specifically identifies the primary content area — the unique content that distinguishes this page from others on the site. When multiple `main` landmarks exist, screen readers present all of them in the landmarks list, making it unclear which one contains the actual primary content.

This issue primarily affects **blind and deafblind users** who rely on screen readers, as well as **keyboard-only users** with mobility disabilities who use landmark-based navigation. Screen readers like JAWS, NVDA, and VoiceOver allow users to press a shortcut key to jump directly to the `main` landmark. If there are two or more `main` landmarks, the user must guess which is correct, defeating the purpose of this navigational aid.

While this rule is categorized as a **Deque best practice** rather than a specific WCAG success criterion violation, it strongly supports **WCAG 1.3.1 (Info and Relationships)** and **WCAG 2.4.1 (Bypass Blocks)**. Properly structured landmarks help users understand page organization and skip repetitive content.

## How to Fix It

1. **Audit your page for duplicate `main` landmarks.** Search your HTML for multiple `<main>` elements or multiple uses of `role="main"`. Remember that a `<main>` element has an implicit `role="main"`, so a `<main>` and a `<div role="main">` on the same page creates a duplicate.
2. **Consolidate into a single `main` landmark.** Wrap all primary content in one `<main>` element and remove any others.
3. **Check iframes.** If your page contains `<iframe>` elements, ensure each iframe's document also has at most one `main` landmark.
4. **Use complementary landmarks for other sections.** Content that is not the primary focus — such as sidebars — should use `<aside>` (or `role="complementary"`) instead of `<main>`.

It's also a good practice to structure your entire page with semantic HTML5 landmark elements — `<header>`, `<nav>`, `<main>`, and `<footer>` — so all content is contained within a recognizable region. You can pair these with their ARIA equivalents (`role="banner"`, `role="navigation"`, `role="main"`, `role="contentinfo"`) for maximum compatibility across screen readers, though modern browsers and assistive technologies handle the HTML5 elements well on their own.

## Examples

### Incorrect: Multiple `main` Landmarks

This page has two `main` landmarks, which makes it ambiguous for screen reader users.

```html
<header>
  <h1>My Website</h1>
</header>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main>
  <h2>Articles</h2>
  <p>Article content here.</p>
</main>
<main>
  <h2>Sidebar</h2>
  <p>Related links and info.</p>
</main>
<footer>
  <p>&copy; 2024 My Website</p>
</footer>
```

### Incorrect: Mixing `<main>` with `role="main"`

Even though these are different elements, both create a `main` landmark, resulting in duplicates.

```html
<main>
  <p>Primary content here.</p>
</main>
<div role="main">
  <p>More content here.</p>
</div>
```

### Correct: Single `main` Landmark with Proper Page Structure

All primary content is in one `<main>` element, and the sidebar uses `<aside>` instead.

```html
<header>
  <h1>My Website</h1>
</header>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main>
  <h2>Articles</h2>
  <p>Article content here.</p>
</main>
<aside>
  <h2>Sidebar</h2>
  <p>Related links and info.</p>
</aside>
<footer>
  <p>&copy; 2024 My Website</p>
</footer>
```

### Correct: Page with an Iframe

The parent page and the iframe document each have at most one `main` landmark.

```html
<!-- Parent page -->
<main>
  <h1>Dashboard</h1>
  <iframe src="widget.html" title="Statistics widget"></iframe>
</main>

<!-- widget.html -->
<main>
  <p>Widget content here.</p>
</main>
```