Content Cues for Emphasis

Examples of using words, phrases, and graphics to emphasize content.

Words, short phrases, and icons help both sighted and non-sighted users understand why you emphasized the text. Content Cues explain why the emphasis is important.

Content Cues: Words and Phrases

A single word or short phrase like “Important!,” “Tip!,” “Announcement!,” “On the Test!,” etc. can be enough to signal that information is important.

When combined with Text Formatting, sighted users can easily distinguish the content as emphasized. The words allow Screen reader users can understand why the content is important.

Consistently applying specific words or phrases to emphasized content is helpful for two reasons.

  • Consistency helps you train sighted sighted users to look for these cues and recognize them as important.
  • Screen reader users can search for these words to find important information quickly.

Only use one to three cues per website, too many different messages will create confusion and your emphasis will be lost all together.

Example Website accessibility.dev: The phrase “Pro tip” is used to Introduce specific helpful information. This messaging word tells both sighted and non sighted users the purpose of the information. Bold helps the content stand out for sighted users.

Example of using the into phrase "Pro tip" from Accessibility.dev. Additional text description precedes this image.


Example Website adobe.com: 
The word “Solution” is used to Introduce specific helpful information. This messaging word tells both sighted and non sighted users the purpose of the information. Bold helps the content stand out for sighted users.

The word "solution" is used as a messaging word to emphasis content on adoe.com. More text description precedes this image.

 

Icons

For sighted users, a simple icon is a great way to flag content you want to emphasize. You should still combine the icon with a word or phrase to make the emphasis accessible to screen reader users.

  • Icon color must meet the WCAG Level AA requirements for accessible color contrast.
  • You can use HTML <i> or a small graphic to insert icons. Give them alternative text that is the same as the word or short phrase you are using for emphasis.
  • Icons can be used alone or in combination with other visual elements such as borders and background colors.

Example Website WebAim.org: Important information is emphasized with an icon, border, and background color. These visual elements help sighted users to easily notice the content. The word “Important” helps non-sighted users understand the purpose of the content.

An icon with an exclamation point is used along with the messaging phrase "Important" to emphasis this information from WebAim.org


Example Website Deque.com: 
Notes are emphasized with an information icon, border, and background color. These visual elements help sighted users to easily notice the content. The word “Note” helps non-sighted users understand the purpose of the content.

In this example from deque.com an information icon is used to place emphasis on an important note. More text description precedes this image..

Hard Rules

Hard rules help both sighted and non sighted users.

  • For sighted users, the lines visually set the content apart from the rest of the page.
  • For non-sighted users, the screen reader will announce the hard rule as a “section” to let the user know that this information is separated from the main content.

Make sure you use an HTML Hard Rule <hr/> and not a border.

Example Website adobe.com: Notes are emphasized with hard rules. They provide a visual element that help sighted users easily notice the content. The word “Note” helps non-sighted users understand the purpose of the content.

This example from adobe.com uses hard rules to emphasis content. More description in the preceding text.

 

Leave a Reply

Your email address will not be published. Required fields are marked *