Structure & headings

The Main Content Area Sits Inside Another Page Region

Screen reader users jump straight to the main content, but when it's tucked inside another region, that region's name gets in the way and the page outline is confusing.

landmark-main-is-top-levelBest 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: DevTest
Audit: AutomatedA scanner finds it, and a clean scan means it's fixed.

Save as PDF

Why it matters

Landmarks are named regions of a page — header, navigation, main content, footer. Screen reader users jump between them like chapters. The main landmark should stand alone at the top level, not inside a header, aside or nav.

When main is nested, people hear the wrong region announced first. The list of landmarks also looks odd. This is a best practice, not a WCAG requirement, but it makes the page harder to understand.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They jump to the main content and hear it announced inside another region, like "complementary", which is confusing.	Partial impact
Low-vision users (magnification)	Affected only if they also use a screen reader to move around the page.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	Not a WCAG failure on its own. Clean landmarks still support a good structure story under Australia's Disability Discrimination Act.	Low impact
Conversion	A clear page layout helps screen reader users reach products and forms faster.	Low impact
SEO	No real search benefit — don't sell it as one.	Low impact
Brand trust	A tidy structure shows care to people who rely on it.	Low impact
Cost to fix	Usually a small change to the page template. Fix it once and every page benefits.	High impact

Fixing it in code

Main inside the header

Don't

<header>
  <nav>…</nav>
  <main>…</main>
</header>

A screen reader says: “banner landmark, … main landmark (heard inside the banner)”

<header>
  <nav>…</nav>
</header>
<main>…</main>

A screen reader says: “main landmark (heard on its own)”

main now sits beside the header, not inside it.

Main inside a sidebar region

Don't

<div role="complementary">
  <main>…</main>
</div>

A screen reader says: “complementary, main”

<main>…</main>
<aside>…</aside>

A screen reader says: “main”

The sidebar and the main content are separate, side-by-side regions.

Designer's handoff note

When you mark up page regions in a wireframe, show the main content as its own block. Don't draw it inside the header, sidebar or navigation.

Quick test

Tool

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

Checklist

Step 1: Turn NVDA on and open the page.
Step 2: Press NVDA + F7 and choose Landmarks.
Step 3: Look at where "main" appears in the list.

Pass: "main" is at the top level, not tucked under another landmark.
Fail: "main" is listed inside banner, navigation, complementary or another region.

What a green scan still misses

A scanner spots a nested main. It can't tell whether the right content is inside main — check that by reading it.

Reference

Rule ID: landmark-main-is-top-level
Raised by: axe-core: “Main landmark should not be contained in another landmark”
WCAG: Best practice — not a WCAG requirement
Read more: Deque University: landmark-main-is-top-level (opens in a new tab)
Last reviewed: 14 October 2026