probeo

Why should a page have a level-one heading?

page-has-heading-one page

The issue

Many screen reader users jump straight to the first level-one heading to find where a page’s content starts and what it is about. A page without one leaves them to work through the navigation and the rest of the page to find out. The page’s topic is still there visually, but nothing marks it as the top of the outline.

The cause is usually a template that styles the page title as a <div> or a <p>, or one that uses h2 for the title because of its default size.

Scope

The rule passes when the page has at least one visible <h1>, or an element with role="heading" and aria-level="1". It fails once per page when there is neither. Hidden elements don’t count.

This is a best-practice rule, related to WCAG 1.3.1 and 2.4.6. The search side of the same element, including how many <h1> elements a page should have, is covered in H1 headings.

How to check you have it

  • In probeo: the page reports the page-has-heading-one rule, “Page should contain a level-one heading”, with moderate impact.
  • By hand: view the page source and search for <h1. If there is none, check for role="heading" with aria-level="1".
  • With a tool: a screen reader’s headings list shows the levels. The first entry should be level 1 and name the page.

The fix

Mark the page’s main title as an <h1>.

Use the element that already holds the page’s title, at the start of the main content, and change it to an <h1>. Keep its look by styling the h1 in CSS. If the title is generated by a component, change the component so the tag can be set per page.

<!-- Before -->
<div class="page-title">Shipping and returns</div>

<!-- After -->
<h1 class="page-title">Shipping and returns</h1>

Done when: the page has a visible <h1> that names it, and the check above comes back clean.

Do not

  • Do not wrap the logo in an <h1> on every page in place of the page’s own title.
  • Do not add a hidden <h1> that repeats text already in a styled <div>; change the visible title.
  • Do not use role="heading" when an <h1> element would do.

FAQ

Does an h1 inside an iframe count?

No. Probeo reads the page’s own HTML, so a level-one heading has to be in the page itself.

Can a page have more than one h1?

This rule only checks that there is at least one. For assistive technology a single <h1> naming the page is clearest, and H1 headings covers why search tools report more than one.

Is role=“heading” with aria-level=“1” as good as an h1?

It satisfies the rule and is announced the same way. The <h1> element is simpler, works without ARIA, and is what search engines expect.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.