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

2022-11-04: Added link to an article about new semantic ways to do this


#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.

Addition, 2022-11-04: The following article suggests a standards-compliant way of achieving this:

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 occasionally sent email newsletter has all of the above, and there is of course also an RSS feed or my Mastodon/Fediverse profile.