Screen Read­ers Don’t Con­vey the Seman­tics of STRONG and EM

Posted by

16 Webmentions

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:

Hav­ing empha­sis report­ed by default has been extreme­ly unpop­u­lar with users and result­ed in a lot of com­plaints about NVDA 2015.4. The unfor­tu­nate real­i­ty is that empha­sis 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

  1. 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…
  3. 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. 😅
  4. 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
  5. 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

    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.)
  6. 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
  7. 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

4 Reposts

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.

More Notes