Pages need a level-one heading

• Rule: axe/page-has-heading-one
• Checks: Page should contain a level-one heading
• WCAG: none; a best practice, not a WCAG success criterion
• Fix class: content: A fix needs authored text.

Who it affects

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

How to fix it

The page’s title is styled text or an image rather than a heading

Mark the page’s main title up as an <h1> at the start of the main content. It should name the page’s topic, as the page’s <title> does.

<main>
  <h1>Order history</h1>
  <p>Orders from the last two years.</p>
</main>

The design shows no title for the page

Add an <h1> that names the page, as its <title> does, and hide it visually with a class that clips it but keeps it in the accessibility tree.

<main>
  <h1 class="visually-hidden">Dashboard</h1>
  <p>Sales are up four percent this week.</p>
</main>

The <h1> is hidden with display: none, such as on small screens

Show it, or hide it visually with a clipping class instead. display: none and visibility: hidden hide it from screen readers too.

Fixes that fail

Making the site’s logo the <h1> on every page

axe accepts it, but the main heading is then the same on every page and says nothing about the page itself.

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.