E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: jeffgutsell
Date: Thu, Aug 11 2022 2:46PM
Subject: subheading structures that support heading navigation
No previous message | Next message →

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

From: Mark Magennis
Date: Fri, Aug 19 2022 1:58AM
Subject: Re: subheading structures that support heading navigation
← Previous message | No next message

Jess,

I think the main problem is that the overline comes before the <h1>. As you're probably thinking, the heading for a content block (in this case the whole page) should always come before the rest of the content in the block. You can fix that in either of two ways.

1. Put the overline after the heading in the code and position it above using CSS. But then the reading order is different from the visual order which is not ideal and it breaks the logic of the overline being an overline (not just visually but logically before the heading).

2. Include both the overline and the heading in the <h1>: "Better mileage claimed. Detroit rolls out 2023 car line up". It's good to add the period as a separator in case concatenating the two pieces might form a sentence with an incorrect meaning. I would think this is the better option, even though it doesn't give much logical separation of the overline from the heading.

You could go further and also include the subheading within the <h1>: " Better mileage claimed. Detroit rolls out 2023 car line up. Ford adds 3 day-glo colors to appeal to young buyers". This seems to be your preference because when the user presses the "1" key, he/she would hear the entire heading structure. But this makes for very long headings and I think the overline and heading will stand up on their own as an adequate title for the article, so the subheading may be okay as just text to be read after the heading.

Don't use <h2> for either of the bits. They aren't subheadings logically.

Hope this helps.
Mark