Creating Accessible Email

This page will cover making accessible email.

You have a choice as to how to engage with the material in this lesson. Remember, the key concepts are always addressed in the text. If you need more info or learn by watching, the videos and resources are great supplements.

• Read About It
• Watch a Demo / Video
• Explore Resources on the Web

Avoid Image-only Email

A commonly-used strategy when creating email to advertise events is to simply send an image of the poster for the event. This has two major drawbacks. The first problem is that the text will not be accessible to readers who have visual impairments. Second, readers may be blocking images from their email--this is quite common with mobile phones. 

To fix this problem, you'll need to provide a text-based equivalent to the information contained in the poster image. Begin your email with all of the relevant information typed in, in text, then add your image. This approach privileges the information over the method of presentation. 

You could begin with the poster image, but people using screen readers may completely ignore your message, assuming that the message is inaccessible. When providing alternate formats, it's always best to lead with the most accessible information, or at least an indication that an alternate format is available. 

Another strategy you could use would be to provide a link to an alternate, accessible version of the email that is hosted on a website. From a marketing perspective, this is a less desirable solution, since it requires readers to load an additional page--you always want your message to be as easy as possible to access. 

In all cases, your poster or advertising image should contain alt text. It isn't a good idea to try to communicate all of the relevant information in the alt text--the information may not be available to people who access their email with all of the images blocked. 

Use the Same Strategies as Word

• Use Headings
• Add Alt Text to Images
• Use Formatted Lists
• Use Descriptive Links
• Use Good Color Contrast
• Avoid Using Spaces to Create Visual Alignment

See the Accessible Design Principles and Creating Accessible Word Documents lessons for more information

Differences in Mail Clients

An email client is a program that can send and receive email. Clients can be on your desktop, like Outlook 2013, or on the web, like Gmail or Outlook for Office 365. You may be able to access the same email from both a web-based client and a desktop client. The important thing to know is that not all email clients have the same accessibility or formatting tools available.

In general, desktop clients have a wider range to accessibility features available than web clients. Here's a list of some of the variations, as of May 2017.

Outlook 2013 for PC - Desktop

• No Accessibility Checker
• Headings are available on the Format Text tab
• To add alt text, right-click the image and select Format Picture. The interface should look familiar from Word 2013.

Outlook for Office 365

• Accessibility Checker is in the drop-down options below the composition window
• Semantic Headings aren’t possible
• Alt text can be added in four different ways:

1. 1. Right click on image and select Insert Alt Text
   2. Use the Fix This button in the Accessibility Checker
   3. Click on image, then click arrow in the lower left, then select Insert Alt Text
   4. Click on image, then click the button in the styling toolbar that looks like a picture with a nametag in the lower right corner (between the strikethrough and indent buttons)

Outlook 2016 for PC

• Accessibility Checker is available on the Review tab
• Headings are available on the Format Text tab
• Alt text in the Format Picture pane (right-click and select Format Picture)

Outlook 2016 for Mac

• Accessibility Checker is available on the Options tab
• Headings are not available unless you copy and paste well-formatted content from elsewhere
• Alt text in the Format Picture pane (right-click and select Format Picture)

Creating Accessible Email in MS Outlook 2013 (4:38)

A short video from Syracuse University demonstrating the accessibility features in Outlook 2013.

Improve Email Accessibility (5:07)

Microsoft demonstration of basic accessibility features in Outlook 2016. Includes captioned video, written instructions, and a transcript.

Improve Email Accessibility Links to an external site. 

Improve Image Accessibility in Email (2:12)

Microsoft demonstration of image accessibility in Outlook 2016. Includes captioned video, written instructions, and a transcript.

Improve image accessibility in email Links to an external site.

Add Accessible Tables and Lists to Email (3:05)

Microsoft demonstration of how to use lists and tables in Outlook 2016. Includes captioned video, written instructions, and a transcript

Add accessible tables and lists to email Links to an external site.

• Making Your Outlook Email Accessible Links to an external site. - Microsoft Help Guides keyed to Outlook 2016 for PC and Mac.
• Accessibility & Gmail Links to an external site. - A short guide for available tools in Gmail
• How to Create the Perfect Accessible Email Links to an external site. - An infographic about accessible email, accompanied by a text-based equivalent. This is a nice example of how you can have visually-attractive content that is also designed accessibly.
• eMail Campaigns Links to an external site. - A resource with some basic information on email campaign tools.