Making Accessibility Visible Part 2: Heading Helpfulness 

In our second installment of the Making Accessibility Visible video series, AudioEye testers Sarah and Chris use screen readers to test page headings while shopping online. In this video, they test both accessible and inaccessible versions of the same page. 

Watch the video to learn why proper heading use is so important in making your site accessible to people who navigate the internet with screen readers.

Code/technical notes from the video

Task prompt

Navigate the content by reading through the page headings.

Results description

When headings are descriptive of the content that follows and ranked in the correct hierarchy, screen reader users can navigate the page and understand the content. When the headings are missing, out of order or not descriptive, it’s harder to get a general idea of the page’s content.

Testers featured 

Chris, Sarah

Broken element

Heading structure is missing levels, which can be confusing and not as helpful for navigation. Heading level one, which usually identifies the main idea or name of the page, is missing.

Working element

Heading structure is in hierarchical order, does not skip levels, and makes sense contextually. 

What are Website Headings?

We use headings to organize content on a web page, following a logical structure. Search engines and people who use screen readers rely on headings to understand the page structure and navigate its content. 

Headings are ranked from one to six, or <h1> through <h6>, based on importance. The first heading, <h1>, usually serves as a page title or describes the most important takeaway. We use <h2> level headings for subsections and <h3> to divide those sections, and so on. 

Studies have shown that the majority of screen reader users begin web navigation by reading headings, so it’s important to use headings correctly to provide an accessible user experience. 

With that in mind, here are a few heading best practices to help you build an accessible and functional website:

• Plan the heading structure before the webpage is built, to ensure correct formatting. 
• Use heading rankings to organize the information on the page and group like content.
• Be descriptive with headings, so it is easy to understand the content that follows.
• Tag headings with code on the backend of the website to make the heading structure available to users with screen readers.
• Be consistent with the heading hierarchy to create an easy navigation experience. Make sure headings are properly nested in order of importance. 
• Don’t skip headings or create empty ones. Screen readers will still read these headings aloud, causing confusion. 
• Don’t use bolded text in the place of a heading, since screen readers will not read this as a heading. 

Correct heading use helps all users, regardless of ability, to navigate content with ease and clarity. Additionally, since search engines use headings to read and understand website content, proper heading use can boost SEO ranking.