Skip to main content

Bold and italics aren’t read by screen readers

Posted in Accessibility

Whether you call them italics and bold or <em> and <strong>, we’re talking about emphasis and the HTML used to communicate it.

A sighted user will be able to pick out the italicised or heavier text that denote levels of emphasis, but unfortunately most non-sighted screen reader users won’t know anything about it. They can query a word, but if they don’t know there’s anything different about it, why would they query it?

Interestingly, the NVDA screen reader added support for emphasis, only to remove it following complaints by users:

Having emphasis reported by default has been extremely unpopular with users and resulted in a lot of complaints about NVDA 2015.4 … As such, we’ve now disabled this by default, though the option is still there for those that want it

So it can be switched on, but I doubt a high percentage of users use the feature because:

In the old GOV.UK Elements, they were very clear about how bold and italics should be used in body copy:

avoid using bold and italics

The GOV.UK Design System that superseded Elements is less prescriptive, though they talk more about highlighting critical information, than semantic emphasis:

You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss.

The example they give draws attention to a reference number and an email address, so the use of the word “emphasise” is misleading; the <b> element would be more appropriate than <strong> here.

It’s also worth noting that the GDS Transport doesn’t have an italic/oblique variant, just Light and Bold, so emphasis (if indeed it is emphasis) doesn’t come in more than one flavour.

The take away here is: if you’re relying on emphasis to convey meaning you’re on dangerous ground, as some users won’t know it’s there.

Like many tools we reach for as web designers, text-level semantics like italics and bold should be treated as a progressive enhancement. In other words, your sentences should make sense without emphasis; those <em> and <strong> wrappers should just offer a nice added extra for users that know they’re there.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

    It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.

  2. Apple dials back the Safari 15 for macOS redesign

    The ultra-condensed tab bar in the up-coming Safari for macOS has been reverted in the betas; it’s now just an option in Safari’s Preferences.