Accessible Emphasis

Ways to emphasize content without using a heading. 

What is Emphasis? An important accessibility tool for helping all users notice important or featured content.  Emphasis is usually shone through a combination of text and visual cues (i.e. bold, larger text size, background color, icons, etc)

How to make emphasis accessible. Visual cues help people with learning disabilities and reading disabilities distinguish important messages from the main content of the web page.  It is important, however, to make sure we also communicate emphasized content to visually impaired users who can’t take advantage of visual cues. 

This blog post introduces some techniques to emphasize content and make it accessible. There is no one single solution for emphasizing content, the best technique depends on the purpose of the emphasis. Most of the time you will need to combine several techniques to make emphasized content accessible.

Professional Practices

  • Don’t format text with HTML Headings to give the text emphasis. Screen readers turn headings into menu items for page navigation.
  • Don’t format text with underline to give text emphasis. For digital content, underline means the text is a link.
  • No more than 10% to 15% of your page content should be formatted with emphasis techniques.
  • It is understood that screen readers don’t generally acknowledge bold or italics, but it is still acceptable to use them. It is best to combine with another emphasis technique to help non-sighted users understand the importance of the content.

Containers for Emphasis

These HTML containers help assertive technology distinguish which parts of your content is additional information and which parts are the main body of text.

Nearly all emphasized content should be placed in an HTML container. On their own, these containers look no different than a regular paragraph. However, you can design these containers to visually stand out from your main body of text.

  • <aside> or <section>
  • <alert>
  • <div>
  • <p>

How to Use HTML Containers for Emphasis    

Text Formatting for Emphasis

Although screen readers do not generally acknowledge these forms of emphasis, it is still acceptable to use these because they help sighted readers. Combine them with Content Cues to make them more accessible.

  • Bold
  • Italic
  • Font Color
  • Font Size
  • Links

How to Use Text Formatting for Emphasis 

Content Cues for Emphasis

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

  • Words and Phrases
  • Icons
  • Horizontal Rules

How to Use Content Cues for Emphasis

 

Leave a Reply

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