The Importance of Heading Levels for Assistive Technology

The HTML specification describes six heading elements: h1, h2, h3, h4, h5, and h6. The number in each of these heading elements reflects its priority, with h1 being the most general and h6 being the most specific.

This is an important thing to know! WebAIM’s 2017 Screen Reader survey tells us that navigating via headings is the most important way people who rely on assistive technology locate information. Because of this, it’s important to craft your website’s headings properly.

A11y From the Beginning

This tutorial is part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and ebooks, to help you understand web accessibility from the beginning.

Cognition

Before we get into the nitty-gritty of how assistive technology works, there’s a reason our printed media uses things like chapters, sections and subsections, and scene breaks. Dividing content up into chunks makes it easier to understand, digest, retain, and reference. 

While the web isn’t print, it does borrow all the good stuff from it—HTML heading elements are analogous to these print conventions. It’s one of those things that everyone takes for granted, but helps out a ton of people. Cognitive concerns are widespread and outweigh every other form of disability. Grouping content into logical chunks helps everyone, from people who have a biological condition such as dementia to people experiencing situational impairment such as sleep deprivation or learning a completely new skill.

Navigating Via Heading

Certain kinds of assistive technology (including, but not limited to, screen readers) allow people to jump from heading to heading on a page. It’s the equivalent of what people who don’t use assistive technology do every day, flitting around a page to get the general gist of it, stopping when they find the information they are looking for.

Generating Lists of Headings

Some assistive technology can take these headings and turn them into an ordered list. This list can be used to quickly determine the overall meaning of the page.

If you don’t maintain a logical sequence—say going from heading level one to heading level three without declaring a heading level of two in between—it can create a potentially confusing, definitely annoying experience for the person who relies on headings to navigate. This gap in the logical sequence will place the burden on the user, forcing them to use other, more time and effort-intensive methods to navigate to determine the logic to the overall page structure (if any) and if the content they need is actually present on the page.

First-Level Headings

Another important thing we can do is ensure that there’s only one first-level heading per page. This heading should describe the main point of the page’s content. For example, a page about the history of French pastry could have a first level heading written like this:

1

<h1>The history of French pastry</h1>

2

<p>…</p>

The (Non-Existent) Document Outline Algorithm

Unfortunately, there is a misconception that you can use first level headings for the beginning of every content sectioning element on a page, trusting the browser to figure out the rest via the Document Outline Algorithm. This algorithm is speculative fiction—at the time of this article’s publishing it has yet to be implemented by any browser. Because of this, we must honor the Priority of Constituencies and use the other heading elements.

Other Headings

Headings level two through six should follow the first level heading, and be authored in a sequential order that describes the main talking points of the page’s content.

For example, this is the heading structure for this article:

1. The Importance of Heading Levels for Assistive Technology
1. Cognition
2. Navigating Via Heading
1. Generating Lists of Headings
2. First-Level Headings
1. The (Non-Existent) Document Outline Algorithm
3. Other Headings
4. Over-Describing
5. Other Services
3. Styling
1. Semantics
2. Practicality
1. Utility Styles
2. Reset
3. Naming
4. Wrapping up: Take a Moment

By reading through this list you’re able to quickly determine what this article is all about. Pretty neat, huh?

The other thing worth pointing out is that headings—much like hierarchical formats like JSON—can be nested inside other headings, provided they progress logically. Within a second-level heading you can use multiple third-level headings. Each of these subheadings can, in turn, have nested fourth-level subheadings.

When you are finished with a topic you can close your nested headings. This is the one place where “skipping” heading levels is acceptable—you’re done discussing a specific concept and returning to a more general topic.

1. h1 The history of French pastry
1. h2 Important moments
1. h3 The 16th century
1. h4 Puff pastry
2. h4 Oublies
2. h3 The 17th century
1. h4 Foliated pastry
2. h4 Whipped cream
1. h5 The Prince of Condé’s chef
3. h3 The 18th century
1. h4 Macarons
4. h3 The 19th century
5. h3 The 20th century
2. h2 Important people
1. h3 …

This example demonstrates how it’s valid to have a fifth-level heading (The Prince of Condé’s chef) followed by a third-level heading (The 18th century), so long as the parent headings are in sequential order. Had a third-level heading preceded the fifth-level heading, it would have been invalid.

Over-Describing

Using too many headings can create an overwhelming experience for a person who relies on a screen readers to navigate. This might seem a little counter-intuitive at first, considering I just told you how important headings are as a navigational aid.  

Think of it this way: much as how too many visual navigation options on a page can negatively affect a person’s focus and attention, too many headings creates “noise” that distracts and obfuscates the main point you are trying to convey.

There is no set rule for how many headings are too many. It depends entirely on what the content is, and how much of it is present. For example, a recipe may only need the name of the dish, its ingredients, and instructions, while an academic paper may require a far more nuanced breakdown.

Other Services

A good heading structure benefits more than just people who use assistive technology. Since headings have semantic meaning, other services can hook into this programatic description of content and recontextualize it in various user-friendly ways. For example, here’s what the Bing search engine does with well-constructed pages:

Much like screen readers, services like Google Docs and Dropbox Paper will automatically generate an ordered list of headings to allow you to quickly understand and navigate a document. Many word processors can also quickly generate a dynamically-updated table of contents from headings, an otherwise tedious and time-consuming task. And thanks to HTML's interoperability, we can even recreate this navigate-by-heading behavior as a browser extension!

Styling

A thing we all-too-often seem to forget is that CSS classes can be applied to heading elements, just like any other HTML element declared inside the body.

Semantics

The reason I am mentioning this is that heading elements are commonly used because of how they look (“Ooh! I like the color and font of the h3, I’ll use that.”), and not what priority of content they describe (Brioche is a kind of Viennoiserie). It’s a widespread problem.

In an idealized world of academic purity, we’d honor the material honesty of heading elements by sizing and styling them according to the hierarchy they describe.

However, this is the real world. Modern websites and web apps are complicated things worked on by many different kinds of people, who all have different levels of experience, interest, familiarity, and capability when designing and coding.

Practicality

The real world may call for a fifth level heading that needs to look like it is a second-level heading, or something entirely new. In these situations it’s better to preserve the underlying logical page structure and modify the heading’s visuals instead:

1

<h5 class="heading-primary--marketing">

2

  Expert care at a reasonable price

3

</h5>

It’s a trade-off, and an acknowledgment that the real world is complicated. This approach favors preserving the important part: intuitive and efficient navigation for assistive technology.

Utility Styles

Methodologies such as utility styles allow for an even more flexible approach to tweaking a header’s visuals:

1

<h2 class="u-font-size-tiny u-color-gray u-line-height-tight">

2

  Terms and Conditions

3

</h2>

For this example, I’m declaring a series of small tweaks to adjust the presentation of the heading until I get the desired visual appearance. You’ll generally encounter Utility styles on larger state-driven websites and web apps, where the classes’ low specificity help guarantee consistency. 

Reset

To help reinforce using properly ordered and nested headings, it may even be worth using a heading style reset to keep all headings without a class declared on them looking the same. 

1

h1,

2

h2,

3

h3,

4

h4,

5

h5,

6

h6 {

7

  color: inherit;

8

  font-size: 1em;

9

  line-height: inherit;

10

  margin: 0;

11

  padding: 0;

12

  vertical-align: baseline;

13

}

This is a little defensive design that helps encourage thinking about how a document’s structure is shaped over how it looks. It is intended to be declared after an imported CSS reset, so it can override the reset’s opinions. 

Naming

The second hardest problem in computer science is naming things. The first is admitting you don’t know something. I won’t presume to know the best way to name heading styling classes for your website or web app. However, if you’re using a non-utility styles-based approach, I would recommend not naming them .h1, .h2, .h3, etc. 

The trouble with this approach is people not familiar with the codebase might interpret these class names as instructions that dictate needing to match class name with heading level. This will reinforce the “how it looks” over the “what it describes” problem. 

I’ve also encountered situations where it reinforces that it’s acceptable to use HTML other than heading elements to author headings (“Ah, I can make this div look like a h5!”). Not great!

Wrapping up: Take a Moment

The WebAIM’s 2017 Screen Reader survey also tells us that missing or improper headings is one of the ten most problematic issues experienced by people who rely on assistive technology to navigate the web. 

This is a widespread accessibility problem with an easy fix. Take a little time to review your website or web app’s pages to see if your heading structure describes the page accurately, and that this description follows a logical order—it could be as easy as shifting some numbers around!