Pages need a main landmark

• Rule: axe/landmark-one-main
• Checks: Document should have one main landmark
• WCAG: none; a best practice, not a WCAG success criterion
• Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

• People who use a screen reader or a braille display, most of them blind.

How to fix it

The page’s primary content sits in a <div>

Wrap the page’s own content in <main>, leaving out what repeats across pages: the site header, the site navigation and the footer. Navigation and asides that belong to this page’s content, such as a table of contents, can go inside.

<header>
  <a href="/">Acme home</a>
</header>
<main>
  <h1>Orders</h1>
  <p>You have no open orders.</p>
</main>
<footer>
  <p>Acme Inc.</p>
</footer>

The <main> element appears only once a script has loaded the content

Render <main> in the page shell from the start, and put the loaded content inside it.

Fixes that fail

Wrapping the whole page, header and footer included, in <main>

axe accepts it when the header and footer have no roles, but they then stop being landmarks, and the main landmark no longer takes screen reader users past the repeated content to the page’s own.

In React

The part of the fix that differs in React, in its syntax. The rest of the guidance holds.

A component returns a loading state before it renders <main>, or a <Suspense> fallback takes its place

Render <main> where the loading state cannot replace it: in the layout, or outside the <Suspense> boundary. Show the loading state inside it.

function OrdersRoute() {
  return (
    <main>
      <h1>Orders</h1>
      <Suspense fallback={<p>Loading orders…</p>}>
        <OrderList />
      </Suspense>
    </main>
  );
}

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.