Accessibility and headings

The benefits of headings

Screen reader heading benefits

• Screen reader users can browse pages by headings.
• Screen readers often have shortcut keys or gestures which allow users to jump to each heading on a page.
• Screen readers can bring up a list of all headings on a page and navigate to them.

On VoiceOver, by default, you can press control+option+U to bring up the VoiceOver menu or sometimes referred to as the 'rotor'. You can use the arrow keys to move to the 'headings' option, which lists all the headings on a page, along with their heading level, such as a 'h2', 'h3', etc.

On a mobile device, using a screen reader, you can also use gestures to bring up the menu and set it to 'headings'. Once set to headings, you can use a swipe gesture, to jump to different headings on a page.

On VoiceOver, for example, you can also press control+option+command+h, to skip between headings. Screen readers will also announce the heading level, whilst a heading has screen reader focus.

These methods emphasise the benefit of having meaningful, intentional headings that are well structured and used consistently throughout a page.

Headings may benefit:

• Task success
• Brand perception
• Task efficiency
• User retention

Cognitive benefits

While these benefits help all users, they are especially crucial for those with heightened accessibility needs.

• Well structured headings make content easier to digest.
• Clear, meaningful headings help users understand the purpose of each section, with less effort.
• Reduced cognitive overload.
• Easier to scan and comprehend content, with less effort

Heading benefits for people with mobility or dexterity impairements

As well as less mental effort, to consume information, headings can result in less physical effort, to get to information.

• Less scrolling.
• Assistive technologies, including voice control, may allow users to jump to sections more easily.

Heading benefits for users with low vision

• More easily locate information with larger, bolder, section headings.
• May make pages easier to navigate, if consistently positioned and structured, when using magnification software or having zoomed in.

Meaningful heading text

Do's and don'ts

• Do: try and make your heading text meaningful, if read in isolation. Would the heading text make sense if that was the only thing you read?
• Don't: use generic heading text such as "section one".
• Don't: keyword stuff headings which could hamper comprehension.

WCAG 2.4.6 Headings and Labels (level AA)

The 'headings and labels' guideline states "Headings and labels describe topic or purpose".

Failing to do this would be in breach of AA standards, at the time of writing this article.

Further WCAG heading guidelines

WCAG 2.4.10 Section Headings (Level AAA)

Many people aim for AA level. However, this guideline means that you would always need to properly define sections with a heading.

WCAG 1.3.1 Info and Relationships (Level A)

This WCAG guideline is all about semantic HTML. In a heading context, it essentially means that you should use a heading tag, for something that looks like a heading or is supposed to represent a heading.

It could also be interpreted as meaning that if, visually, something looks like a heading level two, compared to other headings on the page, or the given context, then the appropriate heading level tag should be used. Inconsistent heading styling could be a red flag, in relation to this guideline, but my opinion is that this is open to interpretation.

The more definitive interpretation is using the correct html tag, for the relevant heading.

WCAG 2.4.1 "Bypass Blocks" (Level A)

It could be argued that effectively using headings helps meet the criteria of giving the ability to bypass repetitive blocks of content, by allowing users to jump to different parts of the page.

Nesting headings

WCAG doesn't explitly define that you must use heading levels appropriately, to meet its heading guidelines. The section heading guidance, does talk about nesting heading levels. However, the WCAG guideline itself, doesn't mention this.

It is therefore more of a best practise, user experience consideration, to use the correct heading level, depending on the context.

Best practise guidance:

• Use a single h1 for the main title of the page.
• Follow a logical heading hierarchy—each subsection should use a lower-level heading (e.g., h2 for main sections, h3 for subsections, h4 for deeper levels, etc.).
• Headings define sections—a h3 following a h2 indicates the h3 is part of the h2 section.

What can designers do about headings

Designers often define how the text is styled on pages. They may pick a heading style, from a design system. In this case, a web designer should define what heading level, they intend a heading to be. This is especially true, considering the interaction implications for assistive technology users. As it impacts the interaction of a user, it falls within the designer's remit to make this definition.

There are lots of plugins available for design tools, to annotate headings. For Figma, this includes Stark and the Axe plugin. Yet, there are many annotation plugins available, so it doesn't really matter which plugin is used, so long as the information is communicated effectively.

Designers can look to integrate headings into their designs consistently, to define sections and reap the benefits, outlined in this article.

If designers are writing copy, they can also ensure the headings are meaningful and concise.

Whilst designers have a big part to play here, other potential roles can also benefit from utilising headings effectively or having the knowledge and awareness to challenge or question heading use. Other roles may include copy writers; content editors; content designers; front end developers; testers; or product owners.

Factoid fun time

• A 2017 WebAIM survey revealed that nearly 70% of screen reader users prefer navigating lengthy web pages via headings
• Headings can have search engine optimisation benefits too. Just don't go to the dark side and start keyword stuffing the hell out of your headings.

Conclusion

Consistently denoting sections with meaningful headings helps meet a range of important user needs. This increases the chance of your product, being successful, as well as meeting some key WCAG requirements.

Presenting headings in a consistent fashion, in terms of their styling and positioning also helps unlock the benefits of headings, especially in terms of making pages easy to skim, digest and locate information that users wish to find.

Further reading:

• Reading patterns.
• Scanning content
• How users read on the web.