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.
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.
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.
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.
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
- 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?
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.
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.
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.
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.