Structure & headings

The Page Has More than One Main Area

Screen reader users jump to the main content with one key, but with two main areas they may land in the wrong place or miss the real content.

landmark-no-duplicate-mainBest practiceBest practice — not a WCAG requirement, but it helps people all the same.

Status: ModerateModerate — An annoyance, with a workaround.CurrentScanners run this rule today.
Owner: DesignDevTest
Audit: AutomatedA scanner finds it, and a clean scan means it's fixed.

Save as PDF

Why it matters

A landmark is a labelled region of a page, like the header, menu or footer. Screen readers let people jump straight to the main landmark, skipping menus and banners. A page should have just one.

With two or more, people don't know which holds the real content. They may land on a sidebar or an old hidden panel and give up.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear "main" twice in the landmarks list and must guess which one holds the content.	High impact
Low-vision users (magnification)	Affected only if they also use a screen reader, as many do.	Partial impact
Keyboard-only users	Mostly not affected, unless a browser extension uses landmarks to skip ahead.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	This is a best practice, not a WCAG 2.2 requirement on its own. Still, clear page structure supports your case under Australia's Disability Discrimination Act.	Low impact
Conversion	If people can't find the main content quickly, some leave before they reach the product or form.	Moderate impact
SEO	Search engines don't reward a single main landmark in any real way.	Low impact
Brand trust	A tidy page structure shows screen reader users you've thought about them.	Low impact
Cost to fix	Usually a quick fix in the page template. Fix it once and every page is right.	High impact

Fixing it in code

Two main elements on one page

Don't

<main>
  <h1>Order summary</h1>
</main>
<main>
  <h2>You might also like</h2>
</main>

A screen reader says: “Landmarks: main, main”

<main>
  <h1>Order summary</h1>
</main>
<aside aria-label="You might also like">
  <h2>You might also like</h2>
</aside>

A screen reader says: “Landmarks: main, You might also like complementary”

Only the core content is main. Side content gets its own landmark.

A template and a page both add main

Don't

<main>
  <div role="main">
    <h1>Contact us</h1>
  </div>
</main>

A screen reader says: “Landmarks: main, main”

<main>
  <div>
    <h1>Contact us</h1>
  </div>
</main>

A screen reader says: “Landmarks: main”

role="main" makes a second main area. Remove it when the template already has one.

Designer's handoff note

On each page layout, mark one region as "main" — the content people came for.

Label the other regions too: header, navigation, sidebar, footer.

Quick test

Tool

NVDA (opens in a new tab) (free for Windows)

Checklist

Step 1: Turn NVDA on and open the page.
Step 2: Press NVDA + F7 to open the Elements List.
Step 3: Choose "Landmarks" and read the list.

Pass: You see "main" once, and it holds the page's core content.
Fail: You see "main" two or more times.

What a green scan still misses

A scanner can count main landmarks. It can't tell whether your one main area actually wraps the right content — check that by listening.

Reference

Rule ID: landmark-no-duplicate-main
Raised by: axe-core: “Document should not have more than one main landmark”
WCAG: Best practice — not a WCAG requirement
Read more: Deque University: landmark-no-duplicate-main (opens in a new tab)
Last reviewed: 14 October 2026