No main landmark

Why it matters

Every page of a site starts with the same logo, menu and cookie notice. Someone who can see skips them with their eyes; a screen-reader or keyboard user has to get past them on every single page unless the page says where its content starts. <main> is how it says so: screen readers have a key that jumps straight to it.

One <main> per page. Two leave that key with no right answer.

A notice, because a "skip to content" link or good headings do the same job and the guidelines accept either. <main> is the cheapest of the three: one tag, nothing to style.

Source: WCAG 2.2, 2.4.1 Bypass Blocks (Level A), by technique ARIA11; HTML: the main element.

How to fix it

Wrap what is unique to the page, and not the header, menu or footer, in one <main>:

<header>…</header>
<main>
    <h1>Wedding cakes</h1>
    …
</main>
<footer>…</footer>

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<header>Flour &amp; Co</header>
<div class="content">
</div>

NoticeThe page has no <main> element, so a screen reader has no shortcut past the header and menu to the content.

fail-none

<main>
</main>
<main>
<h2>Newsletter</h2>
</main>

NoticeThe page has 2 main landmarks. "Jump to the main content" should have one answer.

fail-two

<header>Flour &amp; Co</header>
<main>
</main>

PassedThe page has one <main> landmark.

pass-one

<header>Flour &amp; Co</header>
<div role="main">
</div>

PassedThe page has one <main> landmark.

pass-role