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 <h1>. Headings nested one level deeper in the structure should be <h2>s, headings nested within those parts of your documents should be <h3>s and so on – until you might even reach <h6>.

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.

Tools to Check Your Headings

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:

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:

~

52 Webmentions

Photo of Sara Soueidan
Sara Soueidan
*adds this to the resources section of one of the course chapters* &#x1f440;;
Photo of Marco Heine
Marco Heine
There still exist so many websites without a clear document outline. @m_ott shares some great tips on how to improve your heading structure.
Photo of Giamma
Giamma
Level Up Your Headings Game, by @m_ott matthiasott.com/notes/level-up…
Photo of lloydi.eh? ????;????;
lloydi.eh? ????;????;
I created another bookmarklet that does some things others don’t. Worth a spin. a11y-tools.com/bookmarklets/ “Check headings”
Photo of Jim W
Jim W
Probably the best, most concise accessible headings post I've ever read: reasons, tools, it's all here (and not dev-speak) ! (via @css-tricks) Level Up Your Headings Game, by @m_ott matthiasott.com/notes/level-up…
Photo of Eco Web Hosting
Eco Web Hosting
It's time to get your head in the game and level up your headings game, as @m_ott explains in this article. matthiasott.com/notes/level-up…

Likes

Reposts