Skip to main content
Accessibility Pro
Startscanning

Fix guides · WCAG 2.2

Fixing skipped heading levels

1.3.1 Info and Relationships · Level A W3C: Understanding 1.3.1

Headings are how many screen reader users move around a page and understand its outline. A page that goes from h1 straight to h4 suggests two missing levels of structure, usually because a heading was chosen for its size rather than its rank.

Who this affects: People who navigate by headings with a screen reader, and anyone relying on a generated outline.

The failing markup

<h4>Dimensions</h4>
<p>40 by 60 centimetres.</p>

How to fix it

  1. Choose the heading level for its place in the outline: one h1, sections as h2, subsections as h3.
  2. Set the visual size with CSS classes, so a small-looking heading can still be the right level.

The change

Removed: <h4>Dimensions</h4>Added: <h2>Dimensions</h2><p>40 by 60 centimetres.</p>

Verified by the scanner

On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:

  • arc-style: heading-order, WCAG 1.3.1

The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.

Worth knowing

  • WCAG does not literally require levels to be sequential, and axe-core treats skipped levels as a best practice. Other engines map it to 1.3.1 because a skipped level usually means the structure in the code is not the structure on screen. Treat it as a structure bug either way.