Let me make a confession – when I first read about HTML document outline I was hooked at once. It meant the simplest solution for my problems and it meant that I can just forget about importance of using proper levels of headings in my HTML files and also CMS templates I made. A perfect solution.
That was before I started to dig in and check what really happens and what kind implications do assistive technology users and search engines encounter. It seems like search engines don’t really care a lot about heading levels anymore. If they ever did.
Google uses headings to better understand the content on the page (check John Mueller’s Google Webmaster office hours video on headings for more info (opens in new window)). But they interpret it in their own ways and it seems like they are more concerned about the context around headings. Which is not strange when considering all the keywords stuffing that is going on out there.
But headings are still one of the top ways to get an overview about the content for people. And screen-reader users love headings as well, they use them a lot, especially to skip content and navigate directly to headings they want to learn more about. According to WebAIMs Screen Reader survey – 85.7% of respondents find heading levels very or somewhat useful (opens in new window). This means that we should actually invest into making them proper, hierarchically correct and explaining.
So why was outline algorithm then removed from the HTML specification
Short answer to my understanding is because it was never accepted nor implemented in browsers. There is a long discussion on GitHub that you can find more details about removal of outline algorithm (opens in new window), if you want to know more, but let’s finally accept the fact that we still have to cooperate and make heading levels correct. It’s again a team effort, design, development and content providers common responsibility.
Adrian Roselli’s article from 2016 called “There is no document outline algorithm” (opens in new window) can reveal a lot more that I can and you should read it as well, but just to summarize some points I find interesting:
- article is based on a finding from 2013 – this means the myth is alive for ten years now, at least – says a lot about misinformation,
- seems like browsers can ignore standards when they want to – quite a sad fact to my idealistic part of personality,
- there are possibilities to implement the algorithm automatically in the back- or front-end if we want, so why aren’t all CMS doing it for us for free (maybe we should add it to ATAG?),
- more people should be aware of this, not only developers but also designers and content providers,
- I really miss a strict WCAG success criterion that would enforce best practices, it seems like a lot of bad practices are allowed.
What can we do about it in 2023?
As mentioned – it is a team effort. So first step is to inform the team about common responsibility. Design should think about it. And annotate it. Developer should think about it. And make it possible to change semantic levels when appropriate. And so on. I like lists, so here is my trial to do it:
- Mark and annotate heading levels in designs, on component and page levels,
- Develop templates and components in a way that allows changes to semantic levels that also allow support for different styles,
- Content providers must have full control and final responsibility for document outline and they must also make sure it’s conforming to best practices.
I think this list summarizes the most parts. We should have it flexible enough for content providers but as with all great powers – they come together with great responsibilities.
In regards to WCAG – there are a lot of myths about headings out there and some of them also in my mind, I have to confess. I think WCAG should be stricter about such an important mechanism, but on the other side I have to respect what veterans made a standard. Personally I do try to enforce best practices in regards with heading levels still. I suggest reading the article on when headings fail WCAG from The Paciello Group (opens in new window). They surely did extend my understanding, especially when I was learned by other experts that they fail WCAG success criteria if heading levels aren’t correct in terms of hierarchy.
Once again – I agree with stricter interpretation as it is based on real people’s needs. Until we have it in WCAG (I hope that time will come) we have to educate ourselves about the importance of document outline and heading hierarchy. And we have to do it together, as a team.
