How to Fix Heading Order WCAG 2.2

Why this matters

Screen reader users navigate by jumping between headings to understand page structure and find content quickly. A broken heading hierarchy is like a book with missing chapters. It also signals poor document structure to Google, which can hurt your SEO.

Code examples

<h1>WebPossum Scanner</h1>
<h3>How it works</h3>  <!-- skipped h2 -->
<h5>Step 1</h5>  <!-- skipped h4 -->

<h1>WebPossum Scanner</h1>
<h2>How it works</h2>
<h3>Step 1: Enter your URL</h3>
<h3>Step 2: Get your report</h3>
<h2>About WCAG 2.2</h2>

How to fix it — step by step

1. 1
   Start every page with exactly one <h1> that describes the main topic
2. 2
   Use <h2> for major sections, <h3> for subsections within h2 sections
3. 3
   Never skip heading levels — don't go from h2 to h4
4. 4
   Don't choose heading levels for their visual size — use CSS to style them
5. 5
   Every page section that users need to navigate to should have a heading
6. 6
   Use browser extensions like HeadingsMap to visualize your heading structure

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.