How to fix skipped heading levels

Headings form an outline of the page. Assistive technology lets users jump between them and infer structure from the levels, so the levels need to nest logically: an h2 introduces a section, an h3 a subsection inside it, and so on. Skipping a level (h1 straight to h3) breaks that outline. Good heading structure supports WCAG 1.3.1 Info and Relationships, though as the next section explains, a skipped level is not by itself a failure of it.

On its own, no. Skipping a level is a structural smell, not a conformance failure, and it is worth knowing the difference before you file a bug against it.

axe-core, the engine behind this scanner and behind the accessibility category in Lighthouse, tags its heading-order rule as best-practice and maps it to no success criterion. Rules that do fail WCAG carry tags like wcag2a and wcag412; this one carries neither. Our reports keep the two apart for that reason, and a scan will never count a skipped level toward a conformance failure.

WCAG 1.3.1 Info and Relationships asks that structure be programmatically determinable. An h3 is still exposed as a heading at level 3 whether or not an h2 precedes it, so the relationship survives the skip. What 1.3.1 does catch is text that looks like a heading but is not marked up as one.

It becomes a genuine problem when the outline stops describing the page: a section that reads as a subsection of something it does not belong to, or a jump so large that a screen-reader user moving heading to heading cannot tell where one section ends. Fix it because the outline should be true, not because a checker went red.

That message means exactly one thing: the previous heading was a level 1, the next one is a level 3, and nothing at level 2 sits between them. The fix is to change the h3 to an h2, or to add the missing h2 if a section really is absent.

The wording comes from an HTML linter rather than from axe-core, whose equivalent message reads "Heading levels should only increase by one". Same underlying check, different phrasing, and neither is a WCAG conformance failure. "Computed level" is the linter reminding you it read the level off the tag itself, so an h3 styled to look small is still a level 3.

Fixing it is almost always a tag swap with the styling moved to a class, which leaves the page looking identical.

Both describe the same fault with a bigger gap. "The heading h6 (with computed level 6) follows the heading h1 (with computed level 1), skipping 4 heading levels" means an h6 sits directly after an h1, so levels 2 to 5 never appear between them. The "from line 25, column 10" that follows is the linter pointing at the tag in your source, which is often a shared template or partial rather than the page you were looking at.

"Heading level 5 is skipped in a descending sequence of header levels" names the missing level instead of counting the jump. Reading down the page, the outline goes past level 5 without using it, usually an h4 followed directly by an h6.

A jump that large is nearly always a styling choice. Someone used an h6 because it was the right size for a small label or a footer column title. Make it one level below the heading it belongs under, or a p if it is not a section title at all, and set the size with a class.

Going back up the outline is different. The W3C headings tutorial notes that skipping ranks is fine when closing subsections: an h2 that starts a new section can follow an h4. axe-core's rule only flags jumps downward.

• Use one h1 for the page's main title.
• Do not skip levels going down: after an h2, the next deeper heading is an h3, not an h4.
• Choose the level for structure, not size. If an h3 looks too big, change its size in CSS, do not promote it to an h2 or demote a real section to a smaller heading.
• Do not use headings for visual emphasis. For bold styled text that is not a section title, use a paragraph with CSS instead of a heading element.

In practice, fixing this is usually swapping a heading tag (for example h4 to h3) and moving any styling to a class, so the page looks identical but reads correctly.

The scan above reports each heading that jumps a level and shows the element. Our reports list it under best practice rather than WCAG failures, so it will not inflate your failure count. Swap the tags, keep the sizes in CSS, and scan again.