Web accessibility quick win: Headings and landmarks
Summary: Web users scan pages, rarely reading content in full. Semantic headings and landmarks help users of screen readers, other types of assistive technology — and search engines — browse your content more efficiently.
Headings and landmarks: what makes them so important?
According to the 2017 and 2019 WebAIM Screen Reader Survey, most screen reader users navigate long web pages by skipping to headings and using landmarks. Similar to the way visual users scan web content for design cues and headings, screen readers provide functionality for users to explore a page without having to read through the entire site.
Since this functionality relies on proper HTML markup, pages without semantic headings or landmarks can be harder to navigate.
Screen reader techniques by the numbers
Almost 70% of 2019 Screen Reader Survey respondents navigate lengthy pages via headings
57% use ARIA landmark roles to navigate a site either sometimes, often, or whenever roles are present
32.2% of 2017 respondents use “skip to content” links often/when these links are available
How headings help assistive technology
When <h> tags are used to identify headings, screen reader and braille display software can organize those semantic headings into a headings list or menu. This menu allows users to navigate (and essentially skim) a page’s written content, so long as the headings are descriptive, and heading levels aren't skipped.
Check out Paul Adam's heading list demo for heading list examples from major screen readers on desktop and mobile. You can also watch this a11ycast from Google Chrome Developers to see/hear a screen reader headings menu in action. Note how heading navigation is way more efficient than reading the site line by line!
Descriptive headings have also been recognized by the Web Content Accessibility Guidelines (WCAG) as an important aspect of Level AA web accessibility. Check out section 1.3.1 of WCAG 2.1 for more information on how to understand and meet this guideline.
Why you shouldn’t skip headings
Semantic headings tell your users how your content is organized and indicate different levels of importance. If headings are used out of order and/or don't accurately describe the information in its section, you could be confusing a lot of your site’s visitors.
If (for whatever reason), a page section should have a heading but the site design doesn't allow for one, developers can insert a hidden “screen reader only” heading to give these users more context. This markup doesn’t impact the look of your site, but it will provide additional context for users of assistive tech.
The benefits of headings, beyond assistive tech
Like most accessible best practices, the benefit of proper headings goes way beyond screen reader users – descriptive headings give all of your site’s visitors more context and helps them find the right information much faster. This is especially true for visual users who tend to quickly scan websites for headings, images, or buttons, and rarely read content in full (admit it, you’re barely reading this right now!).
Headings can also help users focus their attention by breaking up long content and be a useful guide for people with cognitive disabilities.
Lastly, semantic heading structures are also valuable for Search Engine Optimization (SEO). Search engine bots and assistive technology read the same code.
So, if assistive technology can understand the purpose and hierarchy of your content, search engines can, too!
How landmarks help site navigation
Some people also use landmark roles to quickly navigate a page. By using certain shortcut keys, ARIA landmark roles allow screen reader users to jump from one section of the page to the next without reading headings, or tabbing through individual links.
Landmarks like role="navigation", role="main", and role="contentinfo" identify key sections of a page.
In her video How ARIA landmark roles help screen reader users, accessibility expert and user of the JAWS screen reader, Léonie Watson, demonstrates these shortcuts, and the benefit of ARIA landmark navigation.
Technically, ARIA landmarks are not required by WCAG standards, but they are a highly recommended best practice where appropriate.
Win-win
We all win when people can access the information they need. When heading and landmark best practices are followed, your site's visitors and your organization will benefit.
About The Reason One Accessibility Team
The Reason One Accessibility Team, or r1at (affectionately pronounced like "riot"), meets every week to discuss accessibility and how we can make better, accessible experiences. We believe that everyone has a right to access and digest information online.