# Skipped Heading Level: Warning Explained and Fixed

Source: https://allyway.ai/glossary/skipped-heading-level

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](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html), a Level A criterion of [WCAG 2.2](https://allyway.ai/regulations/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 |

> **Note:** > **When it becomes a real WCAG problem**
> A skipped level alone usually does not fail 1.3.1. It does when the levels contradict the visual structure – for example when a subsection looks nested but is coded as a higher rank than its parent, or when headings are faked with bold text.

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

```html title="Example"
<!-- 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>
```

**Do:** Do

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.

**Don't:** Don't

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

Q: Is skipping heading levels a WCAG violation?
A: 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.

Q: Can I go from h3 back to h2?
A: Yes. Going back up when a subsection ends is expected. Only steps down should go one level at a time.

Q: Can a page start with an h2 instead of an h1?
A: 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.

Q: How do I find skipped heading levels on my site?
A: Check one page per template, because the cause is usually there. The [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) points to the affected headings, together with related structure issues such as a [missing lang attribute](https://allyway.ai/glossary/missing-lang-attribute).