When we think about accessibility, our minds usually jump to colors, alt text, or subtitles. But there’s a hidden hero of accessible content that too often gets forgotten: headings.
If you’ve ever landed on a long article and skimmed the bold titles to find the part you cared about — you’ve already used them. For someone browsing with a screen reader, headings are even more important. They’re not just a visual guide, they’re the main navigation system. Without them, a page becomes a maze with no map.
Why heading structure makes all the difference
Imagine opening a book without chapter titles. You’d have to read page by page, line by line, to figure out what it’s about. That’s exactly what happens online when headings are missing or misused.
Screen reader users can call up a list of all the headings on a page, then jump straight to the section they need. It’s fast, efficient, and dignified — when the headings are there and make sense.
And it’s not just about people with visual impairments. Research shows that clear structure helps everyone: people with dyslexia, people reading in a second language, and even those of us who are just busy and scanning for key points. 12
So headings aren’t a minor detail — they’re a shared tool that makes information easier to grasp for all.
What the standards say: WCAG vs. RGAA
Both WCAG3 and the French RGAA4 agree: headings matter. But they don’t approach the subject in quite the same way.
- WCAG talks about principles: make sure structure is programmatically determinable (SC 1.3.1) and that headings describe their content (SC 2.4.6). In practice, that means: don’t fake a heading with bold text, and don’t call your section “More” or “Click here.”
- RGAA, on the other hand, is very concrete. It asks: does the page have an
<h1>? Are the heading levels logical (no jumping from<h1>straight to<h4>)? Are there empty headings?
The difference is subtle but important. WCAG tells you what you need to achieve. RGAA tells you how to test it. That’s why, in France, audits often look stricter — because the RGAA transforms the broad goals of WCAG into measurable checkpoints.
Best practices that actually work
So how do you make headings accessible in real life? Here are a few golden rules that come up again and again:
- Use one
<h1>per page to describe the main topic. - Follow the natural hierarchy:
<h2>under<h1>,<h3>under<h2>, and so on. Don’t skip levels. - Make headings descriptive. Instead of “Section 3”, say “Payment Options.”
- Don’t use headings just for style – headings are structure, not decoration.
- And never leave a heading empty.
Simple, right? Yet if you look around the web, you’ll find many sites still using bold paragraphs as “titles”, or skipping from an <h1> to an <h4>. For a screen reader user, that’s like being dropped into a building where floors 2 and 3 are missing.
What I love about heading structure is that it’s doesn’t take long or expensive to fix. You don’t need to redesign your website. You just need to respect the logic of the content and express it with the right HTML elements.
And the payoff is huge:
- People using screen readers can navigate with ease.
- People scanning visually can find what they need faster.
- Search engines also reward structured content.
By combining the principle-based WCAG guidance with the practical checks of RGAA, teams can ensure their websites are both compliant and truly user-friendly for everyone.
- Rello & Baeza-Yates, 2013 https://dl.acm.org/doi/10.1145/2461121.2461150 ↩︎
- NNG study on scanning https://www.nngroup.com/articles/how-users-read-on-the-web/ ↩︎
- WCAG: Headings and Labels (2.4.6) https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels ↩︎
- RGAA official documentation https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9 ↩︎
Leave a Reply