Microsoft Outlook Playbook
Making your Outlook email accessible
Overview
Accessible email means your content is available to all users with limited barriers, regardless of the method or technology they use to access it. The good news is following these guidelines will make your content easier to read and understand. Some basics:
- Font size should be 12pt minimum, 14 is better. Larger for headings. (Outlook does have headings!)
- Italics should be avoided for more than a word or two, it dramatically slows reading speed (up to 70 percent for some).
- Bold should be used sparingly for emphasis. (Note, screen readers, do not alert users to bold or italic text, so emphasis for importance, might benefit by being called out with words and formatting, for example: Important: Out of office 9/1-12/1
- I would spell out Email, Phone, etc. for cognitive and foreign language accessibility.
- Ensure meaningful links are present for email and web addresses.
- Our logo should have alt text.
- The disclaimer should be regular text, the recommended #444444 color is AAA compliant.
Using plain language
Verify clear content and language and ensure terms are explained
Best Practices:
- Compose content at a 7th or 8th grade level, using clear language and short sentences.
- For long emails, consider a summary at the top, above the details
- Use bulleted or numbered list styles for key points, questions, etc. (Learn more about Using Lists)
Relates to: WCAG 3.1.5 Reading Level
Best practices
The first time an acronym is used, all words should be written out, followed by the acronym in parentheses. Subsequent instances can use only the acronym.
For example:
The Americans with Disabilities Act (ADA) was passed in 1990. The ADA was created to protect the civil rights of people with disabilities.
Exception(s)
Abbreviations such as PDF which has become common usage
Content Designers and Application Developers and Programmers Best Practices
Don't use tooltips, hover, or the <abbrev > tag
Relates to: WCAG SC 3.1.4 Abbreviations
Easy to read text format
Ensure fonts and text are readable
The text is readable.
- The font style is clear and easy to read: UTMB uses Minion Pro (if unavailable use Georgia ) or Helvetica Neue (if unavailable use Arial )
- Text size is at least 14pt
- Any text with color has a clear contrast from the background
Most text is left-justified
Text alignment can affect reading speed and comprehension
- Centered text can be helpful or visually pleasing and a way to organize a page. Unfortunately, long sections of centered text significantly slow reading speed and aren't good for people with dyslexia.
- Block or justified text
was originally used in newspapers to make the columns visually
appealing. This is achieved by randomly adding spaces between words so that the last character of a word ends each column. Because the spacing
is different for each sentence this significantly slows reading speed
and can cause delayed comprehension.
Best practices:
- Center short sections of text, primarily use for headings and new sections
- Avoid block or justified text
Images have alternate text
Images have alternative text
Summary: images must have associated text describing the content of the image also called alt text. Some decorative images do not require a description.
Writing a good image description
Describe the image like you would to a person who wasn't in the room with you, so they know what is happening in the image.
- Write in sentence case.
- Include just the description, not introductory text like "An image of" or "Image of" as screen readers will say something like, "Image: Image of a red train going through a dark tunnel."
- Indicating the image is a graph, photo, or screenshot is okay. It will often sound like Image: Graph showing the number increase in sales" or "Image: Photograph of Mount Hood at sunset"
- Include any text in the image (for example legacy images that haven't been updated)
- If the image is complex or needs more of a description, add a detailed caption to the image.
Basic verification
- Run the application's accessibility checker. If the application doesn't have an accessibility checker (or wizard, etc.) Manually verify that each image has a description.
- Verify images
- have alternative (alt) text
- the image doesn't contain words as part of the image
- doesn't use the file name as the alt text
See also:
Add alt text to images in:
Relates to: WCAG 1.1.1 Non-text Content
Links are descriptive
Overview
Do:
- Avoid one word links
- Create meaningful link text
- Limit links to seven words
- Limit the use of anchor links (cognitive, visual)
Don't:
- Use "click here", "click to," "image of" in the link
- Use the same link text for more than one link
- Change the link formatting from the standard
Hyperlinks (Links) need to be clear and easy to understand.
- Links should be a few words of text to a phrase
Best Practices
- Short: Links should be under 50 characters
- Unique text: Links shouldn't contain "More," "Read More," "Find out more," "Click Here," or have the same link duplicated on the page
- Links should be meaningful and indicate what selecting them will do (go to a page, email someone, download a document, etc.
- Avoid text instructing the user to click the link. If absolutely required; avoid using click, instead use select. (Not everyone is using a mouse and can click)
Email links
- Recommended: Email the marketing team
- Email the marketing team at marketing@example.com
Phone links
Notes: Use hyphens and include the country code.
<a href="tel:18005555555">1-800-555-5555</a>
For more, detailed information, see 3.5.6 Make Telephone Numbers "Click-to-Call"
Relates to:
Use of color
Color can't be the only way to indicate the meaning of an item.
Example 1
Hyperlinks (links) that are only indicated by a change in text color
Solutions:
- Hyperlinks should be underlined
- Additional affects should be added for focus and hover that do not rely on color alone. (UTMB is currently adding a second underline. For example, cards on the this site have a dashed edge on hover)
Example 2
Using green to indicate good, yellow to indicate warning, and red to indicate an error. A person with colorblindness or low vision will need additional formatting to distinguish between them.
Solutions:
- Use a label for each area in addition to the color
- Use a pattern in the color (such as stripes, or dots) so the meaning can be identified by texture
Relates to: WCAG 1.4.1 Use of Color
Outlook application tips
Overview
It can be helpful to remind others to create accessible content. You might need this because you're using a screen reader, have color blindness, or simply want email that's easier to read. When configured, this setting will add a reminder to the sender's compose window, similar to an out of office message. The reminder will let the sender know you're requesting that their email be accessible and provides a link for them to launch the Accessibility Checker.
Note: Not all users are familiar with this and may not see it or know what it means, but it can be set for those who do.
Configure Outlook to request accessible content
Steps
- Log into the web version of Outlook.
- Select View menu.
- Select the View Settings button.
- Select General on the left navigation.
- Select Accessibility.
- Locate the Accessible Content section.
- Enable the checkbox for Ask senders to send content that's accessible.
- Select the Save button.
- Close the window by selecting the X or pressing the Esc key.