If you are sending an email from your phone, you may not have access to text formatting options. WCAG 2.1 includes a few techniques for improving the accessibility of plain text content.
Formatting Paragraphs
Include one line space between paragraphs, a full stop.
Formatting Lists
For bulleted lists, use an asterisk * or a dash –
For Numbered lists use one of the following formats:
Number followed by a period or a closed parenthesis, e.g. 1. or 1)
Upper case letter followed by a period or a close parenthesis, e.g. A. or A)
Roman Numerals (use lowercase) followed by a period, e.g. i., ii., iii., iv., etc.
Formatting Headings
Include two line spaces above headings and one line below (except if followed by a new heading).
These standards apply to all email applications. Not all email clients will have all these options available; just use the options that are available to you.
Note: Most people read their email on a mobile phone. These accessibility guidelines not only help people with disabilities understand your email, but also help sighted users view your email on a small screen.
Email Format
Emails that are in HTML or Rich Text formatting are the most accessible.
Plain text emails are less accessible.
Text size
14 px or 12 pt is considered the most accessible body text size.
Headings should be slightly larger than your body text.
Divide your email into small readable content chunks to make your email easier to understand. Start each content chunk with a heading that summarizes the topic.
Format your headings with Heading Styles 1 through 6.
Links
Don’t include URL’s in the body text. Instead, use text links.
If you need to include a full URL as a citation or research documentation, create a section in your email, sort of like a footnote, and give it a heading (e.g. Citation URL’s). Place all the citations in a bulleted list. Include the page title along with the URL.
Text formatting
Limit your use of Bold, italics, all-caps, etc. Too much will make your text difficult to read.
Don’t use full or right justification, these don’t always align properly in some email clients and may hide your content off screen on mobile devices.
Don’t use tables to layout an email, only use tables for tabular data.
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 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.
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.
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.
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 Websiteadobe.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.
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.
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
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?
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.
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.
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: Aborder changes a simple paragraph into an emphasized announcement. Adding the phrase “We’re redesigning” helps screen reader users understand why the content is important.
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.
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.
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.
<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.
<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.
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.
<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.
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.
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.
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.
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.
