Accessibility: Bold vs. Strong and Italic vs. Emphasis
When it comes to the accessibility of your content, we recommend using semantic markup to properly announce style changes to all users. Let's look at why this difference is important.
Bold and Italic tags
Bold and italics are often used to highlight words or phrases in a paragraph of text. Using these tags, aids in scanning the content for a person who is sighted, for example:
"I would like to be notified by email, not other forms of communication."
"His favorite book is The Grapes of Wrath."
But the Bold tag, <b>, and the italic tag, <i>, are listed as a WCAG compliance Level A error because most screen readers will NOT announce these changes to the screen reader user. <b> and <i> should not be used to style text when the author wants to emphasize a word or passage of text.
Strong and Emphasis tags
To be sure to provide the same experience to all users, strong and emphasis tags need to be used instead of bold and italic tags. This is a big shift, especially for content contributors, but necessary to provide an equal experience for all users.
The Strong tag, <strong>, and the Emphasis tag, <em>, are considered Semantic Markup that allows for added meaning to your content. It serves as an indication to a screen reader of how something should be understood.
Benefit of Semantic Markup
The bold tag <b> versus the strong tag <strong> will look exactly the same when viewing the content in a browser but provide a different experience to screen reader users.
When something is bolded in a piece of text using the <b> tag, it will come to no benefit for users using screen readers. This is especially critical when the tag helps to convey special meaning for the words or phrases being highlighted.
If you strive to make your online content accessible, aim for replacing bold tags with strong tags where applicable. When you want to exhibit very strong importance to a specific span of text, you can place a <strong> tag within another <strong> tag.
Using HTML Styles
The HTML Style attribute can be used to add style to an element, such as color, font, size, and more.
For example, to change the appearance of text to bold it can be declared in HTML using:
If you’d like your text to have a bold styling but it shouldn’t be communicated as having emphasis then using a style attribute or CSS is perfectly fine.
If text should be conveyed to a screen reader as having a “bolded” emphasis then <strong> should be used.
Using Heading Tags
In some cases, content editors may be using the bold tags (<b>) in place of a heading tag (e.g.<h1>) thinking it will be conveyed to all users. But as we have identified, bold tags are not announced to screen reader users.
Additionally, heading tags are an essential way for screen reader users to scan a page. Using short-cut keys, the screen reader would read all the headings on the page so that the user can navigate quickly to
the area they are interested. This saves them time since it doesn’t require reading through the entire page to find what they need.
If there are situations where bold or italics tags are used to break up content into sections, make sure to use heading tags instead to make the experience easier and clearer for all users.
If you want to make your online content accessible to those using a screen reader:
- Avoid from using style tags such as <b> and <i>
- Use semantic tags <strong> and <em> (italics)
- Use heading levels to break up content and make it more scannable
Did you find it helpful?Send feedback