axe-core "landmark-one-main" document must have one main landmark in CI

axe-core best-practice rule landmark-one-main found no <main> element or role="main" on the page. A single main landmark lets assistive tech skip navigation and go straight to the primary content.

What this error means

axe reports "landmark-one-main: Document should have one main landmark" on a page whose layout uses generic <div> wrappers instead of a semantic <main>.

axe-core

landmark-one-main: Document should have one main landmark (moderate)
  Fix any of the following:
    Document does not have a main landmark
  <div class="content">...</div>

Common causes

The layout uses divs instead of semantic landmarks

The primary content sits in a <div> with no <main> or role="main", so there is no main landmark for the document.

A shared layout was refactored and dropped <main>

A change to the app shell replaced the <main> wrapper with a plain container, removing the landmark from every page.

How to fix it

Wrap primary content in a main landmark

Wrap the page primary content in a single <main> element.
Ensure there is exactly one main landmark per document.
Re-run axe to confirm the landmark is present.

Layout.jsx

<header>...</header>
<main>
  {/* primary page content */}
</main>
<footer>...</footer>

Use semantic landmarks throughout

Pair <main> with <header>, <nav>, and <footer> so the whole page is inside landmarks, which also helps the region rule.

How to prevent it

Use one <main> landmark in the shared layout.
Prefer semantic landmark elements over generic divs.
Run axe on full pages to catch missing landmarks.