Accessibility: The use of emphasis in text
Creating emphasis within text is valuable for getting a message across. It helps indicate to the reader that they should take note of particular words and phrases.
Using emphasis 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 emphasizing text should not be limited to those who are sighted. Important text should also be clear to those using screen readers. There are a few ways to achieve emphasis in text, some of which are better than others. This article discusses the common approaches.
When using these techniques, it is good to be aware that bolded text that stands alone can be confused with a heading, and a paragraph of italicized text is known to be particularly difficult to read.
Acceptable method
Using word choices to communicate emphasis is the most appropriate method. In most cases, tags and markup code used to emphasize text are ignored by screen reader software with the default settings.
Choosing words to indicate emphasis is the only way to guarantee that important content is communicated clearly. This can mean repeating and rephrasing important information. In some cases, you may even want to write the word “important” along with the text to emphasize a point.
Examples:
- This technique led to a 30% increase, yes, a 30% increase, in sales.
- Important! Do not put petrol on the fire
Acceptable in some cases
Strong and Emphasis tags
The Strong tag, <strong>, and the Emphasis tag, <em>, are considered Semantic Markup that allows for added meaning to your content. In some cases, they can serve as an indication of emphasis to a screen reader.
Semantic mark-up is better than mark-up used purely for styling but unfortunately, many screen readers ignore these tags by default. Some screen readers (e.g. JAWS and NVDA) can be configured to announce the emphasis, but enabling this requires some technical knowledge.
The Web Content Accessibility Guidelines (WCAG) discuss these methods in this article - Using semantic markup to mark emphasized or special text.
Methods to avoid (i.e. do not use these methods)
Bold <b> and italics <i>
These should not be used. The bold <b>, and italic <i> tags are listed as WCAG compliance Level A Errors.
Screen readers do not normally announce these tags to the user. However, some (e.g. JAWS) can be configured to point out bold and italics.
We advise against using bold <b>, and italic <i> tags when you want to emphasize a word or passage.
HTML Style
HTML Style attributes are 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:
style="font-weight:bold"
If your text should have bold styling but should not be communicated as having emphasis, then using a style attribute or CSS (Cascading Style Sheets) will achieve this. However, this information will not be conveyed to someone using a screen reader.
Heading tags
Heading tags are important for accessibility allowing screen reader users to quickly scan a page. Using shortcut keys, screen reader software can read the headings on a page and navigate to the chapter of interest. Headings save time for all website users.
However, headings should not be used to emphasize text. They are used as a way of indicating where you are in a document
Conclusion
We recommend you use the written text itself to emphasize important content.
If you decide to use visual emphasis, we suggest using the semantic tags Strong <strong> and Emphasis <em>, and that you avoid using Bold <b> and Italics <i>
Even if you do use Strong <strong> and Emphasis <em> tags, there is no guarantee that they will be communicated by a screen reader. However, some screen readers (e.g., JAWS and NVDA) can be configured by their users to recognize these tags.
Additional resources
Did you find it helpful? Yes No
Send feedback