The heading-order rule flags a heading that is more than one level deeper than the heading before it – an h2 followed by an h4, for example. The fix is to choose the heading level by its place in the outline and do the styling with a CSS class.
What the rule means
Headings form the outline of a page: one h1 for the page, h2 for its main sections, h3 for sub-sections. The rule walks through every heading in document order and compares each one with the one before it. Going down by more than one level fails – h2 → h4. Going up by any amount is fine – h4 → h2 simply starts a new section. The first heading on a page may have any level.
axe counts h1–h6 and elements with role="heading", whose level comes from aria-level. Headings hidden from assistive technology are ignored.
Note: this is a best practice, not a WCAG failure in itself. WCAG does not demand a strict sequence of levels. It does relate to 1.3.1 Info and Relationships, because heading levels carry the structure of the content, and to 2.4.6 Headings and Labels, because headings should describe what follows.
Who is affected
Mainly blind and partially sighted people using a screen reader. Many of them get an overview of a page by jumping from heading to heading (H in NVDA and JAWS, the rotor in VoiceOver) or by opening a list of all headings. The WebAIM screen reader survey has found for years that navigating by headings is the most common way to find information on a long page [5]. A jump from h2 to h4 suggests a missing section and makes the outline harder to trust.
Why the check fails
- Levels chosen for their look: an
h4was used because its default size fitted the design. - Reusable components such as cards, teasers or accordions that hard-code one level, whatever page they are placed on.
- Page builders and CMS blocks that let editors pick "Heading 4" from a style menu.
- Widgets in the sidebar or footer with
h5orh6titles directly after anh2. - Visually hidden headings added for screen readers at the wrong level.
How to fix it
Decide the level from the outline, then style it with a class. Components that appear in different places should accept the level as a setting instead of fixing it in the template.
<!-- Before: the card titles jump from h1 to h4 because h4 "looked right" -->
<h1>Our services</h1>
<div class="card-grid">
<div class="card"><h4 class="card__title">Web design</h4></div>
<div class="card"><h4 class="card__title">Hosting</h4></div>
</div><!-- After: h2 is the right level; the class keeps the smaller look -->
<h1>Our services</h1>
<div class="card-grid">
<div class="card"><h2 class="card__title">Web design</h2></div>
<div class="card"><h2 class="card__title">Hosting</h2></div>
</div>The size now comes from CSS, not from the element:
/* The look belongs to the class, the level to the outline */
.card__title { font-size: 1.125rem; font-weight: 600; }How to test it manually
- Show the heading outline: the free HeadingsMap extension, the WAVE extension's structure view, or the headings list of a screen reader (NVDA: Insert + F7; VoiceOver: VO + U).
- Read the list on its own. Does it make sense as a table of contents? Is every level jump downwards exactly one step?
- Compare it with the visual page: text that looks like a heading but is only bold is missing from the list.
- The rule only checks the numbers. Whether a heading describes its section, and whether a section is at the right level, is for a person to judge.
Related WCAG criterion
None directly – heading-order is a best practice. It relates to 1.3.1 Info and Relationships and 2.4.6 Headings and Labels. Headings are also one way to meet 2.4.1 Bypass Blocks.
How Reviseberg reports it
Reviseberg runs heading-order on every crawled page. Each heading that skips a level is one occurrence, so a card component used across the site shows up on many pages at once. The issue list shows the rule as a best practice with its severity, the number of elements and pages, and the points a fix gets you back; it never counts towards a WCAG criterion or appears in a compliance report. The detail view shows the selector and HTML snippet of each heading and every affected page. You can mark a finding as "ignore" or "false positive" with a reason; every decision is logged.
Related rules
- undefined – the page has no level-one heading at all.
- undefined – a heading with no text.
- undefined – content outside the page's landmarks.
Check the heading structure of your whole site – get a free scan