The Web Almanac found that 59% of mobile sites now properly structure their headings.
This is a small improvement, but a big step forward. In 2024, the Almanac discovered that heading hierarchy had been getting worse for two years in a row. This means that a lot of developers were and still are using heading tags for their visual styles rather than their actual purpose.
But what does 59% mean?
Put another way, 41% of sites get it wrong. Over 8.5 million websites. And that's only the ones in the Web Almanac's data set. It's millions of websites where people using screen readers can't navigate properly.
59% is not great, but at least things are moving in the right direction.
Why do headings matter you ask?
For screen reader users, headings are like a table of contents. Users can jump between headings to find what they need quickly. Without proper structure, they're forced to listen to everything linearly. It's also an SEO thing. Search engines also use heading hierarchy to understand page content.
And what about that best practice of not skipping heading levels?
Think of heading levels like a nested table of contents. When a screen reader user navigates a page, they often pull up a "Headings List" to understand the hierarchy.
If you jump from an <h1> (the page title) directly to an <h3> (a sub-sub-section), the user might wonder:
- Did I miss the main section (
<h2>)? - Is the website broken or missing content?
- Is this
<h3>actually a sub-section of something I haven't heard yet?
Skipping an <h2> is like opening a book to "Chapter 1" and seeing the very next chapter labeled "Chapter 1.1.1." It creates a logical gap that makes the relationship between ideas fuzzy.
In the world of WCAG, skipping heading levels is generally categorised as a "Best Practice" concern, rather than a requirement. While skipping levels is confusing, it rarely makes a page completely unusable. A user can still read the text. They just have a poorer experience.
What's the takeaway then?
First and most important, please use CSS only for appearance. Heading tags define structure. Don't choose <h3> because you like its font size. That's what styles are for.
And second, stick to the hierarchy wherever you can, without skipping levels.