What’s the best practice for emphasizing text through HTML? You might put important words in italics or bold typeface — but those techniques are not necessarily accessible for people who use screen readers.
The HTML specification includes a few techniques for emphasizing text:
This seems fairly straightforward: <strong> and <em> are the better tools for accessibility.
But many screen readers will not change their output when encountering one of those semantic tags. The output is largely dependent on the user’s verbosity settings.
Mostly because websites misuse those tags. JAWS and NVDA, the two most popular screen readers, can be configured to change pronunciation rules based on the presence of <em> and <strong>, or even to announce <b> and <i> tags — but many users don’t change those settings.
Think of it from a screen reader user’s perspective: Unless they’re using a braille keyboard, they’re listening to your website. That takes time, and extra verbosity means more time spent on each page.
And since many websites use text emphasis tags haphazardly, a higher level of verbosity can create a confusing experience. Most people would rather just hear the text.
Related: What Is Screen Reader Verbosity, and Why Is It Important?
If you want to emphasize text in a way that sends a clear signal to all users — including people who use assistive technologies — the best practice is to choose your words carefully.
For example, you could simply add the word “important" before critically important instructions:
Important: Fill out all fields before submitting this form.
Note that we’re still using bold styling for the word “important." It’s perfectly fine to do this! By emphasizing text in both visual and non-visual methods, you’re communicating more effectively.
If you really dislike using the word “important" in your content, you could hide it from visual users with a <span> tag with appropriate CSS — but generally, we find that the simplest solution is the best choice for accessibility. And it doesn’t get much easier than changing your word choice!
Related: Accessibility Tips: Using the DIV and SPAN Elements
Potentially, if you’re a stickler about the rules: The Web Content Accessibility Guidelines (WCAG) 1.1.1 requires that “all non-text information that is presented to the user has a text alternative that serves the equivalent purpose.”
Non-semantic tags like <b> or <i> technically violate 1.1.1 in some circumstances. However, if your text is still understandable without those tags, you could argue that the tags are just part of your visual styling.
Here, it’s important to remember that the goal of accessibility isn’t just conformance with WCAG or compliance with laws like the Americans with Disabilities Act (ADA). Your goal is to create inclusive content that works for as many people as possible — so rather than focus on conformance, focus on your users. You’re creating content for real people, and every decision you make will impact your audience.
To build your knowledge of accessibility, download our free eBook: Developing the Accessibility Mindset. If you have questions about digital accessibility, we’re here to help; send us a message to connect with an expert.