WebAIM - Web Accessibility In Mind

E-mail List Archives

subheading structures that support heading navigation

for

From: jeffgutsell
Date: Aug 11, 2022 2:46PM

Hi All,

I think I am going to have a page where the h1 heading will need a
newspaper-style overline and sub-heading. Something like this:

<p class="overline">. Better mileage claimed </p>

<h1>Detroit rolls out 2023 car lineup </h1>

<p class="subheading"> Ford adds 3 day-glo colors to appeal to young buyers
</p>

Styling this is, of course, no big deal My concern is how this will be
navigated by users using heading shortcut keys. The overline and subheading
could be missed quite easily.

I have looked at enclosing this in an <hgroup> structure, but that does not
seem to help.

I experimented with giving the <p> tags role="doc-subtitle".

I also tried replacing the <p> tags with <h2>, but reading that seemed a bit
confusing.

I would prefer that when the user presses the "1" key, for instance, he/she
should hear the entire heading structure.

Perhaps there is no ideal solution, but I look forward to your suggestions.



Jeff Gutsell