Email clients and accessibility

Posted June 2020

Do want to be a better communicator? If your email communications are accessible, you can be assured that your message will be delivered to everyone, including people with disabilities.

This page offers some tips for creating emails so that your users' experiences are accessible. Information and resources will be added as we gain more information.

Images

Many email clients don't display images by default. If there is no alt text, even sighted users will miss information.

Email with a header and no alt text

Don't send ONLY an image (such as an infographic or a poster) as the email. Include the same information in text.
Add alt text to all images in your messaging, including any header images or logos, so screen reader users can get the message conveyed by the use of the image (also good for general usability!).
If you use social media logos, be sure to include alt text.
WebAIM's Alt Decision Tree can help you decide what kind of alt text to write for your images.

How to add alt text for various email clients

Gmail: Workaround trick per Lucy. Start in Google Docs, add image and create alt by selecting image then choosing Format > Alt Text commands. Copy image from Google doc and paste into the message and the image alt text follows along.
Office 365: Select image > right click image > add alt text
Outlook Desktop: Right click image > format picture > layout and properties > alt text > there are two fields: description and title (ignore the Title attribute or put the same content in both)

Videos

Only distribute or link to videos that are accessible
- e.g., captions

Headings

Proper heading structure (<h1>, <h2>, etc.) helps organize your content, and screen reader users can use heading structure to navigate content.
Don't use multiple <h1> tags in the same email.
Follow the correct order (don't skip heading levels).
Separate presentation from structure. Example: using headings instead of applying bold and increasing the font size of text provides a better experience for screen reader users.

Color

If you use a color combination with low contrast, such as light gray text on a white background, it can be hard to read for people with low vision or color blindness. Low contrast also makes text hard to read under poor lighting conditions and direct sunlight.
Dark text on a light background color is easiest to read for most people.
If your campus offers an accessible digital color palette, use those colors. This also keeps the look in compliance with your campus branding standards.
Should you decide to use backgrounds colors other than black or white, pick from the custom colors provided and use color contrast tools to test the colors contrast ratio that meets WCAG Guidelines.

Testing

Whether you work with an external vendor or a team on campus to develop your website, make sure accessibility is part of the development process.

Test for accessibility often, especially when any new features are implemented.
Test color contrast ratios to meet WCAG color contrast guidelines
Find a screen reader user to check it or at least look at it with images off and make sure the text displays and no vital info is missing.
Send yourself a copy and look at it in a browser using your standard browser inspectors.
Send yourself a copy and view it on a mobile device in portrait and landscape orientations.

General email etiquette

Put the URL for a video meeting invitation on a blank line, without any other text or characters around it. This enables the screen reader user to just hit enter to access it, rather than also having to tab over the text.
Do not put the URL in the location line of a calendar invitation because it does not appear as a live hyperlink; put it in subject line or the body of the email.

Electronic Accessibility