Document should not have more than one main 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 primary story — so it has only one `<main>`.
Overview
Why this matters
The `main` landmark identifies the primary content of the page. Screen reader and keyboard users rely on landmark navigation to jump directly to it. If multiple `main` elements are present, assistive technologies cannot determine which one is the real main content, making navigation confusing and inefficient.
How to fix this issue
Ensure only one `<main>` (or `[role="main"]`) represents the page's primary content. Convert additional main-like containers to `<section>`, `<article>`, or `<aside>` as appropriate.
Developer Guidance
Frameworks with nested layouts (React, Next.js, Vue, Angular) frequently cause duplicate `<main>` regions. Always check the **rendered DOM**, not the component tree. Only the page’s true primary content gets the `main` landmark.
Code Examples
Incorrect Implementation
<main>Content A</main>
<main>Content B</main>Correct Implementation
<main>Primary content</main>
<article>Related content</article>Real-World Implementation
Before
<Layout>
<main>Page content</main>
<SidebarLayout>
<main>Sidebar content</main>
</SidebarLayout>
</Layout>After
<Layout>
<main>Page content</main>
<SidebarLayout>
<section>Sidebar content</section>
</SidebarLayout>
</Layout>CSS Example (Guidance)
/* If layout requires multiple content regions, use CSS and semantic sectioning instead of additional <main> */
section,
article {
display: block;
padding: 1rem;
}Manual Testing
- 1. Inspect landmarks and confirm there is exactly one main landmark.
- 2. If multiple mains appear, identify duplicate sources from nested layouts/components.
- 3. Replace extra main regions with semantic alternatives (`section`, `article`, `aside`).
- 4. Re-test with screen reader landmark navigation and confirm one main only.
- 5. Verify behavior across route changes and conditional rendering states.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance