Why A11y?

Heading Structure

How to create proper heading hierarchy for better accessibility and SEO.

Proper heading structure is fundamental to web accessibility. Headings create a document outline that helps users understand the page structure and navigate content efficiently. Good heading hierarchy ensures that all users can understand the relationships between different sections of content.

Why Heading Structure Matters

Heading structure is the backbone of content organization and navigation - it creates a mental map that helps users understand how information is related and where to find what they need. When heading structure is poor, users struggle to understand content relationships and navigation becomes inefficient.

For screen reader users: Headings are the primary navigation method. Screen readers can jump between headings, allowing users to quickly scan content and find relevant sections. Without proper heading structure, screen reader users must read through all content linearly, which is time-consuming and frustrating.

For users with cognitive disabilities: Clear heading hierarchy reduces cognitive load by organizing information into logical chunks. Users can understand content relationships and predict where to find specific information. Poor heading structure can make content seem overwhelming and disorganized.

For keyboard navigation users: Headings often serve as navigation landmarks. Users can jump between sections using heading navigation, making it easier to find specific content without extensive tabbing.

For users with visual impairments: Heading structure provides visual cues about content organization. Users with low vision rely on heading styles and hierarchy to understand page structure and content relationships.

For all users: Good heading structure improves readability and comprehension. It helps users scan content, understand relationships between sections, and find information quickly.

The Impact of Poor Heading Structure

When heading structure is problematic, it creates significant barriers:

  • Screen reader users must read content linearly, making navigation slow and inefficient
  • Users with cognitive disabilities may become overwhelmed by poorly organized content
  • All users struggle to understand content relationships and find specific information
  • SEO and search engines may not understand content structure, affecting search rankings

This is why WCAG 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels) specifically address heading structure requirements.

Basic Heading Hierarchy

The foundation of accessible heading structure follows a logical hierarchy:

<h1>Page Title</h1>

<h2>Main Section</h2>
<p>Content for main section...</p>

<h3>Subsection</h3>
<p>Content for subsection...</p>

<h4>Sub-subsection</h4>
<p>Content for sub-subsection...</p>

<h2>Another Main Section</h2>
<p>Content for another main section...</p>

<h3>Another Subsection</h3>
<p>Content for another subsection...</p>

Heading Outline:

  • H1: Page Title
  • H2: Main Section
    • H3: Subsection
      • H4: Sub-subsection
  • H2: Another Main Section
    • H3: Another Subsection

Common Heading Patterns

Article or Blog Post

<article>
  <h1>How to Create Accessible Websites</h1>
  
  <h2>Introduction</h2>
  <p>Web accessibility is essential for inclusive design...</p>
  
  <h2>Understanding Accessibility</h2>
  <p>Accessibility means making your website usable by everyone...</p>
  
  <h3>Types of Disabilities</h3>
  <p>There are several types of disabilities to consider...</p>
  
  <h4>Visual Disabilities</h4>
  <p>Users with visual disabilities may use screen readers...</p>
  
  <h4>Motor Disabilities</h4>
  <p>Users with motor disabilities may use keyboard navigation...</p>
  
  <h3>Accessibility Guidelines</h3>
  <p>WCAG provides comprehensive guidelines for accessibility...</p>
  
  <h2>Implementation Strategies</h2>
  <p>Here are practical strategies for implementing accessibility...</p>
  
  <h3>Semantic HTML</h3>
  <p>Use semantic HTML elements to provide meaning...</p>
  
  <h3>Keyboard Navigation</h3>
  <p>Ensure all functionality is keyboard accessible...</p>
  
  <h2>Conclusion</h2>
  <p>Accessibility is not just a legal requirement...</p>
</article>

Product Page

<main>
  <h1>Premium Coffee Maker</h1>
  
  <h2>Product Overview</h2>
  <p>Our premium coffee maker delivers perfect coffee every time...</p>
  
  <h2>Features</h2>
  
  <h3>Brewing Technology</h3>
  <p>Advanced brewing technology ensures optimal extraction...</p>
  
  <h3>Programmable Settings</h3>
  <p>Set your preferred brewing time and temperature...</p>
  
  <h3>Easy Maintenance</h3>
  <p>Removable parts make cleaning simple and thorough...</p>
  
  <h2>Specifications</h2>
  
  <h3>Dimensions</h3>
  <p>Height: 12 inches, Width: 8 inches, Depth: 6 inches...</p>
  
  <h3>Capacity</h3>
  <p>12-cup capacity with 4-cup minimum...</p>
  
  <h2>Customer Reviews</h2>
  
  <h3>Recent Reviews</h3>
  <p>See what customers are saying about this product...</p>
  
  <h3>Rating Summary</h3>
  <p>Average rating: 4.5 out of 5 stars...</p>
</main>

Contact Form Page

<main>
  <h1>Contact Us</h1>
  
  <h2>Get in Touch</h2>
  <p>We'd love to hear from you. Please fill out the form below...</p>
  
  <h2>Contact Information</h2>
  
  <h3>Phone</h3>
  <p>Call us at 1-800-123-4567</p>
  
  <h3>Email</h3>
  <p>Email us at info@example.com</p>
  
  <h3>Address</h3>
  <p>123 Main Street, City, State 12345</p>
  
  <h2>Contact Form</h2>
  
  <form>
    <h3>Personal Information</h3>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
    
    <h3>Message Details</h3>
    <label for="subject">Subject:</label>
    <input type="text" id="subject" name="subject" required />
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
    
    <button type="submit">Send Message</button>
  </form>
</main>

CSS for Heading Styling

Semantic Styling

/* Style headings semantically, not by level */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

h4 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

h5 {
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
}

h6 {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
}

Visual Hierarchy

/* Create visual hierarchy without changing semantic structure */
.page-title {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  border-bottom: 2px solid var(--accent-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.subsection-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 0.75rem;
}

Common Heading Structure Mistakes

❌ Bad: Skipping heading levels

<!-- Bad: Skipping from h1 to h3 -->
<h1>Page Title</h1>
<h3>Section Title</h3> <!-- Missing h2 -->
<h4>Subsection</h4>

Problems:

  • Creates confusing document outline
  • Screen readers may not announce structure correctly
  • Violates WCAG guidelines

❌ Bad: Multiple h1 elements

<!-- Bad: Multiple h1 elements -->
<h1>Page Title</h1>
<h2>Main Section</h2>
<h1>Another Main Title</h1> <!-- Should be h2 -->
<h3>Subsection</h3>

Problems:

  • Confuses screen reader users
  • Creates unclear page structure
  • Violates accessibility guidelines

❌ Bad: Using headings for styling

<!-- Bad: Using h2 for styling instead of semantic meaning -->
<h2 style="font-size: 18px; color: blue;">Important Notice</h2>
<p>This is not actually a section heading...</p>

Problems:

  • Misleads screen reader users
  • Creates false document structure
  • Should use CSS classes instead

❌ Bad: Empty or non-descriptive headings

<!-- Bad: Non-descriptive heading -->
<h2>Section 1</h2>
<p>Content about accessibility...</p>

<!-- Bad: Empty heading -->
<h3></h3>
<p>Content without proper heading...</p>

Problems:

  • Doesn’t help users understand content
  • Screen readers announce meaningless text
  • Poor user experience

Testing Heading Structure

Manual Testing

  1. Screen Reader Testing: Use NVDA, JAWS, or VoiceOver to navigate by headings
  2. Heading Outline: Use browser developer tools to view document outline
  3. Visual Verification: Ensure visual hierarchy matches semantic structure
  4. Content Review: Verify headings accurately describe content

Automated Testing

// Test heading structure programmatically
function testHeadingStructure() {
  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  const headingLevels = [];
  let previousLevel = 0;
  
  headings.forEach(heading => {
    const level = parseInt(heading.tagName.charAt(1));
    const text = heading.textContent.trim();
    
    headingLevels.push({
      level: level,
      text: text,
      element: heading
    });
    
    // Check for skipped levels
    if (level > previousLevel + 1) {
      console.warn(`Skipped heading level: ${previousLevel} → ${level}`, heading);
    }
    
    // Check for empty headings
    if (!text) {
      console.error('Empty heading found:', heading);
    }
    
    previousLevel = level;
  });
  
  // Check for multiple h1 elements
  const h1Elements = document.querySelectorAll('h1');
  if (h1Elements.length > 1) {
    console.error('Multiple h1 elements found:', h1Elements);
  }
  
  console.log('Heading structure:', headingLevels);
}

Heading Structure Guidelines

Use One H1 Per Page

<!-- Good: Single h1 per page -->
<h1>Page Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>

<!-- Bad: Multiple h1 elements -->
<h1>Page Title</h1>
<h1>Another Title</h1>

Don’t Skip Levels

<!-- Good: Logical progression -->
<h1>Page Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

<!-- Bad: Skipping levels -->
<h1>Page Title</h1>
<h3>Subsection</h3> <!-- Missing h2 -->

Use Descriptive Text

<!-- Good: Descriptive headings -->
<h2>Accessibility Best Practices</h2>
<h3>Keyboard Navigation</h3>
<h4>Focus Management</h4>

<!-- Bad: Non-descriptive headings -->
<h2>Section 1</h2>
<h3>Subsection A</h3>
<h4>Part 1</h4>

Advanced Heading Patterns

Dynamic Content Headings

<!-- Dynamic headings for content sections -->
<main>
  <h1>Product Catalog</h1>
  
  <section>
    <h2>Featured Products</h2>
    <div class="product-grid">
      <article>
        <h3>Premium Coffee Maker</h3>
        <p>Product description...</p>
      </article>
      <article>
        <h3>Smart Coffee Grinder</h3>
        <p>Product description...</p>
      </article>
    </div>
  </section>
  
  <section>
    <h2>All Products</h2>
    <div class="product-grid">
      <!-- More products with h3 headings -->
    </div>
  </section>
</main>

Nested Section Headings

<!-- Nested sections with proper heading hierarchy -->
<main>
  <h1>Complete Guide to Web Accessibility</h1>
  
  <section>
    <h2>Understanding Accessibility</h2>
    
    <section>
      <h3>What is Web Accessibility?</h3>
      <p>Web accessibility means making websites usable by everyone...</p>
    </section>
    
    <section>
      <h3>Why Accessibility Matters</h3>
      <p>Accessibility is essential for inclusive design...</p>
      
      <section>
        <h4>Legal Requirements</h4>
        <p>Many countries have laws requiring web accessibility...</p>
      </section>
      
      <section>
        <h4>Business Benefits</h4>
        <p>Accessible websites reach more customers...</p>
      </section>
    </section>
  </section>
  
  <section>
    <h2>Implementation Guidelines</h2>
    
    <section>
      <h3>Semantic HTML</h3>
      <p>Use semantic HTML elements to provide meaning...</p>
    </section>
    
    <section>
      <h3>Keyboard Navigation</h3>
      <p>Ensure all functionality is keyboard accessible...</p>
    </section>
  </section>
</main>

ARIA Landmarks with Headings

<!-- Using ARIA landmarks with proper heading structure -->
<main>
  <h1>Company Website</h1>
  
  <nav aria-label="Main navigation">
    <h2>Site Navigation</h2>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  
  <section aria-labelledby="about-heading">
    <h2 id="about-heading">About Our Company</h2>
    <p>We are dedicated to creating accessible websites...</p>
    
    <section aria-labelledby="mission-heading">
      <h3 id="mission-heading">Our Mission</h3>
      <p>To make the web accessible to everyone...</p>
    </section>
    
    <section aria-labelledby="team-heading">
      <h3 id="team-heading">Our Team</h3>
      <p>Meet the people behind our mission...</p>
    </section>
  </section>
  
  <aside aria-labelledby="sidebar-heading">
    <h2 id="sidebar-heading">Related Resources</h2>
    <ul>
      <li><a href="/accessibility-guide">Accessibility Guide</a></li>
      <li><a href="/tools">Accessibility Tools</a></li>
    </ul>
  </aside>
</main>

Remember: Proper heading structure is essential for accessibility and usability. Always test your heading hierarchy and ensure it creates a logical, meaningful document outline.