Level Up Your Headings Game Posted July 13, 2022 by Matthias Ott 59 Webmentions #a11y #accessibility #document outline #headings #html #semantics #tools 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. 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: 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 Johnny Taylor “Providing a proper document outline is one of the most effective things you can do to improve the accessibility of your HTML.” matthiasott.com/notes/level-up… The A11Y Project "Providing a proper document outline is one of the most effective things you can do to improve the accessibility of your HTML." @m_ott matthiasott.com/notes/level-up… 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… treb0r.eth ∞ This is good. matthiasott.com/notes/level-up… 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… Christopher Li matthiasott.com/notes/level-up… dailydevlinks. 📝 Level Up Your Headings Game 🔗 matthiasott.com/notes/level-up… #html #css #javascript #webdev lloydi.eh? ????;????; I created another bookmarklet that does some things others don’t. Worth a spin. a11y-tools.com/bookmarklets/ “Check headings” Giamma Level Up Your Headings Game, by @m_ott matthiasott.com/notes/level-up… Matthias Ott 😁🙌 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. Sara Soueidan *adds this to the resources section of one of the course chapters* 👀 3 Reposts toheeb Matthew Janusauskas JulieG 44 Likes Fernando Mateus n0madz Neil Vass Kilian Valkhof Daniel Göransson MacGamper Gaël Poupard Rachel Crawford Jo Orange ????;????; ????;️;????; Arpit Jess Peck ????;????; Chelsea8999 Benjamin Read Travis Maynard Brian Maier Jr. mundigital ceci n'est pas un filtre de vue DirkBark Martin Laker Ockovsky Emily Rapport Alicia Jarvis (She/Her/Elle) ????;????;????;????;????; Raimonds J. Temo Akhaladze Tony Alicea namehere Charlie Turrell Mike 麥; Mai, just got called “design-licker” Adjackers JP Santos sacha harmsworth Ahmad Saleem Michelle Barker Karol Chojnowski Saptak S Paul Thompson Aleena | ع;ل;ي;ن;ا; Rattleknife Design Marco Heine Karan Mathur Andy Bell Mike Harrison Design Jens Grochtdreis Kewish Fagoe Samantha ⓘ 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. Have you published a response to this? Send me a webmention by letting me know the URL. Ping! More Notes Ad Infinitum Lazy and Prompt Buckle Up At Machine Speed
Johnny Taylor “Providing a proper document outline is one of the most effective things you can do to improve the accessibility of your HTML.” matthiasott.com/notes/level-up…
The A11Y Project "Providing a proper document outline is one of the most effective things you can do to improve the accessibility of your HTML." @m_ott matthiasott.com/notes/level-up…
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…
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…
dailydevlinks. 📝 Level Up Your Headings Game 🔗 matthiasott.com/notes/level-up… #html #css #javascript #webdev
lloydi.eh? ????;????; I created another bookmarklet that does some things others don’t. Worth a spin. a11y-tools.com/bookmarklets/ “Check headings”
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.
