WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: subheading structures that support heading navigation

for

From: Mark Magennis
Date: Aug 19, 2022 1:58AM

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