WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Reference to not add formatting attributes to Heading tags

for

From: glen walker
Date: Apr 29, 2022 12:03PM

Mark, that's an interesting situation. I understand the desire to have
consistent heading levels and the last troubleshooting section is indeed at
an h3 level compared to the other h3s, but I would probably make *all* the
troubleshooting sections h4s so that I can always find them using the '4'
screen reader shortcut key, even if that means a heading level is skipped
(an h2 followed by an h4). That's just a personal choice but I would find
it easier to use the '4' shortcut to find a troubleshooting section then
use Shift+H to hear the heading that is immediately previous to the
troubleshooting section so that I have context.

But to address JoAnn's original question, I agree with Patrick that, in
general, <strong> or <em> can be used in a heading without any trouble and
I have never heard that it shouldn't be done. But I presume the text you
want to emphasize with <strong> has a particular meaning? That is, you
want to emphasize part of the heading more than the other parts of the
heading? Depending on *why* you want to emphasize part of it, you might
have to convey that same importance to assistive technology too. While
<strong> is a semantic element, by default, a screen reader doesn't do
anything special with it so the user might not know it's there. The user
can certainly turn on formatting options with the screen reader so that
changes in fonts can be announced, but I don't know how often that's done.

I hate the "it depends" answers but that seems to apply here. It depends
on why you want to emphasize part of the heading.

<h2>some heading text <strong>that is really important</strong> that you
should pay attention to</h2>

<h2>some heading text <span class="sr-only">(please read carefully)</span>
<strong>that is really important</strong> that you should pay attention
to</h2>

The second example tries to convey the importance with screen reader text
but you almost need an "important text starts here" and an "end of
important text" segment.

But maybe that will spark some ideas.