Broken Heading Hierarchy (Skipping Levels)

Why it matters

Headings are the primary navigation mechanism for screen reader users on long pages. Screen readers allow users to jump from heading to heading using keyboard shortcuts (H key in NVDA/JAWS, Ctrl+Option+Cmd+H in VoiceOver), building a mental model of the page structure similar to a document outline. When headings skip levels, users lose orientation — they cannot tell whether they are in a sub-section or a new major section. A page that jumps from H2 to H4 tells the screen reader user "there must be an H3 section I missed" causing them to search backward for non-existent content. For people with cognitive disabilities, proper heading hierarchy enables predictable navigation that reduces cognitive load. Search engines also use heading structure to understand page topics and sub-topics.

Symptoms — what you'll see

If your site has this problem, you may observe any of the following:

• Page jumps from H1 to H3, or H2 to H4, skipping levels
• Multiple H1 elements on a single page (only one H1 should exist per page)
• No H1 element on the page at all
• Headings used for visual styling (large bold text) rather than document structure
• Heading levels chosen based on desired font size, not content hierarchy
• Screen reader heading navigation jumps confusingly
• WAVE flags "Missing heading" or heading level skip errors
• axe DevTools reports heading-order violations

Common causes

• Choosing heading levels by visual size (H4 looks like the size I want) rather than hierarchy
• Copy-pasting content from different sections that had different heading structures
• CMS WYSIWYG editors that make it easy to choose heading styles visually
• Component library headings with hardcoded levels that don't flex to context
• Adding new content sections without checking the existing heading structure
• Marketing teams adding styled "heading-like" elements using H1 for impact
• Page builders (Elementor, Webflow, Divi) that allow arbitrary heading selection

How to fix it

1. 1Use WAVE to visualize your page's heading structure — click the "Structure" view to see headings in order.
2. 2Ensure exactly one H1 per page that describes the page's main topic.
3. 3Structure headings as an outline: H1 (page title) > H2 (major sections) > H3 (sub-sections) > H4 (sub-sub-sections).
4. 4Never skip levels in the sequence — going from H2 to H4 skips H3 and is a violation.
5. 5If a heading needs to look like a smaller size, use CSS to style it rather than using a lower heading level.
6. 6If a heading needs to look larger for visual reasons, keep the correct semantic level and override font-size via CSS.
7. 7Do not use headings for styling purposes — use <p>, <strong>, or CSS classes instead.
8. 8Review dynamically-loaded content: SPA route changes and AJAX-loaded sections must maintain correct heading nesting.

<!-- BROKEN: skips H2, jumps H1 to H3 -->
<h1>Web Accessibility Guide</h1>
  <h3>What is WCAG?</h3>  <!-- WRONG: skipped H2 -->
    <h5>WCAG Principles</h5>  <!-- WRONG: skipped H4 -->
  <h3>How to Test</h3>

<!-- BROKEN: multiple H1s on same page -->
<h1>Homepage</h1>
<!-- ... -->
<h1>Featured Products</h1>  <!-- WRONG: second H1 -->

<!-- FIXED: proper heading hierarchy -->
<h1>Web Accessibility Guide</h1>
  <h2>What is WCAG?</h2>
    <h3>WCAG Principles</h3>
  <h2>How to Test</h2>
    <h3>Automated Testing Tools</h3>
    <h3>Manual Testing Steps</h3>

<!-- FIXED: one H1, sections use H2 -->
<h1>Homepage</h1>
<!-- ... -->
<h2>Featured Products</h2>

How to test your fix

After applying the fix, verify it works using these testing steps:

1. Run WAVE and click the "Structure" button in the toolbar — it shows all headings in order with their levels.
2. Use the HeadingsMap browser extension (Chrome/Firefox) for a visual heading tree.
3. Open NVDA or VoiceOver, use headings list (Insert+F7 in NVDA) to see all headings on the page.
4. Run axe DevTools and look for "heading-order" violations.
5. Manually review page HTML for any <h1> through <h6> elements and verify the hierarchy makes logical sense as an outline.

Frequently asked questions