Category Archives: Emphasis

Text Formatting for Emphasis

Examples of formatting text to emphasize content.

Although screen readers don’t generally acknowledge these forms of emphasis, it is still acceptable to use these because these visual information cues help sighted readers.

Text Formatting

Bold

For emphasizing key words and key concepts.

  • Don’t format an entire paragraph as bold.
  • Don’t bold more than two to three lines of continuous text.

Website Example Tenon.oi: Single keywords are formatted with bold. This helps your reader skim the page and find these important words quickly.

Example of formatting keywords in bold for emphasis from the Tenon.oi website. Image description precedes this image.

 

Website Example WAI.org: Short phrases emphasizing key concepts are formatted with bold. This helps your reader skim the page and find important ideas quickly.

Example of formatting short phrases of key concepts in bold for emphasis from the WAI website. Image description precedes this image.

Website Example WAI.org: An important sentence is formatted with bold. This is only effective if you have one or two instances of this on a page. Remember, don’t format more than two to three lines of text in bold.

Example of formatting a sentence in bold for emphasis from the WAI website. Image description precedes this image.

 

In the following paragraph, there is too much bold, so nothing stands out as important because it all looks the same. Also, you can’t emphasize text that is already emphasized.

Nevertheless, some writers —let’s call them overemphasizers—just can’t get enough bold and italic. If they feel strongly about a point, they won’t hesitate to run the whole paragraph in bold type. Don’t be one of these people. This habit wears down your readers’ retinas and their patience. It also gives you nowhere to go when you need to emphasize a word. That’s no problem for overemphasizers, who resort to underlining bold text or using a lot of bold italic. These are both terrible ideas. – Matthew Butterick

 

Italic

  • Use sparingly because it is hard to see and read on screen.
  • Best used for formatting for writing style guide purpose,e.g. book titles, foreign words,citations, quotes, etc.

Website Example Tenon.oi: Which do you notice first, the bold text or the italic text?

Example of formatting a sentence in italic, from the WAI website. Image description precedes this image.

Font Size

You can make text large to emphasize it, just don’t use a heading tag! Most CMSs, LMSs, and blogging platforms have a big or large text option.

Website Example Knowbility.com: Large fonts are often used for leading paragraphs in articles or to summarize a topic. This is the one scenario where you might be able to use a font that is different from the main body text.

Example of formatting a short paragraph in a large font for emphasis, from the knowability.org website. Image description precedes this image.

Links

Because links are usually a different color, may have an underline, or may be bold, they naturally stand out in text. Make sure they don’t compete with other content you are trying to emphasize.

Website Example Tenon.oi: Linked text can actually be more overpowering than regular bold text, so be careful where you place them.Example of a link text next to regular text formatted in bold for emphasis from the Tennon.io website. Image description precedes this image.

Container Formatting

Border

You can add a border to the container, just make sure it is not to bold and distracting, you don’t want it to compete with your text. Combine with Content Cues to make them more accessible.

Website Example a11y Project: A border changes a simple paragraph into an emphasized announcement. Adding the phrase “We’re redesigning” helps screen reader users understand why the content is important.

Example of adding a border to a an alert box to bring emphasis to its content, from the A11y Project website. Image description precedes this image.

Background Color

You can give the container a background color to emphasize content; just make sure your font size, font color, and background color meet the WCAG Level AA requirements for accessible color contrast.

  • Text color must have accessible contrast with its background color.
  • Don’t rely on color alone. Combine the color with bold, a larger font size, and or an icon to help it stand out if a reader can’t see the color.
  • Combine with Content Cues to make them more accessible.

Website Example US Web Design Standards for Designers website: adding a background color changes a simple paragraph into an emphasized announcement. Adding the word “notes” helps screen reader users understand why the content is important.

Example of using a background color to bring emphasis for a paragraph. From the US Web Design Standards for Designers website. Image description precedes this image.

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.

 

Containers for Emphasis

Examples of using HTML containers to emphasize content.

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

On their own, they 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> Containers

Most Accessible

For general announcements, highlighting ideas, giving  more information, suggesting related content, creating side-bars, boxes, etc.

In the following example from the Web Accessibility Initiative (WAI) website, the box titled “More Info on Evaluating Accessibility” is an <aside> container. Asides are a good for choice emphasizing content that is directly related to the main content on your webpage. Also, the <aside> is not randomly placed. It is included under the “Evaluating Accessibility” heading, this structure relates the emphasized content to a specific topic.

Example of an html aside for emphasis on the WAI website. Image description precedes this image.

 

In the following example from Deque Systems, the boxes located in the right column, containing “Learn Web Accessibility” and “Sign up for the axe newsletter,” are both in <section> containers. Sections are a good choice for emphasizing content not directly related to the main content of your page.

Example of an aside for emphasis on the Deque Systems website. Text description is in the preceding paragraph.

 

<alert> Containers

Most Accessible

Only for urgent announcements, error messages, and successful completion messages. Alerts often have a close button so they can be turned off.

In the following example from the DC HealthLink website, the “Individuals and Families” message at the top of the website is an <alert>. Alerts are only for emergency messaging and error/success messages because the screen reader will announce them automatically when they appear, regardless of where the user is focused on the page. Because of their interactivity, alert boxes are usually coded for you by a developer or part of your web publishing software. However, you may need to author content that goes inside of the box. For that, you should incorporate Text Formatting for Emphasis  and Content Cues for Emphasis techniques.

Example of an html alert for emphasis on the DC HealthLink website. Image description precedes this image.

 

<div> Containers

Less Accessible to Accessible

Not all CMS’s, LMS’s, blogging platforms, and document editors have the latest web accessible technologies so you’ll need to make do with what you have to work with. The <div> container is an old standard HTML tag that can help out in a pinch. It’s really best to stop using generic <div> tags.

  • <div> is the last resort alternative to <aside>, <section>, and <alert> containers.
  • Assign the role=”group”  attribute, if you can.

In the following example from WebAim.org, the box containing the “Important” message is in a <div> container. It is included under the introduction heading; this placement relates the emphasized information specifically to the Introduction.

Example of an html div for emphasis on the WebAim website. Image description precedes this image.

 

In the following example from Deque Systems, the “Note” message is a <div> container. It is included under the “How to fix the problem” heading; this helps relate the note to that specific topic.

Example of an html div for emphasis on the Deque Systems website. Image description precedes this image.

<p> as a Container

Accessible

For content that is actually part of your main body text but you just want to flag it for emphasis.

  • Combine with Text Emphasis and Content Cues techniques to make the <p> as accessible as possible.

In the following example from Blackboard, an icon is placed to the left of the sentence to show emphasis. The sentence could actually be part of the main body of the text. If the icon was removed, the text would seamlessly fit into the reading order of the surrounding content.

Example of an html paragraph for emphasis on the Blackboard website. Image description precedes this image.

 

In the following example from tenon.io, emphasis is shown by adding the word “Note:,” in bold, to the beginning of the sentence.  The sentence could actually be part of the main body of the text. If the word “Note:” was removed, the sentence would seamlessly fit into the reading order of the surrounding content.

Example of an html paragraph as emphasis on the Tenon.io website. Image description precedes this image.

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