Skipped Heading Level: Warning Explained and Fixed
Also called: Heading levels should only increase by one, Heading order, Skipped heading rank
Definition
A skipped heading level is a jump of more than one rank down the heading hierarchy, for example from h2 straight to h4. Screen reader users who navigate by headings may think a section is missing.
A skipped heading level is a jump down the heading hierarchy by more than one rank – an <h2> followed directly by an <h4>, or an <h1> followed by an <h3>. Scanners report it as "Heading levels should only increase by one" or "Skipped heading level". It is a best-practice warning, not always a WCAG failure, but it is a sign the heading structure no longer matches the content.
What it means
Many screen reader users explore a page by its headings first, the way sighted users skim bold titles. Headings give them an outline: an <h3> belongs under the <h2> before it. When a level is skipped, the outline has a gap, and the listener cannot tell whether a section is missing, hidden or just styled differently.
The related rule is WCAG 1.3.1 Info and Relationships, a Level A criterion of WCAG 2.2. It requires that structure conveyed visually – including headings – can be programmatically determined. Using <h1>–<h6> for headings (technique H42) meets that. The W3C Understanding page does not list skipped levels as a failure. Its advisory technique G141 says headings should be "properly nested", and the W3C headings tutorial adds: "Skipping heading ranks can be confusing and should be avoided where possible."
| Sequence | Verdict |
|---|---|
| h1 → h2 → h3 | Correct nesting |
| h3 → h2 (closing a subsection) | Fine – W3C: "It is ok to skip ranks when closing subsections" |
| h2 → h4 | Skipped heading level – best-practice warning |
| Bold paragraph that looks like a heading | Can fail 1.3.1 – structure is not programmatic |
The most common cause is choosing a heading level for its font size. Designers want a small heading, so the editor picks <h4>. Size belongs in CSS; the level describes the position in the outline.
Examples
<!-- Skipped heading level: h2 followed by h4 -->
<h1>Running shoes</h1>
<h2>Trail running</h2>
<h4>Waterproof models</h4> <!-- chosen for its small font size -->
<!-- Fixed: correct level, size set in CSS -->
<h1>Running shoes</h1>
<h2>Trail running</h2>
<h3 class="heading-small">Waterproof models</h3>
<!-- Fine: going back up after a subsection -->
<h3>Sizing</h3>
<h2>Road running</h2>Pick the level from the outline (one below the parent section), style it with a CSS class, and keep one clear <h1> for the main content of each page.
Pick <h4> because it looks right, use heading tags for sidebar teasers or decorative text, or replace headings with bold paragraphs.
How to fix a skipped heading level
Questions
Is skipping heading levels a WCAG violation?
Usually not on its own. WCAG 1.3.1 requires headings to be marked up as headings, and W3C recommends proper nesting as advisory guidance. It becomes a failure when the coded structure contradicts what users see.
Can I go from h3 back to h2?
Yes. Going back up when a subsection ends is expected. Only steps down should go one level at a time.
Can a page start with an h2 instead of an h1?
It is not a WCAG failure, but most audits recommend one <h1> that names the main content, so the outline has a clear starting point.
How do I find skipped heading levels on my site?
Check one page per template, because the cause is usually there. The free WCAG scanner points to the affected headings, together with related structure issues such as a missing lang attribute.
Related terms
Duplicate ID: Why It Still Breaks Accessibility
A duplicate ID is an id value used on more than one element of the same page. Labels, ARIA attributes and anchor links that point to that id then reach only the first element, so other fields and controls lose their name or description.
Read definition: Duplicate ID: Why It Still Breaks AccessibilityMissing Lang Attribute: Error Explained and Fixed
A missing lang attribute means the html element of a page has no lang attribute, or an empty or invalid one. Browsers and screen readers then cannot tell which language the page is written in.
Read definition: Missing Lang Attribute: Error Explained and FixedEmpty Link: What the Error Means and How to Fix It
An empty link is a link element that has no accessible name – no text, no alt text on an image inside it and no aria-label. Screen readers can only announce it as a bare link, so users cannot tell where it leads.
Read definition: Empty Link: What the Error Means and How to Fix It