Overriding Heading Tags to Optimize for Screen Readers

Jon Sasala

Jon Sasala
Published September 11, 2020

Screenshot showing part of a blog with the focus on the title saying

Use role="none" when you want to utilize heading tags (H tags) to style web content, but you don't want screen readers to treat that content like a headline.

When a sighted user visits a webpage, their first action will likely be to scroll through the page and skim headlines, subheads and graphics to get a scope of what they are about to read. Non-sighted users undertake a similar process of quickly absorbing information on the page in order to orient themselves and get a feel for the scope of a piece of content. That is why it's important H tags are used properly to communicate the hierarchy of the content of a page, in addition to for their visual benefits.

H tags (H1, H2, H3, H4, H5 and H6) are CSS styles on a website that help consistently stylize and structurally organize content. Rather than formatting headlines and subheads on each individual page by manually adjusting the design, these tags universally apply styles site-wide. In order of importance, or design-wise, from largest to smallest, consider the H1 the most critical heading on a page, with the most diminutive and least significant being H6.

For SEO purposes, search engines use heading tags to understand what a piece of content is about, and placing the greatest SEO value on the H1, and gradually less on the others. It is generally considered best practice to only include a single H1, typically the title of a page, followed by a few H2s, more H3s. An H1 should be the first heading tag on a page, but the subsequent H tags can be generally mixed and used to represent the importance of each section.

Here are visual examples of H tags:

H1: The most important title on a page, used only once.

H2: The main sections of a page, likely used two or three times.

H3: Subheads inside of sections, less important for SEO.

H4: Smaller titles and sections, almost irrelevant for SEO.

H5: Even smaller titles and sections.
H6: Smallest titles and sections

Using Heading Tags for Design and Hierarchy

The best web developers build with both design and accessibility in mind. There will be situations where the design characteristics of a certain heading class are appropriate but the content does not warrant that designation. In these instances you can still use the H tag but override the role level.

Let's use the title of this section as an example. This is the HTML of the above section title:

<h2> Using Heading Tags for Design and Hierarchy </h2>

Say the designer wanted the style attributes of an H2, but the section is not actually on the same level of importance as the other H2s on a page. This title is more in the class of other H4s, at best. To override the H2 designation but retain its styling, the following role and aria-level can be applied:

<h2 role="heading" aria-level="4" > Using Heading Tags for Design and Hierarchy </h2>

This will keep the design consistent with an H2 tag, but it will be delivered with a screen reader as "Design and Hierarchy. Heading Level 4." 

 

Removing Heading Designation for Screen Readers

There will be situations where heading tags are used for their design characteristics but the content is not a heading at all. This call-to-action, for example, uses H2 and H3 tags.

Cybersecurity-CTA-with-small-and -medium-size-headlines.


Design-wise, this looks great, but when a user is scanning the page, they do not need to read the entire second sentence as a title. In this instance we can remove the heading designation all together.

<h2>Cybersecurity Maturity Score</h2>
<h3 role="none">How does your organization rank? Take our 5-question assessment.</h3>

Role="none" tells screen readers this element is no more important than general text on the page. It will still be picked up when the user reads the entire page, but not when skimming titles.

Related Articles

Recent Articles