Accessible Headings: Web Accessibility Tutorial, Episode 1

This post is a summary of our video: Accessible Headings: Web Accessibility Tutorial, Episode 1.

Welcome to the first entry in our blog series, where we will be sharing straightforward tips to enhance the accessibility of your web content.

This blog focuses on the role of headings, exploring effective usage and best practices in heading accessibility.

When browsing a website, sighted users will often scan a page for headings - prominent, bold text that serves as labels for different content sections. This allows them to build up a simple outline of a page's content. We can think of headings as navigational signposts, guiding users through the content structure of a webpage.

For screen reader users, while they may not get the same visual representation of the headings, we can still convey the same outline of the content by using semantic heading elements and the correct heading levels. This enables screen reader users to access built-in keyboard shortcuts that allow them to do things like jump to the next heading, or listen to a list of all the headings on a page and jump to a specific one.

Heading do's and don'ts

Use correct heading levels

Ensure that your content utilises the appropriate heading levels (H1, H2, H3, etc.) in a logical order. H1 is reserved for the main heading, and ideally should only be used once per page, providing a clear topic or purpose for the page.

Avoid skipping heading levels

Maintaining a consistent hierarchy is crucial. Skipping heading levels or choosing them based on appearance can create confusion for screen reader users, disrupting the intended flow of content.

Write clear and informative headings

Write headings that are concise, informative, and easy to understand. Avoid unnecessarily long or wordy titles, or repetitive content, opting for clarity instead.

Front load key information

Consider placing essential information at the start of headings. 

Don’t use fake headings

Resist the temptation to create fake headings by altering text appearance without using proper heading elements. Fake headings don’t have the semantic meaning crucial for screen reader users.

Summary

In conclusion, use the right heading level for each content section, select proper headings from the text editor's options, keep headings clear and informative. Front-load key information. Avoid fake headings and never skip heading levels and by adhering to these best practices, you not only enhance accessibility for all users but also contribute to a positive online experience.

(Watch the full video below)