When Heading Structure Breaks: The Hidden Cost of Semantic Chaos

What happens when a screen reader user tries to navigate a webpage where headings jump from H2 directly to H5, then back to H3, then down to H6? They get lost in semantic chaos that makes the page essentially unusable.

I've been analyzing a particularly instructive example from the WCAG Repository (opens in new window) that demonstrates exactly this problem. The page violates WCAG 1.3.1 (Info and Relationships) (opens in new window) through broken heading hierarchy, and the impact on disabled users is immediate and frustrating.

The Anatomy of Broken Structure

The page's heading structure reads like a navigation nightmare:

• H1: Bug 78: Broken Heading Hierarchy
• H2: Section 1: Introduction
• H5: Details About Subsection ← Skips H3 and H4 entirely
• H3: Wait, Now We're Back to h3 ← Jumps back up
• H4: This is styled to look small
• H2: Section 2: More Content ← Back to main level
• H6: Very Deep Subsection ← Jumps to deepest level
• H2: Section 3: Another Section

For sighted users, visual cues like font size and spacing help establish hierarchy. But screen reader users depend entirely on semantic structure to understand how content relates. When headings skip levels or jump around randomly, the logical flow disappears.

According to the demonstration page, "Screen reader users expect logical nesting," and "Skips confuse document structure navigation." This isn't theoretical—it's a daily reality for the millions of people who navigate the web through assistive technology.

The Real-World Impact

Consider Maria, a blind attorney who uses JAWS to research case law online. When she encounters broken heading hierarchy, she can't quickly scan document structure or understand which sections contain subsections. Research from accessibility organizations shows that heading navigation is often the primary way screen reader users orient themselves on complex pages.

The specific problems compound:

Navigation becomes unreliable: Screen reader users often jump between heading levels to understand content structure. When H2 is followed by H5, they can't tell if they've missed content or if the structure is simply broken.

Content relationships disappear: Is that H6 heading a subsection of the previous H2, or something entirely different? Without proper nesting, users lose the logical connections between ideas.

Scanning becomes impossible: Many screen reader users scan headings first to decide if a page is worth reading. Chaotic hierarchy makes this strategy useless.

Beyond the Technical Violation

This example also demonstrates a common developer mistake: using headings for visual styling rather than semantic meaning. The page shows an H3 element styled to look like a paragraph:

<h3 style="font-size: 14px; font-weight: normal; color: #666;">
  This looks like a paragraph
</h3>

This approach breaks the fundamental principle that HTML provides meaning while CSS handles presentation. When developers choose heading levels based on desired font size rather than content hierarchy, they create exactly the kind of semantic chaos demonstrated here.

Building Better Structure

The solution isn't complex, but it requires thinking about content organization before implementation. Here's what actually works:

Start with content structure, not visual design: Before writing any code, outline your content hierarchy. What are the main sections? What are the subsections? This logical structure should drive your heading choices.

Follow sequential nesting: H1 leads to H2, H2 leads to H3, and so on. If you need an H4, there should be an H3 above it in the hierarchy. No exceptions.

Separate semantics from styling: Choose heading levels based on content hierarchy, then use CSS to achieve the visual design you want. Need an H3 to look smaller? Style it with CSS, don't jump to H5.

Test with actual screen readers: Automated tools can catch heading level skips, but they can't tell you if the resulting structure makes sense to users. The methodology challenges we've documented show why combining automated detection with real user testing produces better outcomes.

The Organizational Reality

From an operational capacity perspective, fixing heading hierarchy is actually one of the more manageable accessibility improvements teams can make. Unlike complex interactive widgets or multimedia content, heading structure requires no specialized tools or extensive training.

Most content management systems make proper heading hierarchy straightforward—if developers understand why it matters. The challenge isn't technical complexity; it's ensuring teams understand the implementation principles that connect code choices to user experience.

For development teams: Integrate heading structure review into your code review process. It takes seconds to verify that H2 follows H1, H3 follows H2, and so on.

For content creators: Many CMS platforms include heading level indicators. Use them based on content hierarchy, not visual preferences.

For QA processes: Screen reader testing should include navigation by heading. If the content structure doesn't make sense when navigating this way, it needs fixing.

The Bigger Picture

This single webpage demonstrates a broader truth about digital accessibility: small structural decisions create large barriers for disabled users. When we treat HTML semantics as suggestions rather than requirements, we build environments that exclude people who depend on that structure.

The Department of Justice's guidance on web accessibility (opens in new window) consistently emphasizes that accessible design starts with proper HTML structure. Heading hierarchy isn't a technical nicety—it's a civil rights issue that determines whether disabled people can effectively use digital content.

Every H2 that jumps to H5, every heading chosen for font size rather than semantic meaning, every navigation structure that prioritizes visual design over logical organization creates barriers that shouldn't exist. The good news? These are barriers we know exactly how to prevent.

The question isn't whether we can build better heading structure. It's whether we'll choose to do it consistently, from the start, every time. Because for screen reader users trying to navigate our content, proper semantic structure isn't just helpful—it's essential for basic usability.