Level AAWCAG 2.2
2.4.6 Headings and Labels
Headings and labels describe topic or purpose.
Why it matters
Screen readers
Users navigate by jumping between headings. Without a proper hierarchy, they can't understand the structure.
Cognitive disabilities
Clear headings indicate priority and relationships, helping users understand the content.
Low vision
Under magnification, headings become key anchors for context. Labels improve form input accuracy.
SEO and maintenance
A correct heading structure also benefits SEO and makes code more readable for developers.
Live demo
Heading hierarchy
Check the structure as it would appear in a screen reader's heading list.
Page view
Online store
New arrivals
Smartphones
Tablets
Announcements
Document outline
h1Online store
h4New arrivals← Skipped level
h2Smartphones
h4Tablets← Skipped level
h1Announcements← Multiple h1 elements
The outline skips from h1 to h4 and includes more than one h1
Do not skip heading levels, and keep the page to a single h1. Screen reader users often scan and navigate quickly by jumping from heading to heading.
Understanding through personas
Ito (50) — Totally blind
I use VoiceOver heading navigation (VO+Command+H) all the time. When it jumps from h1 to h4, I get confused: 'Did I miss the h2 and h3 sections?' A correct hierarchy lets me navigate with confidence.