How to correctly mark up a headline "kicker"

Sebastian Greger

(Update log)

2022-01-08: Added dictionary link to “kicker” term, thx Joschi; added “eyebrow” based on comment by Eric


#a11y friends: pattern or anti-pattern?

<p id="k">Kicker</p>
<!-- some other cruft, e.g. img -->
<h2 id="h" aria-labelledby="k h">Heading</h2>
<p>Lorem ipsum …</p>

instead of:

<!-- ... -->
<p>Lorem ipsum …</p>

Any major cons? Thanks!
Joschi Kuphal

Joschi Kuphal and some of his contacts discuss the optimal HTML semantics for a “kicker” (the little pre-heading on top of a headline, sometimes also called “eyebrow”; “Dachzeile” in German) from an accessibility perspective. Some very interesting nuggets and perspectives…

I have included the “kicker” in simple <span> tags as part of the headline before, but of the solutions discussed in the thread, I almost prefer the idea that the “kicker” (cf. MerriamWebster) is actually something that semantically belongs below the headline and could the be lifted only visually.

I'm Sebastian, Sociologist and Interaction Designer. This journal is mostly about bringing toge­ther social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. I also tend to a "digital garden" with carefully curated resources.

My monthly email newsletter has all of the above, and there are of course also an RSS feed and Twitter.