Improper Heading Structure

What This Means

Heading structure refers to the hierarchical organization of headings (H1, H2, H3, H4, H5, H6) on a webpage. Proper heading hierarchy follows a logical outline structure, never skipping levels. Screen readers use headings as a navigation tool, allowing users to quickly jump between sections and understand content organization.

Impact on Your Business

Legal Compliance:

• Required by WCAG 2.1 Level AA (Success Criterion 2.4.6 Headings and Labels)
• Part of Section 508 compliance
• Common finding in accessibility audits
• Demonstrates semantic HTML best practices

User Experience:

• Screen reader users rely on heading navigation to understand page structure
• 26% of screen reader users navigate by headings as their primary method
• Improper hierarchy creates confusion about content relationships
• Users may miss important sections or misunderstand content flow

SEO Benefits:

• Search engines use heading hierarchy to understand content
• Proper H1-H6 structure improves content relevance signals
• Better heading structure can improve search rankings
• Featured snippets often pull from well-structured headings

Content Organization:

• Forces clear content hierarchy
• Improves content maintainability
• Makes content easier to scan for all users
• Supports better information architecture

How to Diagnose

Method 1: HeadingsMap Browser Extension (Recommended)

1. Install HeadingsMap:

   • Chrome/Edge Extension
   • Firefox Extension

2. Click HeadingsMap icon in browser toolbar

3. Review heading outline in sidebar

What to look for:

• Skipped levels - Example: H1 → H3 (skipping H2)
• Multiple H1s - Should typically have only one per page
• Incorrect nesting - H4 under H2 (skipping H3)
• Out-of-order headings - H2 after H3
• Empty headings - Headings with no text
• Generic headings - Multiple "Read more" headings

Good example:

H1 - Page Title
  H2 - Main Section 1
    H3 - Subsection 1.1
    H3 - Subsection 1.2
      H4 - Detail 1.2.1
  H2 - Main Section 2
    H3 - Subsection 2.1

Bad example:

H1 - Page Title
  H3 - Section (skipped H2)
    H2 - Subsection (wrong order)
  H4 - Another Section (skipped levels)
H1 - Another Title (multiple H1s)

Method 2: WAVE Browser Extension

1. Install WAVE Extension
2. Navigate to your webpage
3. Click the WAVE icon
4. Look for Structure panel
5. Review heading order and hierarchy

What to look for:

• Red alerts for skipped heading levels
• Warnings about multiple H1 elements
• Structural outline visualization
• Empty headings flagged

Method 3: Chrome DevTools Inspector

1. Right-click on page → Inspect
2. Open Elements panel
3. Use Ctrl+F to search for heading tags: <h1, <h2, etc.
4. Or run Console command:

// Display all headings in hierarchical order
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(heading => {
  const level = heading.tagName;
  const text = heading.textContent.trim();
  const indent = '  '.repeat(parseInt(level[1]) - 1);
  console.log(`${indent}${level}: ${text}`);
});

// Find skipped heading levels
let previousLevel = 0;
document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
  const currentLevel = parseInt(heading.tagName[1]);
  if (currentLevel - previousLevel > 1) {
    console.warn(`Skipped heading level: jumped from H${previousLevel} to H${currentLevel}`, heading);
  }
  previousLevel = currentLevel;
});

// Count H1 elements (should typically be 1)
const h1Count = document.querySelectorAll('h1').length;
console.log(`H1 count: ${h1Count} ${h1Count > 1 ? '⚠️ Should typically have only one H1' : '✓'}`);

What to look for:

• Level skipping (H1 → H3)
• Multiple H1 elements
• Empty headings
• Headings used for styling instead of structure

Method 4: axe DevTools

1. Install axe DevTools Extension
2. Open Chrome DevTools (F12)
3. Navigate to "axe DevTools" tab
4. Click "Scan ALL of my page"
5. Check for heading-related issues:
   • "Heading levels should only increase by one"
   • "Page should contain a level-one heading"
   • "Headings should not be empty"

What to look for:

• Critical and serious heading violations
• Best practice recommendations
• Specific elements highlighted
• Code snippets showing problematic headings

Method 5: Screen Reader Testing

1. Start screen reader:

   • Windows: NVDA (free)
   • Mac: VoiceOver (Cmd+F5)
   • Chrome: ChromeVox extension

2. Use heading navigation:

   • NVDA: H key (next heading), 1-6 keys (specific level)
   • VoiceOver: VO+Cmd+H (next heading)
   • JAWS: H key (next heading), 1-6 keys (specific level)

3. Listen to heading structure:

   • Are headings announced with correct levels?
   • Can you navigate logically through content?
   • Do headings make sense out of context?

What to look for:

• Confusion navigating by headings
• Missing sections when jumping by heading level
• Headings that don't describe their sections
• Difficulty understanding content organization

Method 6: Lighthouse Accessibility Audit

1. Open Chrome DevTools (F12)
2. Navigate to "Lighthouse" tab
3. Select "Accessibility" category
4. Click "Generate report"
5. Look for:
   • "Heading elements appear in a sequentially-descending order"
   • "Page has a logical tab order"

What to look for:

• Failed heading order audits
• Recommendations to fix hierarchy
• Impact on accessibility score

General Fixes

Fix 1: Establish Single H1 Per Page

Problem:

<!-- Bad - Multiple H1s -->
<h1>Company Name</h1>
<nav>...</nav>
<h1>Page Title</h1>
<section>
  <h1>Article Title</h1>
</section>

Solution:

<!-- Good - Single H1, proper hierarchy -->
<h1>Page Title: Article Title</h1>
<nav aria-label="Main navigation">...</nav>
<section>
  <h2>Article Section</h2>
  <h3>Subsection</h3>
</section>

Best practices:

• Use one H1 per page (represents main topic)
• H1 should describe the page's primary purpose
• Logo can be in H1 on homepage, but use div elsewhere
• Article/blog post title should be H1

Fix 2: Fix Skipped Heading Levels

Problem:

<!-- Bad - Skipped levels -->
<h1>Page Title</h1>
<h3>Section Title</h3>  <!-- Skipped H2 -->
<h5>Subsection</h5>      <!-- Skipped H4 -->

Solution:

<!-- Good - Sequential levels -->
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Detail Title</h4>

Rules for heading levels:

• Never skip levels going down (H1 → H3 ❌)
• Can skip levels going up (H4 → H2 ✓)
• Each level represents one step in hierarchy
• Think of it like an outline structure

When you can skip levels:

<!-- Acceptable - Going back up the hierarchy -->
<h1>Page Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h4>Detail 1.1.1</h4>
<h4>Detail 1.1.2</h4>
<!-- Jump back to H2 is OK -->
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>

Fix 3: Replace Styling Headings with CSS

Problem: Using headings for visual styling instead of structure

<!-- Bad - Using H4 for small text styling -->
<h1>Product Name</h1>
<h4>$19.99</h4>  <!-- Not a heading! -->
<p>Description...</p>
<h4>Buy Now</h4> <!-- Not a heading! -->

Solution: Use semantic HTML with CSS

<!-- Good - Proper semantic structure -->
<h1>Product Name</h1>
<p class="price">$19.99</p>
<p>Description...</p>
<button class="cta">Buy Now</button>

/* Style text without using heading tags */
.price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.cta {
  font-size: 1.2rem;
  font-weight: bold;
}

When to use headings:

• To mark section or subsection titles
• To create document outline structure
• To enable heading navigation
• NOT for visual styling alone

Fix 4: Make Headings Descriptive

Problem: Generic or empty headings

<!-- Bad - Non-descriptive headings -->
<h2>Section</h2>
<h2>More</h2>
<h2>Click Here</h2>
<h2></h2> <!-- Empty heading -->

Solution: Descriptive, meaningful headings

<!-- Good - Descriptive headings -->
<h2>Product Features</h2>
<h2>Customer Reviews</h2>
<h2>Pricing Plans</h2>
<h2>Frequently Asked Questions</h2>

Heading best practices:

• Describe the content that follows
• Be specific and meaningful
• Work out of context (screen reader lists headings)
• Avoid generic terms like "More", "Section", "Content"
• Never leave headings empty

Fix 5: Fix Common E-commerce Heading Issues

Problem: Product listings without structure

<!-- Bad - Each product has H1 -->
<div class="products">
  <div class="product">
    <h1>Product 1</h1>  <!-- Multiple H1s! -->
    <p>$29.99</p>
  </div>
  <div class="product">
    <h1>Product 2</h1>
    <p>$39.99</p>
  </div>
</div>

Solution: Proper hierarchy for product listings

<!-- Good - Logical hierarchy -->
<h1>Product Category: Running Shoes</h1>
<div class="products">
  <article class="product">
    <h2>Nike Air Max 270</h2>
    <p class="price">$29.99</p>
    <h3>Features</h3>
    <ul>...</ul>
  </article>
  <article class="product">
    <h2>Adidas Ultraboost</h2>
    <p class="price">$39.99</p>
    <h3>Features</h3>
    <ul>...</ul>
  </article>
</div>

E-commerce heading patterns:

• Category page H1: "Category Name"
• Product names: H2 in listings, H1 on product page
• Product sections: H3 (Features, Reviews, Specs)
• Keep consistent across site

Fix 6: Fix Blog/Article Heading Structure

Problem: Improper blog structure

<!-- Bad -->
<h3>Blog Title</h3>  <!-- Should be H1 -->
<h2>Introduction</h2> <!-- Wrong order -->
<h4>Author Bio</h4>   <!-- Skipped H3 -->

Solution: Proper article hierarchy

<!-- Good -->
<article>
  <h1>Blog Post Title</h1>
  <p class="meta">By Author Name | Date</p>

  <h2>Introduction</h2>
  <p>...</p>

  <h2>Main Topic</h2>
  <p>...</p>

  <h3>Subtopic 1</h3>
  <p>...</p>

  <h3>Subtopic 2</h3>
  <p>...</p>

  <h2>Conclusion</h2>
  <p>...</p>
</article>

<aside>
  <h2>About the Author</h2>
  <p>Author bio...</p>
</aside>

Article structure best practices:

• Article title: H1
• Major sections: H2
• Subsections: H3
• Further subsections: H4
• Author bio can be H2 if in sidebar/aside

Fix 7: Use ARIA When Heading Levels Are Constrained

When you can't change HTML (rare cases):

<!-- When visually styled as H4 but structurally should be H2 -->
<h2 class="styled-as-h4">Section Title</h2>

<style>
.styled-as-h4 {
  font-size: 1rem; /* H4 size */
  font-weight: 600;
}
</style>

Or use aria-level (avoid if possible):

<!-- Last resort - prefer proper HTML heading levels -->
<div role="heading" aria-level="2">Section Title</div>

When this might be necessary:

• CMS-generated content with heading constraints
• Complex applications where heading levels are dynamic
• Legacy systems that can't be easily refactored

Better solution: Fix the HTML

• Always prefer actual heading elements
• Work with developers to fix underlying structure
• ARIA should complement, not replace, proper HTML

Common Mistakes

1. Using headings for styling - H4 just to make text smaller
2. Multiple H1 elements - Should have one per page
3. Skipping levels descending - H1 → H3 (skipping H2)
4. Empty headings - <h2></h2> or <h2> </h2>
5. Generic headings - "Section", "More", "Content"
6. Headings in wrong order - H3 before H2
7. Using bold/strong instead of headings - <strong>Section</strong> instead of <h2>
8. Hidden headings for SEO - Display:none headings
9. Logo as H1 on every page - Should only be H1 on homepage
10. Inconsistent heading structure - Different hierarchy on different pages

Verification

After fixing heading structure:

1. Run HeadingsMap:

   • Install extension
   • View heading outline
   • Verify no skipped levels
   • Verify single H1
   • Check heading text is descriptive

2. Test with screen reader:

   • Use heading navigation (H key)
   • Jump between heading levels (1-6 keys)
   • Verify logical flow
   • Verify headings make sense out of context

3. Run WAVE:

   • No red alerts for heading structure
   • Verify heading order is logical
   • Check structure panel visualization

4. Run axe DevTools:

   • No heading violations
   • Verify sequential order
   • Check best practices pass

5. Lighthouse audit:

   • Generate accessibility report
   • Verify heading order passes
   • Check improved accessibility score

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Additional Resources

• WCAG 2.4.6: Headings and Labels
• WebAIM: Semantic Structure
• MDN: HTML Heading Elements
• A11Y Project: Headings
• Accessibility Issues Overview