Level Up Your Headings Game

Providing a proper document outline is one of the most effective things you can do to improve the accessibility of your HTML. Like the headings of the chapters and subchapters in a book, the structure of the heading elements in our HTML should have a semantic, tree-like structure. The most important headline, most often also the title of your document, is the one and only

. Headings nested one level deeper in the structure should be

s, headings nested within those parts of your documents should be

s and so on – until you might even reach

.

Headings Convey Structure #

The advantage of providing such a clear structure is not only that you force yourself to structure your document more thoroughly. The headings of your document are also a way to provide your users with a first glimpse of what is on your page and how it is structured. Scanning the headings of your page, users get a feeling of what you want to tell them and if that’s what they are looking for. The same is true for screenreader users, but they can also use your headings as a tool to quickly navigate to the sections that interest them. VoiceOver, the screenreader built into macOS and iOS, for example, does provide a feature called “rotor”. With the rotor, users are able to navigate through a list of headlines. But this feature can only be used effectively if the document outline is properly structured. If your document provides a mess of different heading levels all mixed up (maybe also because you used headings to visually style text), it will be much harder for users to understand the structure of the page.

Long story short: a nicely structured document outline, with a clear hierarchy and no skipped heading levels, is one of the hallmarks of accessible web design. And it is also a requirement for a website to pass an accessibility test. But what can you do if you want to check the heading structure of a page? Do you open up the developer tools of your favorite browser and start clicking through the document structure, opening all the nodes to check whether there is a headline in there and if it has the right level? Although this would be very dutiful, there are, of course, more efficient ways to check your heading structure. There is now a plethora of options out there that can help you with this. Some list all headings for you, others highlight the heading levels directly on the page, many do both. But which tool is good? What are people using most often? I wasn’t sure myself, so I asked Twitter:

What tool do you use when you want to see the headings outline of an HTML document?
— Matthias Ott (@m_ott) July 12, 2022

The amount of answers I received was staggering (thank you all!) and while a few people mentioned tools I already knew, many more were useful additions I didn’t know before. Here is a little list of (almost) all the answers I got. Some of those tools are also useful to check for other accessibility issues, like color contrast, general markup issues, or missing alt attributes. So make sure to not just pick the first one from the list but try out a few of them:

The WAVE browser extension (Chrome, Firefox, Edge) was mentioned by quite a few people – one of my favorites, for sure.
H123 Bookmarklet (Thanks again, Sara!)
Headings Bookmarklet for Accessibility Testing by Paul J. Adam, who also has many more useful bookmarklets
Polypane, Kilian Valkhof’s brilliant browser for developers, has a nice feature to list and navigate through the heading structure.
Sa11y is a simple in-page checker that visually highlights common accessibility and usability issues, including headings.
Tota11y, an an accessibility visualization toolkit by Khan Academy, also does a great job in highlighting all headings and their levels.
Accessibility Insights for Web has a feature that highlights the headings on a page as well.
The Web Developer extension (for Chrome, Firefox, and Opera) by Chris Pederick also shows you the document outline of the current page
HeadingsMap in an extension available for Chrome and Firefox that does exactly that: map the headings of your document.

59 Webmentions

3 Reposts

44 Likes

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.