Main landmark should not be contained in another landmark
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every page has one main landmark — it must be top-level and unique.
Overview
Why this matters
The `main` landmark identifies the unique, primary content of a page. Screen reader and keyboard users rely on this region to skip repetitive navigation and reach the main content quickly. If the `<main>` element is nested inside another landmark (like `<article>`, `<section>`, or `<header>`), assistive technologies may misinterpret the page structure, making landmark navigation inaccurate.
How to fix this issue
Keep `<main>` or `[role="main"]` as the page's primary landmark and use it only once per document. Do not place it inside `<article>`, `<section>`, `<header>`, `<footer>`, or other sectioning landmarks. Non-semantic wrapper `<div>` elements are acceptable.
Developer Guidance
Most SPAs include global layout wrappers; that is fine as long as `main` is still exposed as the document's primary landmark in the accessibility tree. There should be only one `main` landmark per document, even when routes are mounted dynamically. Verify hierarchy using browser accessibility tools and a screen reader landmark rotor/list.
Code Examples
Incorrect Implementation
<article>
<main>
<h1>Main Content</h1>
</main>
</article>Correct Implementation
<main>
<h1>Main Content</h1>
</main>
<article>Additional content</article>Real-World Implementation
Before
<header>…</header>
<section>
<main>
<h1>Dashboard</h1>
</main>
</section>
<!-- main nested in section → incorrect landmark structure -->After
<header>…</header>
<main>
<h1>Dashboard</h1>
</main>
<!-- main is now a top-level landmark, improving navigation -->CSS Example (Guidance)
/* Keep <main> visually positioned via CSS, not by nesting in layout wrappers */
main {
display: block;
padding: 2rem;
flex: 1;
}Manual Testing
- 1. Open the page in Chrome DevTools → Elements → Accessibility → Landmarks.
- 2. Confirm that exactly **one** `main` landmark appears.
- 3. Check that it is a direct child of `<body>` and not nested in `<article>`, `<section>`, `<header>`, or `<footer>`.
- 4. Turn on a screen reader (NVDA, VoiceOver, or TalkBack).
- 5. NVDA: Press D to jump between landmarks.
- 6. VoiceOver: Use VO + U → Landmarks list.
- 7. Verify that the 'main' region is announced once and correctly represents the primary page content.
- 8. If multiple `main` landmarks exist, refactor so only the unique primary content retains that role.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance