As accessibility advocates and creators of online experiences, the ecentricarts Accessibility Team (EAT), presents accessibility tips to our entire studio every month. These Quick Wins of the Month (QWotM) are affectionately pronounced “quote ‘ems”, and we’re pleased to share them with you. Our goal? To share bite-sized tips for maximum impact and to make more inclusive websites!

Headings and landmarks: what makes them so important?

According to the 2015 and 2017 WebAIM Screen Reader Survey, most screen reader users navigate long webpages 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:

32.2% use “skip to content” links often/when these links are available

How headings help assistive technology

Screen reader and braille display software recognizes semantically coded headings (due to their <h> tags) and organizes them into a headings menu that users can use to navigate the page. This is an effective way for users of assistive tech to access and evaluate a page’s written content, so long as the headings are descriptive, and heading levels are not skipped.

To see/hear a screen reader headings menu in action, watch this a11ycast from Google Chrome Developers on youtube—note how heading navigation is more efficient than reading the site line by line.

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 do not accurately describe the information in it’s section, you could be confusing a lot of your site’s visitors.

If (for whatever reason), a section should have a heading but the site design hasn’t allowed 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, it simply provides additional context for users of assistive tech.

The benefits of headings, beyond assistive tech

As with many accessible considerations, 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 SEO. 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. In the following clip, web 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.

The last say

And so, our first Quick Win of the Month has come to a close. We've got a backlog of quote'ems coming your way, so stay tuned!