When there is no content between headings

For accessibility purposes, you could think of headings as a table of contents. But what if there are headings without contents?

On a web page, a heading (h1, h2, h3 etc) signposts ‘a section about X starts here’. Heading names are section names, in that sense. If, in a banana bread recipe, one heading says ‘Ingredients’, and the other says ‘Method’, expectations are set about what can be found where. Under the first heading, we’ll expect what goes into the banana bread, under the second we’ll expect some steps to follow.

The issue

Now, a problem I saw on a website recently: headings with no content. The issue wasn’t empty hx elements, it was that there was no content between these elements and the next. This can happen when the heading element was picked merely for its looks, rather than as a way to indicate that there is some content—and what kind of content.

<h1>Banana bread</h1>
<h2>It's tasty</h2>
<!-- nothing -->
<h2>It's healthy</h2>
<!-- nothing -->
<h2>It can be anyway</h2>

On a site with beautiful heading styles, this could look great, but structurally it is unhelpful, because when someone navigates to one of these h2 ’s, they find nothing.

It could also constitute a failure of WCAG 1.3.1: Info and relationships, because you’re basically claiming a structural relationship when there isn’t one.

So, the two questions to ask for headings:

  • useful description: does this clearly say what kind of content I can find underneath?
  • content: is there any content available underneath?

In the example above, only the h1 meets the criterion of being something we would want to navigate to. The bits underneath are more of a list of unique selling points. Something like this would be better in this context:

<h1>Banana bread</h1>
  <li>It's tasty</li>
  <li>It's healthy</li>

Note: the problem is not multiple headings as such, it’s multiple headings of the same level, that have no non heading content that they are a description for.

In summary

When you use a heading element, you set the expectation of content—always have content between headings of the same level.

Thanks to Jules Ernst, who explained this problem to me first.

Update 8 September 2020: added nuance to whether this fails 1.3.1

Comments, likes & shares (24)

I have a blog post about this hidde.blog/when-there-is-… (some say it fails WCAG 1.3.1)
I think so, without content its just.. big text?
yeah it's claiming structure when there is none
Yup, however, in the example, I think you can do it. It just means you have nothing to say about Apples, which itself is semantic information. That’s why WCAG has a separate AAA “Section Heading” SC. Depends a lot on the context.
I'm not sure it's clear that it means 'I have nothing to say about Apples' - why not say it? "No current information"
Sure, but that does not influence the “semantics” of the heading. In that case, it is just a list of section headings, some with and others without content. Is it good content? Nah. Is it a problem? Also very unlikely.
I just dont follow how it can semantically be a heading if theres no content? What does it mean?
This nails it for me. Without the 'no current information' the user doesn't know if there should be information but it hasn't rendered/loaded or if instead the next heading should really be hierarchically lower (and so on).
In the sets of headings, it is a heading. Not every heading needs content to make it a heading. Consider: <section><h2>Apples</h2></section> <section><h2>Bananas</h2><p>Bananas are bananas.</p></section> It’s a valid thing to do. The author decides the structure.
if someone is navigating by heading and goes to Apples, surely that would be confusing? There's nothing there
But this is mixing things. The semantics is the author deciding what a thing content is. In the context, having a heading might make sense. The design does not matter at all for this. (Other, equally important topic.) And yes, this is bad content writing.
Heading→Apples → Read on → Heading→Bananas → Looks like there is no content about Apples. Interesting. This is a very theoretical problem.
ok, maybe we just disagree, I would find it confusing to navigate to something that has no content
Is a list with one item a list? Is a heading without a following paragraph a heading? Is a section without a heading a section? These are all nice distractions.
Just wanted to pip in and say that I find this discussion very interesting. I hadn’t thought of it like this before.
If I go to a place to get a shopping cart and there is no shopping cart left, then there are just no shopping carts anymore. That does not make the shopping cart shelter not a shopping cart shelter anymore.
but you know for sure carts are normally in a cart shelter. You have no way of knowing what a heading with no content means
It means there is a heading with no (following) content. That you are able to describe it in these words shows that they exist. It’s not an outrageous concept. 🙂
If the design was truly meant to imply that one heading has content and another does not, then you hit the nail on the head here. And a reminder for the importance of designing for empty states. Explicitly stating there was intentionally no content to share would solve for this