With some changes to the W3C guidelines on the horizon, Julie walks us through some best practices for headings, one of the web’s most humble-yet-powerful elements.

Headings are the unsung heroes of our websites. They do a lot of work to help us understand content at a glance, and we want to make sure that everyone can benefit from them. There’s been some confusion about the right way to use headings over the last few years. It’s partly about changes in the HTML5 specification, and partly about people not being sure why headings are even important to a website, apart from adding some visual flair. If you follow the three steps here, you’ll have bulletproof headings that can survive a trip from your HTML through the internet, delivered safely to any device with a browser.

Why you should care about headings

If you hardly ever read a whole web page from top to bottom, you’re not alone. User testing shows that a majority of us skim and scan, and we usually only read the entire page if we can’t find something pointing to the information we want.

People often judge a website by how quickly they can get what they need and leave. Headings are a great way to do just that. They’re visually larger than the rest of the content, so they stand out. They provide a description of what’s in each section, so people can skip ahead or stop when they find the section they need.

People who use screen readers also use headings to skim and scan the content on a long page. (My last post, Three common accessibility pitfalls for developers: information and relationships, takes you through an example of this.)

The most recent WebAim survey of screen reader users revealed some significant findings. According to the survey, 65% of participants rely heavily on headings instead of search features or link text to find their way through a long page. We see a similar result in our own user testing at Simply Accessible. Joanna Briggs, who oversees usability studies at SA said that “the vast majority of screen reader users in our usability studies use headings to navigate content-heavy web pages.”

Headings also help people create a mental outline of the content on the page. We know the biggest heading is probably the page title, and smaller headings are for chunks of content that are related to each other. For example, Wikipedia uses the heading elements to create a short table of contents for each article. See how the sub-headings in this Wikipedia article create an outline of the content you can expect to find:

A screen capture of a Wikipedia page on wombats, clearly showing a table of contents composed of heading elements

Headings can also create a useful Skip Navigation menu. That’s what we’ve done on our site. The first item on every page is a menu which takes the headings and turns them into links to that section.

A screen capture of the Simply Accessible home page showing a Skip Navigation menu with all of the page's sections listed

So how can we make sure we’re giving our users the most useful headings?

Breaking heading news

In 2014, the HTML5 specification recommended a new method of creating a document outline based on an idea originally suggested in a 2008 working draft. The concept was that the structure of a page could be created by container elements like section, article and aside combined with the heading elements. That way, you could start the heading levels with H1 in each new section and the document outline would also be correct.

Heaps of people were really happy about this change. More and more sites are syndicating content: blogs might be viewed in a feed reader, news articles might be viewed in Facebook, or videos might be taken from YouTube and embedded in personal sites. And people who care about these things still want the heading levels on a web page to be correct, even if sections are taken from one site and viewed in another. A lot of articles were written about how to use the new HTML5 document outline method, and developers started including it in their sites and templates.

There’s just one catch, though.

In all the time since work began on this document outline almost a decade ago, and in the two years since it was fully specified, not one browser has implemented it.

They all stuck to the HTML4 method. Of course, we don’t expect lumbering giants like Internet Explorer to adopt new features right away, but not even the small, nimble, or experimental browsers wanted to introduce HTML5 document outlines. Where did this lead, you ask?

As you can imagine, it created some confusion for people trying to learn HTML5 and those who make recommendations about code standards for their workplace or clients. Developers had been told to use the HTML5 method, but when they tested their pages, the outlines weren’t what they expected. People who rely on screen reader software were also confused—a lot of sites started using H1 for most headings instead of the full H1 to H6 rankings. Not all of them, just some of them! What a mess. It’s all been a bit of a muddle.

Luckily, this will be resolved soon. The W3C editors are revising the specification to better match the real world, which always takes time if you want to do the job right. In the meanwhile, they’ve added a warning to the most recent version of the HTML5 specification that the document outline method hasn’t been implemented. But the need for an alternative document outline method hasn’t gone away—people still pull content into different sites like Facebook and that’s not going to stop anytime soon. So the W3C editors are also looking at other options, including a possible <h> element which has its level calculated by its position in the page.

You might be wondering how you’re going to organize your headings after all this.

It turns out, what works in the real world is the method accessibility advocates have recommended all along. And since the W3C is pretty good at keeping things backwards-compatible, you’ll be able to keep using this method until all the quirks have been worked out in any new approaches that come along. Let’s take a look at it now.

Creating stellar headlines

To create a useful page structure, it’s critical to make sure the headings give all users information about what type of content is on the page and how it’s organized. There are three main steps to do this. I’ll take you through the process with a little single-page fan site for my favourite marsupial, the wombat. I actually want it to be more interesting than the Wikipedia page on wombats. And if someone has Googled for “photos of famous wombats” and discovered my site, I want them to be able to easily skip the life-cycle information and get straight to the photos.

Step 1: Use real heading elements

First, we need to make sure we’re actually using heading elements in our HTML to mark up the things that look like headings to our sighted users.

If this is our CSS…

.page-title {
  font-size: 2.4em;
  font-weight: bold;
  color: #000000;}

Then this div with a class of heading…

<div class="heading1">Wombats: the best marsupial</div>

and this actual heading…

<h1 class="page-title">Wombats: the best marsupial</h1>

…will look the same to me. I can tell that the first one is a heading, but the browser doesn’t know this, so it won’t let the screen reader software know about them. That means the heading shortcuts in JAWS, VoiceOver, or other screen readers won’t work, and people will just hear a “No headings on this page” announcement. Using the appropriate heading element will fix this for you.

Step 2: Create a nested structure to organize the content

Next, we need to make sure headings are in an order that makes sense to people who rely on them to understand the structure of the page.

We’ll use the top level heading, H1, for our page title, and H2 for our major sections. Then we’ve got everything from H3 to H6 if we need subsections or really specific chunks of information. You can still use the HTML5 sectioning elements for your own purposes, just don’t rely on them to give your readers any hint of how your page is structured.

Try not to skip any levels in the structure. If one of your visitors using a screen reader hears “Heading level 2, Wombat habitat; Heading level 5, Buy a photo” it could easily sound like they’ve missed a huge chunk of the content even if they’ve navigated correctly.

So, my wombat fan page has a structure like this, with only one H1 on the page, H2 used for the main section headings and H3 for sub-headings:

  <h1>Wombats: the best marsupial</h1>
    <h2>Habits and habitats</h2>
    <h3>Where to find them</h3>
    <h3>What they eat</h3>
    <h3>Lifecycle of a wombat</h3>
    <h4>Early life</h4>
    <h2>Famous wombats</h2>
    <h2>Photos of wombats</h2>
      <h3>Wombats in the wild</h3>
      <h3>Wombat photos from zoos and wildlife parks</h3>
      <h3>Photos of famous wombats</h3>

Step 3: Give your users useful content

Finally, headings need to be descriptive and useful. There’s no point making a lovely outline structure for our page if we’re going to use generic headings like “Learn more” or “Visit.” What are we going to learn about, and who are we being invited to visit? Let people see at a glance what you’re offering, instead of making them read every word.

To make scanning headings as easy as possible, you should make your heading content both specific and unique. Describe what people can expect to find in that section, and don’t repeat the same heading text when the content that follows it is different.

I think this means the Photos section of my website could do with some changes to the text. Let’s try again:

    <h2>Photos of wombats</h2>
      <h3>In the wild</h3>
      <h3>At zoos and wildlife parks</h3>
      <h3>Famous wombats</h3>

They’re simpler and catchier, but still let everyone know what kind of photos to expect. Use relevant keywords and skip any repetitive phrases, and your headings will be easier to scan.

It’s not easy to get clear and accurate guidance about the powerful-but-humble heading—I hope this has clarified the path to creating rock solid signposts to content people need.