Skipping Heading Levels: WCAG Violation, Cause, and Fix

Skipping heading levels — for example, going from an H2 directly to an H4 with no H3 in between — is a WCAG 1.3.1 violation because it misrepresents the document structure to assistive technologies. Screen reader users navigating by heading rely on level numbers to understand how sections relate to each other. When a level is skipped, the implied hierarchy is broken and the page becomes harder to navigate. This is one of the most common heading errors on production sites, and it is almost always caused by one preventable habit.

What "Skipping Heading Levels" Means

Heading levels in HTML form a hierarchy: H1 is the page title, H2 marks major sections within the H1, H3 marks subsections within each H2, and so on through H6. Sequential means each step down increases the number by exactly one. Skipping happens when you move down more than one level at a time: - H1 followed by H3 (skips H2) - H2 followed by H4 (skips H3) - H3 followed by H5 (skips H4) **What is allowed:** Moving back up any number of levels. You can go from H4 back to H2 — that closes the previous subsection and opens a new top-level section. The restriction is only on going *down* more than one level at a time. **What is not a skip:** Using H2, H3, H4 in sequence even if each level only appears once. Heading levels are about nesting depth, not required counts at each level.

Why Skipping Heading Levels Violates WCAG 1.3.1

WCAG Success Criterion 1.3.1 (Info and Relationships, Level A) requires that information conveyed through visual formatting is also available in the programmatic structure. Heading levels communicate structural relationships: "this H3 is a sub-section of the H2 above it." When you skip a level, you create a structural gap. An H4 appearing after an H2 implies there is a tier of content in between — but there is not. Assistive technologies have no way to know whether the H3 tier was intentionally omitted or was a markup error. The WCAG technique H42 (Using h1-h6 to identify headings) and WCAG failure F43 (Using structural markup in a way that does not represent relationships in the content) both directly address this. A skipped level is typically reported as an F43 failure in formal audits. Beyond WCAG, the HTML specification itself notes that authors "should not skip heading levels" — making it a violation of both the web standard and the accessibility guideline. Sell Custom Apparel — We Handle Printing & Free Shipping

How Skipped Heading Levels Affect Screen Reader Users

Screen reader users navigate web pages by pressing the H key (in NVDA and JAWS) or using a rotor (VoiceOver on iOS/macOS) to jump between headings. The screen reader announces the heading level and text, allowing users to build a mental map of the page structure without reading everything. With a skipped level, the user hears: "Heading level 2: Main Section Title" [no heading level 3 content] "Heading level 4: Sub-Sub-Topic" The user now has to decide: was H3 intentionally absent, or is the page broken? Did I miss content? Is there a subsection I navigated past? This cognitive overhead compounds on long pages with multiple skipped levels. For users who navigate to a specific section (they heard the H2, they want the H4 detail inside it), the missing H3 tier means they may not know that the H4 is a subsection of the H2 they heard — it looks like a top-level section at an unexpected depth. The WCAG guidance on this is clear: when users navigate a page using headings as a structural guide, skipped levels break that guide.

Why Skipping Heading Levels Happens: The Visual-Size Trap

The overwhelming cause of skipped heading levels is choosing heading tags based on visual size, not structural depth. Browsers render headings at different default sizes: H1 is largest, H6 is smallest. Developers and content editors sometimes reach for H4 or H5 because "it looks like the right size for this subheading" — not because the content is actually four levels deep in the hierarchy. This habit creates structurally incorrect documents that look fine visually but fail mechanically. **The fix habit:** Decouple heading size from heading level. If you want a heading that looks like an H4 but is structurally an H3, use `

` and apply the smaller font size in CSS. The visual output is identical to what the designer wanted; the structural markup is correct. In CMS environments like WordPress, rich text editors sometimes reset to H2 as the default even mid-document, causing editors to manually select H4 or H5 for subheadings without realizing they skipped levels. A post-publish heading validator check catches these before they reach readers.

How to Find and Fix Skipped Heading Levels

**Finding them:** 1. Open the page and get the page source (right-click > View Page Source). 2. Paste into the free heading validator at wildandfreetools.com/accessibility-tools/heading-validator/. 3. The tool shows a visual heading outline with each level indented. Skipped levels appear as sudden indentation jumps — an H4 that is visually two tiers deeper than the H2 above it with nothing in between. **Fixing them (three approaches):** **Approach 1 — Correct the level.** If you have an H2 followed by an H4, change the H4 to an H3. This is correct when the content is truly a subsection of the H2. **Approach 2 — Insert the missing level.** If the content actually is four levels deep (the H4 is a subsection of an H3, which is a subsection of the H2), insert the missing H3. This is correct when the hierarchy is legitimate but a tier was accidentally omitted. **Approach 3 — Rethink the structure.** If you skipped H3 because you had nothing meaningful to say at that level, that is a signal your content hierarchy is overcomplicated. Flatten it: remove the deep nesting and use H2 and H3 only. Most articles do not need heading levels below H3. **After fixing:** Re-run the validator. Confirm zero skipped-level warnings before republishing.

Frequently Asked Questions

Is it okay to go from H4 back up to H2?

Yes. Moving up heading levels (going from H4 to H2) is always allowed. It means you are closing a subsection and starting a new major section. The restriction only applies to moving down more than one level at a time.

If I fix the heading level, will the page look different?

Changing H4 to H3 will change the visual size if you have not set custom CSS for those heading levels. The fix for this is to apply CSS to the heading using a class, so you can control the visual size independently of the semantic level. The structural correction is necessary; the visual change is manageable with CSS.

Does a skipped heading level affect SEO as well as accessibility?

Yes. Search engines use heading hierarchy to understand the topical structure of a page. A skipped level creates a structural gap in that outline. While Google has not confirmed a direct ranking penalty for skipped levels, a page with clean heading structure is easier for crawlers to parse into a coherent topical map — which affects featured snippet eligibility and content understanding.

How often should I check for skipped heading levels?

Check every time you publish new content or update an existing page's heading structure. Build it into your pre-publish checklist: paste the final HTML into the validator before clicking Publish. For existing content, audit your top-traffic pages first, then work down your sitemap.