What is a skipped heading level?

A skipped level happens when a heading is more than one level deeper than the heading before it, such as an h2 followed directly by an h4. Screen-reader users navigating by headings lose the sense of where they are in the hierarchy.

Which WCAG rule does this relate to?

WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) requires that structure conveyed visually is also available programmatically. Correctly nested headings are the primary way page structure is exposed to assistive technology.

Should every page have exactly one h1?

Best practice in HTML5 is a single h1 describing the page's main topic. Multiple h1s are technically allowed inside sectioning elements but are confusing for many assistive tools, so the checker flags more than one h1 as a warning.

Can heading levels go back up?

Yes. Moving from an h3 back to an h2 to start a new section is perfectly valid and is not flagged. Only increases of more than one level are a problem.

Does this send my HTML anywhere?

No. Parsing and analysis happen entirely in your browser using the built-in DOM parser. Nothing is uploaded or stored.

Heading Order Checker

The Heading Order Checker reads the h1–h6 elements out of any HTML you paste and shows them as an indented outline so you can immediately see whether your document is structured logically. Well-nested headings are the backbone of an accessible page: screen-reader users jump from heading to heading to skim content, and a broken hierarchy makes that navigation confusing.

How it works

The tool parses your HTML with the browser’s built-in DOMParser and walks every heading element in document order. For each heading it records its level (1–6) and its text. It then compares each heading’s level to the previous one:

If the level increases by more than one (for example h2 directly to h4), that is a skipped level and gets flagged.
If the level decreases or increases by exactly one, the structure is valid.

It also counts the number of h1 elements: zero h1 (no page title) and more than one h1 are both surfaced as warnings, because each can confuse assistive technology.

This mirrors WCAG 2.1 SC 1.3.1, which requires the structure you convey visually to also be exposed programmatically.

Example

Given this fragment:

<h1>Annual Report</h1>
<h2>Finances</h2>
<h4>Q1 Revenue</h4>

The jump from h2 to h4 skips h3, so the checker marks the Q1 Revenue heading as a skipped level. The fix is to either change it to an h3, or insert an intermediate h3 section heading above it.

Tips

Run the checker on a component’s rendered HTML, not your source template, so dynamically inserted headings are included.
A long run of same-level headings is fine — only the transitions between levels matter for this check.
Pair this with a link-text and table-header review for a fuller accessibility pass before publishing.