Document should not have more than one main landmark

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.

Every page has one primary story — so it has only one `<main>`.

Why this matters and how to fix it

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 there is only one `<main>` (or `[role="main"]`) per page. If multiple primary-content-like containers appear due to templates or routing layouts, convert secondary `<main>` elements to `<section>` or `<article>` and remove `role="main"`.

Automated detection · Manual review recommended

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 Examples

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. 1. Open Chrome DevTools → Accessibility → Landmarks.
  2. 2. Confirm there is **exactly one** `main` landmark.
  3. 3. If you see more than one, remove `role="main"` or convert extra <main> elements to <section> or <article>.
  4. 4. Turn on a screen reader:
  5. • NVDA: Press D to cycle through landmarks.
  6. • VoiceOver (macOS): VO + U → Landmarks.
  7. • Expected: Only one 'main' appears in the landmark list.
  8. 5. If your app uses nested layouts, verify final DOM after routing or conditional rendering.
  9. 6. Ensure `main` is a sibling to `header`, `nav`, `footer` — not nested inside them.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance