Skipped heading levels: how to fix your heading structure

Updated 2026-10-24 · Altlark guides

Headings are the table of contents of a web page. Sighted users skim them by size and weight. Screen-reader users jump between them with a single key (H in NVDA and JAWS, or the rotor in VoiceOver) and many pull up a list of all headings to decide where to go. When the levels are out of order, say an h2 followed directly by an h4, that outline stops making sense: it looks like a section is missing, or that the h4 belongs somewhere it doesn't.

The usual cause is choosing heading tags by how big they look rather than what they mean. A designer wants smaller text, so the developer uses h4.

Which WCAG criteria apply

• 1.3.1 Info and Relationships, Level A: structure that's conveyed visually (this is a section, this is a subsection) must also be available in code.
• 2.4.6 Headings and Labels, Level AA: headings describe the topic or purpose of their section.

Strictly, WCAG doesn't say "never skip a level" in so many words. But a skipped level is one of the most common ways the visual structure and the coded structure drift apart, which is why Altlark reports it as a warning rather than an error. Treat it as "worth a look".

Bad vs fixed: skipping for style

<h1>Emergency plumbing</h1>
<h4>Available 24/7</h4>
<h2>Our services</h2>
<h4>Leak repair</h4>
<h4>Water heaters</h4>

<h1>Emergency plumbing</h1>
<p class="tagline">Available 24/7</p>
<h2>Our services</h2>
<h3 class="small-heading">Leak repair</h3>
<h3 class="small-heading">Water heaters</h3>

The tagline wasn't really a heading, so it becomes a paragraph. The service names are subsections of "Our services", so they're h3. The small-heading class keeps the look the designer wanted:

.small-heading { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }

Bad vs fixed: no h1, or several

<div class="hero-title">Welcome to Acme Bakery</div>
<h2>Fresh bread daily</h2>

<h1 class="hero-title">Welcome to Acme Bakery</h1>
<h2>Fresh bread daily</h2>

Many themes put the site name in an h1 on every page and the page title in a second h1. Use one h1 per page that describes that page's main content; the logo or site name doesn't need to be a heading at all.

<header><h1><a href="/">Acme Bakery</a></h1></header>
<main><h1>Wedding cakes</h1></main>

<header><a href="/" class="site-name">Acme Bakery</a></header>
<main><h1>Wedding cakes</h1></main>

Going back up is fine

Skipping down is the problem; going back up isn't. After an h4 you can go straight to an h2 when a new major section starts:

<h2>Pricing</h2>
<h3>Monthly plans</h3>
<h4>What's included</h4>
<h2>Frequently asked questions</h2>

Page builders and widgets

Page builders (Elementor, Divi, Squarespace blocks) often let you pick the tag for each heading widget separately from its style. Set the tag by structure and the size by the style controls. Sidebar and footer widgets frequently use h4 or h5 titles regardless of context; check your theme's widget settings or override the tag in the template.

What Altlark checks exactly

Altlark collects all <h1> to <h6> elements in document order, ignoring ones hidden from assistive technology, then reports:

• No h1 heading (warning) when there are zero h1 elements.
• More than one h1 (warning) when there are two or more, pointing at the second one.
• Skipped heading level (warning) each time a heading is more than one level deeper than the previous one, with a note like "h2 is followed by h4". The first heading on a page can be any level.

Elements with role="heading" and aria-level aren't counted yet; if your site uses them, check them manually.

Limits

The check is purely structural. It can't tell whether your headings describe their sections well (2.4.6), or whether something that looks like a heading is coded as a styled paragraph, which is the opposite problem and just as confusing. Skim the page with a heading-list tool (most screen readers have one, and browser extensions like HeadingsMap show the outline) to see what a screen-reader user would see.

Testing it yourself

Install a heading outline extension (such as HeadingsMap for Chrome or Firefox) and open your page. You'll see the headings as an indented tree. If the tree reads like a sensible table of contents, with sections and subsections in order, you're in good shape. With a screen reader, press H repeatedly (NVDA or JAWS) to jump from heading to heading, or open the headings list: NVDA's Elements List (Insert+F7) or the VoiceOver rotor (Control+Option+U). Listen for headings that don't describe their sections, decorative text that's been coded as a heading, and real section titles that aren't headings at all. Those last two are just as confusing as a skipped level, and no static check can judge them for you.

Checklist

1. Run the free scan and look at the heading warnings.
2. Make sure each page has exactly one h1 that names the page.
3. Change skipped levels to the next level down, and restyle with CSS.
4. Turn decorative "headings" (taglines, eyebrow text) into paragraphs or spans.
5. Re-scan and review the outline once by hand.