Email is a vital communication tool, so it’s important to avoid accessibility barriers that might prevent someone from viewing or understanding the message. Research shows that when an email is accessible, people are more likely to read it.
The good news is that whether you’re writing simple, everyday emails or designing marketing messages for a large audience, many of the same accessibility principles for content creation also apply to email. These guidelines and recommendations will benefit everyone and help ensure your message comes through clearly to your audience.
Choose an accessible design template
If you're creating an email using a third-party platform such as MailChimp or Constant Contact, select a design template that is simple and flexible. One- or two-column layouts are preferred, as they're easier to read on multiple devices. If needed, use images and design elements to enhance your email, but be careful to avoid distracting animations or chaotic designs.
Avoid tables for layout
Tables as a layout component can be very confusing for users reading with assistive technology. Instead design your email using native tools like text and columns to create the layout. Content should be responsive and follow a logical order of elements when read. If you must use tables for layout, add the attribute <table role="presentation"> on every table element to ensure screen readers won’t treat them as data tables.
Use color mindfully
Choose a color for your text and other elements that has a high degree of contrast against the background color to ensure it can be easily read. For web content, the standard is a ratio between the two colors of 4.5:1. Avoid light text on light backgrounds and dark text on dark backgrounds.
Some automated accessibility checkers will alert you to color errors as you work. To test on your own, try downloading a desktop tool, such as the TPGi's Color Contrast Analyser.
Color for Meaning
Color is a great communication tool, but should be used mindfully. Avoid using color alone to convey meaning, as your message may be missed or misunderstood by people who can't see color. Instead use color along with a secondary element (such as shape or text differences) to ensure the meaning can be understood without the use of color alone.
When you embed an image in an email, it’s important to remember that many people turn images off in their email clients for privacy reasons or bandwidth issues, and people with vision impairments might not be able to view the image. If the image conveys meaning, information, or even a feeling or tone, it needs to have alternative (“alt”) text that displays if the image doesn’t load or isn’t visible.
In this example, an email is shown with images enabled and displayed on the left, and images disabled and not displayed on the right. Because there was no alt text added to the image, the email does not contain any content when images are not displayed.
Alt text should be concise and descriptive, but shouldn’t duplicate the text in the body of the email. Learn more about writing effective alt text.
How to add alt text in email
- Outlook: Right-click on the image and select “Edit Alt Text…”
- MailChimp: Add alt text in the legacy email builder or new email builder
- Gmail: Unfortunately, it’s not currently possible to add alt text in Gmail. A workaround is to add alt text to the image in another tool, such as Microsoft Word or Google Docs, then copy and paste the image into Gmail.
Keep in mind...
If there is text embedded on an image (like in a banner or event poster), the text should also be present either in the email body text or in the alt text.
Designing for readability is key to writing good digital content, including emails. Some things to consider:
Emojis can be a fun and easy way to communicate, but be mindful of not overusing them, or relying on them as the only method of conveying meaning. Add emojis to the end of a message instead of in between words, and don’t use an emoji to replace words.
Emoticons, unlike emojis, are made up of punctuation and keyboard characters. They lose their meaning when read with assistive technology, so it’s best to avoid using emoticons.
Documents are often not accessible, and can be difficult to remediate. Before you attach a document to an email, ask yourself if this is the best way to communicate the information, or could it instead be simply added to the body of the email?
If it’s necessary to attach a file to an email, make sure the document is accessible. Follow accessibility best practices such as tagging your document with headings, writing helpful alternative text, and being mindful of color.
If adding an event poster to an email, make sure that any text in the image is repeated either in the email body text or in the alt text. Important information like event details (date, time, location) should be included in the body text of the email.
When adding signatures, use actual text for name and contact information to ensure greater accessibility. Adding a logo, such as the Harvard shield is perfectly fine, just be mindful to add alt text for the shield image.