Screen Readers Don’t Convey the Semantics of STRONG and EM

I always was under the impression that if I add emphasis to a piece of text in HTML by adding an em or a strong element, this emphasis would also be indicated to screen reader users in some way. For example, by a change of the tone of voice, much like if you are reading a text out aloud and add emphasis to a certain word by speaking slightly louder.

It turns out that this is not the case at all. As Steve Faulkner recently documented (again), none of the most commonly used screen readers like VoiceOver, JAWS, or NVDA convey the text semantics of those elements to users. And they also don’t expose em or strong element role semantics in the accessibility tree.

At first, I was kind of disappointed to hear that. Isn’t emphasis an important part of the design? Isn’t this the reason we are writing semantic HTML in the first place? But honestly, the explanation as to why NVDA, which supported it for a while, even removed support again reads more than plausible:

Having emphasis reported by default has been extremely unpopular with users and resulted in a lot of complaints about NVDA 2015.4. The unfortunate reality is that emphasis is very much over-used in the wild.”

Does this mean that you don’t need to use semantic elements to convey emphasis? Of course not. You never know where the semantics still matter. And it is also just the right way to indicate emphasis in HTML for the majority of users. But it is nevertheless interesting and important to know that screen readers don’t care by default.

~

16 Webmentions

Photo of @tink
@tink
@matthiasott … although with the renewed interest in vocal CSS (dubbed “CSS speech”) this may change in the future. See @tink 's posts recently such as https://tink.uk/addressing-concerns-about-css-speech/ Addressing concerns about CSS Speech - Tink - Léonie Watson
Photo of @tink
@tink
@matthiasott @tink Oh, hot of the press (14th February) : https://www.w3.org/TR/css-speech-1/ Candidate Recommendation! Yay for this Léonie! CSS Speech Module Level 1
Photo of Jan Boddez
Jan Boddez

In reply to https://matthiasott.com/notes/screen-readers-semantics-strong-em. Interesting. Have been using … By Jan’s photo Jan Boddez In reply to https://matthiasott.com/notes/screen-readers-semantics-strong-em. Interesting. Have been using things like i lang="en" this whole time, in, e.g., an otherwise Dutch text—because em would be “wrong”! But it’s true that most text editors for the web have long ditched i and b for em and strong. (Fact that they were at one point about to be deprecated probably didn’t help.) On Feb 16, 2023 bddz.be/g0l

Interesting. Have been using things like i lang="en" this whole time, in, e.g., an otherwise Dutch text—because em would be “wrong”! But it’s true that most text editors for the web have long ditched i and b for em and strong. (Fact that they were at one point about to be deprecated probably didn’t help.)
Photo of @matthiasott
@matthiasott
@andy That Spinoza Pro typeface (weight 700 on the emphasis) is a beauty 😍; My aged eyes are saying: thank you @matthiasott #TypeNerds typenerds
Photo of @fernandomateus
@fernandomateus
@fernandomateus Yes, I’m currently thinking of replacing it for my website redesign, because it’s coming from Adobe Fonts and I would love to self-host it. But it’s a really beautiful typeface, so I’m having a hard time finding something that comes close. 😅;
Photo of Frontend Dogma
Frontend Dogma
Screen Readers Don’t Convey the Semantics of “strong” and “em”, by @matthiasott@mastodon.social: matthiasott.com/notes/screen-r…

Likes

Reposts