Heading Order

Why It Matters

• Screen reader users navigate by headings more than any other method. Skipped levels break this navigation and cause confusion.
• Search engines use heading hierarchy to understand the topic structure of a page. A clear outline reinforces content relevance.
• WCAG 1.3.1 requires that document structure is programmatically determinable — headings are the primary tool for this.
• Heading order issues are flagged by both Lighthouse and dedicated accessibility scanners like axe-core.

How to Fix It

1. Start every page with a single <h1> that describes the page's main topic.
2. Use <h2> for major sections, <h3> for subsections within those, and so on — never skip a level.
3. Do not choose heading levels based on visual size. Use CSS to style headings to the desired size while keeping the semantic hierarchy correct.
4. If a sidebar or footer needs its own heading, make sure the level fits into the overall page outline — or use aria-label on a landmark region instead.
5. Use browser developer tools or an accessibility checker to view the heading outline and verify it reads as a logical table of contents.

Common Mistakes

• Jumping from <h1> to <h3> because <h2> "looks too big" — use CSS to fix the size, not a different heading level.
• Using headings for visual emphasis on text that is not actually a section title.
• Having multiple <h1> elements on a single page — while technically valid in HTML5 sectioning, it confuses many screen readers and search engine parsers.
• Restarting heading levels inside component templates without considering the page-level hierarchy.