What's Your Heading?

I audit a lot of Web sites for accessibility and lately I have been seeing a lot of sites that skip heading levels. Heading levels are crucial for accessibility and for readability. I'll explain why. NOTE: This is a high-level overview to raise awareness and goes into the technical aspects very little.

Headings act as a "table of contents" to a page. People scan a page, they use headings to differentiate each section from another or to find their place if they need.

Screen reader users and users of assistive technologies use headings and those headings are very important for when the screen reader/assistive technology reads the content back to the user.

Let me explain.

Heading Levels

Heading levels (or rank) has meaning. <h1> Being the most important heading of the page and <h2> to <h6> last on the list. For example;

Good

<h1>Lobsters and Ways to Make Them</h1>
  <h2>Lobster Rolls</h2>
    <h3>Maine-style</h3>
      <h4>Ingredients</h4>
      <h4>Prep</h4>
      <h4>Directions</h4>
    <h3>Connecticut-style</h3>
      <h4>Ingredients</h4>
      <h4>Prep</h4>
      <h4>Directions</h4>
  <h2>Lobster Dinners</h2>
    <h3>Boiled Lobster</h3>
    <h3>Baked Lobster</h3>
  <h2>Other Ways to Enjoy Lobster</h2>

Bad

<h1>Lobsters and Ways to Make Them</h1>
  <h3>Lobster Rolls</h3>
    <h4>Maine-style</h4>
      <h4>Ingredients</h4>
      <h5>Prep</h5>
      <h4>Directions</h4>
    <h4>Connecticut-style</h4>
      <h4>Ingredients</h4>
      <h5>Prep</h5>
      <h4>Directions</h4>
  <h3>Lobster Dinners</h3>
    <h2>Boiled Lobster</h2>
    <h2>Baked Lobster</h2>
  <h1>Other Ways to Enjoy Lobster</h1>

So a few things.

That is the way to use headings, in hierarchical order. That way, any user can traverse the page and scan a page easily, sighted or non-sighted, this benefits everyone.

Use a heading when the content or structure of the page requires it for each section of your document. When a new section begins.

Structure your headings in hierarchical order. Please.

<h1>

Yes, two <h1> headings on a page is not a failure of WCAG, but an <h1> should be used as a indicator of the title of the page. Like that table of contents I mentioned earlier. What's the harm? Well, that is a old and long discussion which I would write about, but this article would be long and filled with historical talk about the HTML Document Outline in HTML5, browsers not adapting to it or assistive technology not adapting to it either.

I'll let Steve Faulkner and Adrian Roselli take you there.

Computer says NO to HTML5 document outline

A decade of heading backwards

There Is No Document Outline Algorithm

TL;DR Multiple <h1>s on a page is not supported by browsers.

WCAG

There are a few Success Criterion that headings fall under:

1.3.1 Info and Relationships (Level A)

2.4.6 Headings and Labels (Level AA)

2.4.10 Section Headings (Level AAA)

3.2.3 Consistent Navigation (Level AA)

Standard levels are usually AA, but that doesn't mean you can't shoot for AAA level in some of the low-hanging fruit. Color contrast, heading levels, etc. if it is helpful to your users.

Screen Readers

The Screen Reader User Survey by WebAIM shows that 67.7% use headings to find information and 85.7% of respondents find headings very or somewhat useful. The data is there.

Screen readers move from heading to heading and Web pages can be scanned using headings, consider it like a cookbook where a recipe is laid out or even a technical manual. Write headings that provide information that is relevant to the section, this helps screen reader users traverse a page (it also helps sighted users as well).

What's Next?

Rian Rietveld has a phenomenal article over at the A11y Project that goes into greater detail about headings and what to do and what not to do. Some information from their article was used in this article.

This article is designed to raise awareness that we need to do better. Which brings me to my last point.

Education

I see some conversations about education, whether it is accessibility, education, or something around making things inclusive or accessible and headings always seem to be somewhere in that conversation.

There is very little to no talk about HTML education. I think this needs to change badly. Seeing what I call <div> chowder, div after div after nested div as far as the eye can see (just look at Twitter code or any Javascript framework app), and skipped heading levels, no <h1> heading, the low-hanging fruit of basic programming and accessibility.

If developers keep consistently pumping out inaccessible code, we'll never get there. This needs to change and developers need to embrace accessibility and if it is done from the very beginning of a project, it's a lot easier to implement rather than halfway through to after a project.

We need HTML education AND accessibility education.

Summary

Make sure heading levels are hierarchical, people need to use them in that manner. Sighted or not. Read Rian Rietveld's article on the specifics not covered here, take what you know and learned and apply it or spread the word that heading levels really do matter.

Article header Photo by Dragoș Grigore on Unsplash

Comments

[Andrew Baisden]

I always follow the order hate when people mix it all up 🤣