Ensure exactly one <main> landmark per page
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.
One page. One story. One <main>.
Overview
Why this matters
The `main` landmark identifies the primary content of the page. Assistive technology users rely on it to skip past navigation and reach the main content efficiently. If a page contains multiple `main` landmarks, users cannot determine which one represents the primary content, causing confusion and disrupting navigation flow.
How to fix this issue
Use exactly one `<main>` (or `[role="main"]`) per page. If multiple content regions appear due to template composition or nested layouts, convert secondary `<main>` elements to `<section>` or `<article>` and remove `role="main"`.
Developer Guidance
Duplicate main landmarks commonly happen in frontend frameworks that have nested layouts or route-level components. Always verify the **rendered DOM**, not the React/Vue component tree. Only the primary document content should be marked as `main`. Avoid putting `role="main"` on modals, sidebars, or dynamic panels.
Code Examples
Incorrect Implementation
<main>Content</main>
<main>Sidebar</main>Correct Implementation
<main>Content</main>Real-World Implementation
Before
<Layout>
<Header />
<main>Main content</main>
<SidebarLayout>
<main>Filters</main>
</SidebarLayout>
</Layout>
<!-- Assistive tech sees two main regions → unclear which is the primary one -->After
<Layout>
<Header />
<main>Main content</main>
<SidebarLayout>
<aside>Filters</aside>
</SidebarLayout>
</Layout>
<!-- Only one main region → predictable navigation -->CSS Example (Guidance)
/* Use CSS to visually layout page regions instead of multiple <main> elements */
.page-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2rem;
}Manual Testing
- 1. Inspect landmark output and confirm exactly one main region is exposed.
- 2. Verify keyboard/screen reader users can jump to main in one landmark navigation step.
- 3. If duplicates exist, remove extra `role="main"` or convert extra `<main>` tags to non-main regions.
- 4. Validate after route transitions and hydration to catch framework duplication.
- 5. Re-test with screen reader landmark list to ensure a single clear main target.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance