When there is no content between headings

category: notes

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:

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 & mentions (57)

Monique Dubbelman replied: Thanks for this!
Monique Dubbelman replied: Clear explanation of the purpose of headings ⬇️
Accessabilly replied:
What Hidde says! 👉 "When you use a heading element, you set the expectation of content"
Sami Keijonen reposted this
Matthias Ott likes this
Cor reposted this
Darius Kruythoff replied: Separate looks from semantics. Don't use that <h2> for its looks alone.
Jaap Spiering likes this
Darius Kruythoff likes this
Gaël Poupard likes this
Daniel Post likes this
Jelmer de Maat likes this
Tom Hermans🤘 likes this
Bobu reposted this
CSS {IRL} likes this
Ben 🖌 likes this
Quentin Bellanger replied:
Don't use headings only because they *look* like headings. #a11y hiddedevries.nl/en/blog/2020-0…
Mark Jansen likes this
Adam Norris likes this
Niels van Rongen likes this
Julien Viala likes this
Jaap Spiering reposted this
Hidde replied: ICYMI: in the weekend I wrote a bit about what headings do for accessibility on web pages. #a11y
CSS {IRL} reposted this
Alberto García Ariza replied: Then, they should not be headings, should they?
Hidde replied: yup that's the point :-)
Fronteers reposted this
Björn Ganslandt likes this
Jack Domleo likes this
design.ethics.code likes this
Tim Kraut likes this
Jonathan Dallas likes this
Giamma likes this
sarah ◉‿◉ likes this
Benet 'Dr' Hitchcock reposted this
Erwin / (perceived) performance / technical UX/CRO likes this
valentina bulgheroni replied:
Oh yes!! So simple, but so true! "When there is no content between headings" hiddedevries.nl/en/blog/2020-0… #a11y #headings
Benjamin Read replied: Headings set the expectation of content below, so what should we do when there isn’t any? @hdv has a breakdown here: hiddedevries.nl/en/blog/2020-0… via @DavidAKennedy
Guy Hickling 08 Sep 2020 12:29:02

The reason this happens is that many developers look on the hN heading elements as a means to set font size. These elements aren’t intended for display purposes (though browsers use them for that), they are there to indicate the document structure to screen readers and other assistive technology.

Deborah Edwards-Oñoro replied:
When there is no content between headings hiddedevries.nl/en/blog/2020-0… #HTML #a11y #accessibility
Ethan Marcotte replied:
I really like this, from @hdv: “When you use a heading element, you set the expectation of content.” hiddedevries.nl/en/blog/2020-0…
Tammy Ablan replied: Very helpful article. We've recently implemented this no content, no heading tag accessibility guideline. If below the heading is a link or button only, is a heading tag recommended?
Tammy Ablan likes this
Hidde replied:
thank you! it depends, I could see that work in some cases. I'd probably ask ‘does that button/link warrant its own navigational signpost?’
Johan Ramon replied:
When there is no content between headings : hiddedevries.nl/en/blog/2020-0… #accessibility #a11y
Manuel Matuzović replied:
“When there is no content between headings” by @hdv hiddedevries.nl/en/blog/2020-0…
Front-end Bookmarks replied:
📣 New link added: “When there is no content between headings” by @hdv hiddedevries.nl/en/blog/2020-0… frontendbookmarks.com/html/elements/…
Jens Oliver Meiert likes this
Aspire Themes replied:
When there is no content between headings hiddedevries.nl/en/blog/2020-0…
Jennifer Perkins replied: Be careful in your document/site structure. #a11y hiddedevries.nl/en/blog/2020-0…
Adrian Roselli replied:
When I conduct trainings, I counsel attendees to never have a <h#> followed immediately by a <h#>. At the very least, have a sentence to explain what is coming in the sub-sections. I do not consider it a 1.3.1 fail, however. hiddedevries.nl/en/blog/2020-0…
Eric Bailey reposted this
Alex Carpenter likes this
Jens Tangermann likes this
Katherine replied:
This. 👏👏👏 hiddedevries.nl/en/blog/2020-0…
Dan Denney replied:
When there is no content between headings * A list is an option I hadn’t done before, I wonder if it’s petter than multiple one-line <p> tags hiddedevries.nl/en/blog/2020-0…
Rhea Althea reposted this
Leave a comment
Posted a response to this?

This website uses Webmentions. You can manually notify me if you have posted a response, by entering the URL below.