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>
<ul>
  <li>It's tasty</li>
  <li>It's healthy</li>
</ul>

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 (66)

Accessabilly wrote on 6 September 2020:
What Hidde says! 👉 "When you use a heading element, you set the expectation of content"
Monique Dubbelman wrote on 6 September 2020:
Clear explanation of the purpose of headings ⬇️
Monique Dubbelman wrote on 6 September 2020:
Thanks for this!
Darius Kruythoff wrote on 6 September 2020:
Separate looks from semantics. Don't use that <h2> for its looks alone.
Quentin Bellanger wrote on 6 September 2020:
Don't use headings only because they *look* like headings. #a11y hiddedevries.nl/en/blog/2020-0…
Alberto García Ariza wrote on 7 September 2020:
Then, they should not be headings, should they?
Hidde wrote on 7 September 2020:
yup that's the point :-)
Hidde wrote on 7 September 2020:
ICYMI: in the weekend I wrote a bit about what headings do for accessibility on web pages. #a11y
valentina bulgheroni wrote on 8 September 2020:
Oh yes!! So simple, but so true! "When there is no content between headings" hiddedevries.nl/en/blog/2020-0… #a11y #headings
Benjamin Read wrote on 8 September 2020:
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
Deborah Edwards-Oñoro wrote on 8 September 2020:
When there is no content between headings hiddedevries.nl/en/blog/2020-0… #HTML #a11y #accessibility
Ethan Marcotte wrote on 8 September 2020:
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 wrote on 8 September 2020:
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?
Hidde wrote on 8 September 2020:
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 wrote on 9 September 2020:
When there is no content between headings : hiddedevries.nl/en/blog/2020-0… #accessibility #a11y
Manuel Matuzović wrote on 9 September 2020:
“When there is no content between headings” by @hdv hiddedevries.nl/en/blog/2020-0…
Front-end Bookmarks wrote on 9 September 2020:
📣 New link added: “When there is no content between headings” by @hdv hiddedevries.nl/en/blog/2020-0… frontendbookmarks.com/html/elements/…
Aspire Themes wrote on 10 September 2020:
When there is no content between headings hiddedevries.nl/en/blog/2020-0…
Jennifer Perkins wrote on 10 September 2020:
Be careful in your document/site structure. #a11y hiddedevries.nl/en/blog/2020-0…
Adrian Roselli wrote on 10 September 2020:
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…
Katherine wrote on 11 September 2020:
This. 👏👏👏 hiddedevries.nl/en/blog/2020-0…
Dan Denney wrote on 12 September 2020:
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…
Content Design London wrote on 18 September 2020:
For accessibility purposes, you could think of headings as a table of contents. But what if there are headings without contents? hiddedevries.nl/en/blog/2020-0…
CSS Basics wrote on 18 September 2020:
When there is no content between headings, by @hdv hiddedevries.nl/en/blog/2020-0…
Ann wrote on 19 September 2020:
When there is no content between headings hiddedevries.nl/en/blog/2020-0…
Resoource wrote on 21 September 2020:
When there is no content between headings hiddedevries.nl/en/blog/2020-0… #htmlcss #webdev #FrontEnd
dailydevlinks. wrote on 22 September 2020:
📝 When there is no content between headings 🔗 hiddedevries.nl/en/blog/2020-0… #html #css #javascript #webdev #dailydevlinks
William Comfort Anderson wrote on 6 October 2020:
Q for #a11y experts: Smart people like @hdv say you shouldn't use a heading without content under it: hiddedevries.nl/en/blog/2020-0…. But HOW MUCH content? If it's an article teaser, is just a byline enough? What to do about patterns like this:
Lisa Dunn wrote on 14 October 2020:
A nice summary about how simple design techniques like always including content between headings of the same level can improve accessibility: hiddedevries.nl/en/blog/2020-0…
Divi Den wrote on 17 October 2020:
When there is no content between headings hiddedevries.nl/en/blog/2020-0…
The A11Y Project wrote on 14 December 2020:
"For accessibility purposes, you could think of headings as a table of contents. But what if there are headings without contents?" @hdv hiddedevries.nl/en/blog/2020-0…

Die Seitenstruktur sollte gut überlegt sein. Eine Seite mit umfangreichem Inhalt benötigt Überschriften um es Screenreader Nutzern zu erleichtern, durch die Seite zu navigieren und den Zusammenhang innerhab des Inhalt zu verstehen. Die Überschriften-Elemente (h1 – h6) sollten nicht nur zur visuallen Formatierung benutzt, sondern sinnvoll eingesesetzt werden. Es dürfen keine Ordnungs-Ebenen übersprungen werden (auf h1 folgt h2 usw.).

Nach einer Überschrift wird auch Inhalt erwartet, deshalb sollte man nach einer Überschrift derselben Ordnung immer Inhalt einfügen.

Daraus ergeben sich diese zwei Fragen in Bezug auf Überschriften:

  • Sinnvolle Beschreibung: besagt diese Überschrift eindeutig, welche Art von Inhalt darauf folgt?
  • Inhalt: Kommt nach der Überschrift Inhalt?

Dies sind die Grundregeln:

  • Es gibt nur eine h1 pro Seite (ein Titel eines Buchs)
  • Keine Ebenen überspringen (keinen Unterabschnitt vorstellen ohne das Kapitel zuerst vorzustellen)
  • Überschriften nicht zum reinen Formatieren des Textes verwenden, es muss immer eine semantische Bedeutung dabei sein.

Quellen:

When there is no content between headings

The Bootcamper’s Guide to Accessibility“ by Lindsey Kopacz