A page needs no more than one main landmark

• Rule: axe/landmark-no-duplicate-main
• Checks: Document should not have more than 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

A layout and the page inside it each render <main>

Keep <main> in one place, usually the layout, and make the page’s own wrapper a <div>, or an <article> if it stands on its own.

<main>
  <div class="page-content">
    <h1>Invoices</h1>
    <p>You have no unpaid invoices.</p>
  </div>
</main>

Views of a single-page app stay in the page, each with its own <main>

Render only the active view, or hide the others with the hidden attribute, so that one <main> is exposed at a time.

Fixes that fail

Giving each <main> a different aria-label

Names tell landmarks apart, but a page has only one main landmark. axe still reports this rule, and the landmark no longer leads screen reader users to one place.

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.