Heading Structure Analyzer

The Role of Heading Structure in Web Accessibility

Headings are the backbone of web page structure. For sighted users, headings provide visual cues about content organization through size, weight, and spacing. For screen reader users, headings serve as the primary navigation mechanism for understanding and traversing page content. According to the WebAIM Screen Reader User Survey, navigating by headings is the most common method users employ to find information on a page, with over 67% of respondents reporting they use headings as their first strategy.

What WCAG Says About Headings

WCAG 2.2 addresses heading structure through several success criteria. Success Criterion 1.3.1 (Info and Relationships) requires that information, structure, and relationships conveyed through presentation can be programmatically determined. This means headings must be marked up using proper heading elements (h1-h6), not just styled to look like headings. Success Criterion 2.4.6 (Headings and Labels) requires that headings describe the topic or purpose of the content they introduce. Additionally, Success Criterion 2.4.10 (Section Headings) at Level AAA recommends using headings to organize content into sections.

Common Heading Structure Problems

The most frequent heading error is skipping levels. Developers often choose heading levels based on visual appearance rather than document structure, jumping from h2 to h4 because they prefer the smaller font size. The correct approach is to use sequential heading levels and control appearance through CSS. Another common issue is using multiple h1 elements on a single page. While some frameworks and CMS platforms generate multiple h1s, this practice creates a flat document outline that provides no hierarchical information to assistive technology.

Empty headings are another problem this tool detects. These occur when a heading tag is present in the HTML but contains no text content. This can happen when headings are used as spacing elements, when content is dynamically loaded but fails, or when headings are styled as decorative elements. Screen readers will announce these as headings, confusing users who expect to hear meaningful content.

Best Practices for Heading Structure

Start every page with a single h1 that describes the page's primary purpose. Use h2 elements for major sections, h3 for subsections within h2 sections, and so on. Never skip levels going down the hierarchy. You may skip levels going back up: after an h4, it is perfectly valid to use an h2 for the next major section. Ensure every heading contains descriptive text that makes sense out of context, since screen reader users often navigate by pulling up a list of all headings on the page.

Do not use heading tags purely for visual styling. If you need large, bold text that is not a structural heading, use a paragraph or span element with appropriate CSS classes. Conversely, if content functions as a heading but is not marked up as one, screen reader users will not be able to find it through heading navigation.

Testing Your Heading Structure

This tool analyzes the heading structure of any HTML you paste in. It builds a visual tree showing the hierarchy, flags errors like skipped levels and empty headings, and provides a summary of the overall heading health. For a comprehensive accessibility audit, combine heading analysis with our other tools: check color contrast ratios, validate alt text on images, review link accessibility, and verify ARIA attribute usage. Together, these checks cover the most common and impactful accessibility issues found on the web.