TaskBuild a properly-headed page outline. <h1>Annual Report 2025</h1>, <h2>Summary</h2>, <h2>Financials</h2>, <h3>Q1</h3>, <h3>Q2</h3>, <h2>Conclusion</h2>. No level-skips.
Heading-only navigation: design for the screen-reader user
75 XP6 min
Theory
A power-user pattern
Screen-reader users can press a single key to jump from heading to heading (H in JAWS/NVDA, VO+Command+H in VoiceOver). The page outline IS their navigation.
That means a well-headed page is navigable in seconds. A page with mislabeled or skipped headings is unusable.
Test your page like a SR user
Imagine you can ONLY see headings. Could you understand:
- What page you're on?
- What sections exist?
- What's the order?
- Where to find a specific topic?
If the answer is no, your headings need work.
Common mistakes
- Using `<h2>` for visual sizing, not semantic level. Use CSS to make small text big; don't promote an h4 to h2 just because you want it large.
- Skipping levels going down. h1 → h3 leaves the screen-reader user wondering "did I miss something between?"
- No h1. Every page should have exactly one h1 that names the page.
- All sections `<h2>` (no h3/h4). OK at first, but as your section grows it'll need sub-sections. Plan ahead.
The "outline" view
Most modern dev tools have a "show document outline" feature. Run it on your page. If it doesn't resemble a table of contents you'd write by hand, fix.
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 15 lessons in each track are free. No card needed for those.