probeo

Why do heading levels need to go up one at a time?

heading-order page

The issue

A heading that jumps a level makes the page’s outline say something the page doesn’t mean. A screen reader user who hears an h2 and then an h4 looks for the missing h3, or assumes they skipped part of the page. The structure that sighted readers take from type size is lost to anyone navigating by heading level.

The cause is almost always visual: a heading level chosen for its default size rather than its place in the outline, often because a design calls for smaller headings inside a section.

Scope

The visible <h1> to <h6> elements on the page are read in order. A heading fails when its level is more than one deeper than the heading before it, such as an h4 straight after an h2. The first heading on the page can be any level, and going back up any number of levels, from an h4 to an h2, is fine.

Only heading tags are read. Elements with role="heading" and aria-level aren’t part of this check. Hidden headings are skipped. This is a best-practice rule, related to WCAG 1.3.1.

How to check you have it

  • In probeo: the page reports the heading-order rule, “Heading levels should only increase by one”, on each heading that skips a level, with moderate impact.
  • By hand: list the page’s headings in order and read their levels. Any step down of more than one, such as 2 to 4, is the problem.
  • With a tool: a screen reader’s headings list, or a headings outline extension, shows the levels in order and makes the gap visible.

The fix

Choose each heading’s level by its place in the outline, and set its size in CSS.

A section under an h2 gets h3 subheadings, and their subsections get h4. If the design wants a smaller look, style the h3 smaller instead of reaching for an h4.

<!-- Before -->
<h2>Pricing</h2>
<h4>Annual plans</h4>

<!-- After -->
<h2>Pricing</h2>
<h3 class="text-sm">Annual plans</h3>

Done when: no heading is more than one level deeper than the one before it, and the check above comes back clean.

Do not

  • Do not pick a heading level for its default size.
  • Do not use bold paragraphs in place of headings to avoid the rule.
  • Do not renumber every heading on the site at once without checking each template’s outline.

FAQ

Can a page start with an h2?

Yes, as far as this rule goes: the first heading can be any level. A page should still have one level-one heading, which a separate rule checks.

Is going from an h4 back to an h2 a problem?

No. Closing a subsection and starting a new top-level section is how outlines work. Only steps down of more than one level fail.

Yes. Every visible heading in the page’s HTML is read in document order, wherever it sits, so a footer that starts at h4 after a content section ending at h2 fails.

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.