Ensure exactly one <main> landmark per page

WCAG 1.3.1
Info and Relationships

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>.

Why this matters and how to fix it

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"`.

Automated detection · Manual review recommended

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 Examples

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. 1. Open Chrome DevTools → Accessibility → Landmarks.
  2. 2. Confirm that exactly **one** `main` landmark appears.
  3. 3. If more than one appears, remove `role="main"` from secondary containers or convert extra `<main>` tags to `<section>` or `<article>`.
  4. 4. Turn on a screen reader:
  5. • NVDA: Press D to jump between landmarks.
  6. • VoiceOver (macOS): VO + U → Landmarks.
  7. • TalkBack: Swipe to cycle landmarks.
  8. 5. Expected: The user should reach the main content in one jump and not encounter multiple "main" regions.
  9. 6. If the app uses nested layout routing, verify the final DOM after mounting and hydration.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance