Document does not have a main landmark: how to fix it

Quick answer: This audit fails when the page has no main landmark. Fix it by wrapping the primary content of the page in a single HTML main element, placed outside the header, navigation, and footer. Use exactly one main per page so screen reader users can jump straight to the content.

This Lighthouse audit fails when the page has no <main> element. Screen reader users rely on landmarks to skip past navigation and jump directly to primary content. Missing it makes your page significantly harder to use with assistive technology.

TL;DR

• What: The page has no <main> element (or multiple, which also fails).
• Why it matters: Screen readers use landmarks for keyboard-free navigation.
• Fix: Wrap your page's primary content in <main>, exactly once per page.

What does the main-landmark audit check?

Lighthouse confirms the rendered DOM contains exactly one <main> element (or an element with role="main"). Pages missing it score 0 on this audit.

Why does a main landmark matter?

Screen reader users (and keyboard users via the rotor or "skip links") navigate web pages by landmarks: <header>, <nav>, <main>, <aside>, <footer>. With a missing <main>:

• "Skip to main content" links have no target
• Screen reader landmark navigation skips the page entirely
• Document outline is broken for assistive tech

How do I add a main landmark?

Wrap your page's primary content, everything that isn't header, nav, sidebar, or footer, in a single <main>:

<!-- BEFORE: no landmark -->
<body>
  <header>...</header>
  <nav>...</nav>
  <div class="content">
    <h1>Page title</h1>
    <p>Main content...</p>
  </div>
  <footer>...</footer>
</body>

<!-- AFTER: <main> wraps primary content -->
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <h1>Page title</h1>
    <p>Main content...</p>
  </main>
  <footer>...</footer>
</body>

How do I add a main landmark in React, Next.js, or WordPress?

React / Next.js

In your root layout:

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

WordPress

Most modern themes wrap the loop in <main> already. If yours doesn't, edit header.php or the appropriate template part and add <main id="content"> before the loop.

Vue / Nuxt

In default.vue layout:

<template>
  <Header />
  <main>
    <slot />
  </main>
  <Footer />
</template>

What main-landmark pitfalls should I avoid?

• Don't nest <main> inside <header> or <footer>, the semantics conflict.
• Don't use multiple <main> elements per page. If you have tabs or accordions, keep <main> as the outer wrapper.
• Don't use <main role="main">, the role is implicit; the explicit role is redundant.
• <main> should not be inside <article> or <section>. It's a top-level landmark.

How do I verify the main landmark?

1. Re-run Lighthouse. The landmark-one-main audit should pass.
2. Test with a real screen reader: VoiceOver (Mac: Cmd+F5) or NVDA (Windows, free). Use landmark navigation (VO+U → Landmarks; NVDA: D for next landmark).
3. Use the axe DevTools extension for a deeper accessibility check.

Related audits

• Heading order, semantic structure
• Image alt attributes, screen reader content for images
• Color contrast, visual accessibility

Audit your URL at https://lighthouse-md.com.