How to fix: Heading hierarchy skips levels

Headings (h1 through h6) form the outline of a page, and screen reader users rely on that outline to understand and jump around content. WCAG Success Criterion 1.3.1 Info and Relationships requires that this structure, which is conveyed visually by size and weight, also be correct in code. That means levels should not be skipped: going straight from an h2 to an h4 leaves a gap in the outline, as if a chapter jumped from section 2 to section 2.0.0.1 with nothing in between.

Two patterns break the hierarchy. First, the page does not start at h1, so the very first heading is, say, an h2 or h3, leaving the outline without a clear top. Second, a later heading jumps more than one level deeper than the previous heading, for example h2 directly to h4. Both confuse the perceived nesting of the content.

Crucially, heading levels are about structure, not appearance. If an h3 looks too big or an h2 too small, that is a styling problem to solve with CSS, not a reason to pick the wrong tag. Choose the level that reflects the content's place in the outline, then style it however you like.

Screen reader users are the core group. Most navigate by pulling up a list of headings or jumping heading-to-heading with a single keystroke, treating headings like a table of contents. A skipped level makes them wonder whether they missed content, and a missing h1 removes the anchor they expect at the top of the page.

It also affects people with cognitive disabilities, who benefit from a predictable, logically nested structure, and it improves SEO and document-to-PDF exports, both of which read the heading outline. A clean hierarchy makes long pages scannable for everyone.

Skipped heading levels fail SC 1.3.1, a Level A criterion, and broken structure is one of the most common categories surfaced by automated WCAG tools. Heading hierarchy underpins how assistive technology exposes your whole page, so getting it wrong degrades navigation site-wide, not just on one element.

While heading order is less of a lone lawsuit trigger than missing alt text or contrast, it is a standard finding in any serious audit, and WCAG 2.1 Level AA (which includes all Level A criteria) is the benchmark courts apply to ADA claims. Fixing it is almost always free: you are changing tag levels, then using CSS for the visual sizing you actually wanted.

1. Read down the page and list the headings in document order with their levels (h1, h2, h3, and so on).
2. Confirm the first heading is an h1 that names the page's main topic; if it is not, promote it.
3. Walk the list and find any jump greater than one level (for example h2 straight to h4) and change the deeper heading to the next sequential level.
4. Pick heading levels by structure, not by how big they look; use CSS to handle the visual size and weight.
5. Re-scan to confirm the outline starts at h1 and never skips a level.

<h1>Pricing</h1>
<h3>Pro plan</h3>
<h4>What's included</h4>

<h1>Pricing</h1>
<h2>Pro plan</h2>
<h3>What's included</h3>

AccessKnight collects all h1 through h6 elements in document order and walks them top to bottom, tracking the previous heading's level. It flags a problem in two cases: when the first heading on the page is not an h1 (the outline does not start at the top level), or when any heading is more than one level deeper than the heading before it, such as an h2 followed directly by an h4. Descending by exactly one level, staying the same, or moving back up to a higher level are all treated as valid; only forward jumps that skip a level are reported.