Creating Accessible Websites: Headings and Landmarks
Summary: 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 2024 WebAIM Screen Reader Survey, most screen reader users navigate web pages by skipping to headings and using landmarks. Similar to how visual users scan web content for design cues, screen readers allow users to explore a page without reading the entire site providing a much faster way to access the right information.
Since this functionality relies on proper HTML markup, pages without semantic headings or landmarks can be harder to navigate, especially for users with disabilities. The survey highlights that 71.6% of respondents use headings to navigate, while 31.8% use ARIA landmark roles. Implementing these elements ensure a smoother experience for all users.
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 a page’s written content, so long as the headings are descriptive, and heading levels aren't skipped.
Descriptive headings have also been recognized by the Web Content Accessibility Guidelines (WCAG) as an important aspect of Level AA web accessibility.
Why You Shouldn’t Skip Headings
Semantic headings tell your users how your content is organized and provide important context about different sections. If headings are used out of order or don't describe the information in its section accurately, users – especially those using assistive technology – may get confused.
If a section should have a heading but the site design doesn't allow it, developers can insert a hidden “screen reader only” heading to give these users more context for screen reader users. This hidden heading ensures the site remains accessible while keeping the visual design impact intact.
The Benefits of Headings, Beyond Assistive Tech
The benefit of proper headings extend beyond assistive technology users. Descriptive headings give all visitors, including visual users, more context and help them find the right information faster. This is especially true for visual users who tend to quickly scan websites for headings, images, or buttons, and rarely read through every word of content.
Headings can also help users focus their attention by breaking up long blocks of content, guiding users with cognitive disabilities, and improving overall readability. Additionally, properly structured headings enhance Search Engine Optimization (SEO) performance. Search engines, like assistive technologies, read the same code, so when assistive tech can understand the purpose and hierarchy of your content, search engines will too – improving your site’s visibility.
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
By following best practices for headings and landmarks, your website, your website benefits everyone. Users can quickly access the information they need, while your organization enjoys improved accessibility, SEO, and user satisfaction. These accessibility practices not only enhance the user experience but also boost your site’s efficiency and reach.
About The Reason One Accessibility Team
The Reason One Accessibility Team, affectionately called r1at (pronounced "riot"), meets every week to discuss accessibility and how to improve user experiences. We’re passionate about creating digital experiences that work for everyone. Looking to stay ahead with accessibility insights?
Sign up for our newsletter and get the latest tips delivered to your inbox!