Main landmark should not be contained in another 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 main landmark — it must be top-level and unique.

Why this matters and how to fix it

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 a direct child of `<body>`. Use it only once per page. Do not nest it inside `<article>`, `<section>`, `<header>`, or `<footer>`.

Automated detection · Manual review recommended

Developer guidance

Most single-page apps or templates include a global layout wrapper — ensure the `<main>` element sits directly under `<body>` in the rendered DOM. There should only be one `main` landmark per document, even if multiple layouts or routes are mounted dynamically. Test with the browser’s accessibility tree to confirm hierarchy.

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 Examples

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. 1. Open the page in Chrome DevTools → Elements → Accessibility → Landmarks.
  2. 2. Confirm that exactly **one** `main` landmark appears.
  3. 3. Check that it is a direct child of `<body>` and not nested in `<article>`, `<section>`, `<header>`, or `<footer>`.
  4. 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. 5. Verify that the 'main' region is announced once and correctly represents the primary page content.
  8. 6. If multiple `main` landmarks exist, refactor so only the unique primary content retains that role.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance