Heading levels skip or are out of order

What this means

The heading structure of the page skips levels (e.g., jumping from <h1> to <h3> without an <h2>) or uses headings in a non-sequential order. Screen reader users navigate by headings to understand page structure — skipped levels create a confusing outline.

WCAG requirement

Success Criterion 1.3.1 — Info and Relationships: information, structure, and relationships conveyed through presentation must be programmatically determinable.

How to fix

1. Use headings in order: <h1> → <h2> → <h3>, never skip levels
2. One <h1> per page: this is the page title
3. Use CSS for visual styling: if you want text to look like an <h2> but it’s structurally an <h3>, style <h3> with CSS rather than misusing heading levels
4. Audit your heading outline: browser extensions like HeadingsMap can visualize your heading structure