Creating Accessible Emails

Email is a vital communication tool, so it’s important to avoid accessibility barriers that might prevent someone from viewing or understanding the message. When an email is accessible it employs design best practices that increase the likelihood your message will be read.

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. 

In this page: 

Designing an email

Illustration of person looking at emails on a mobile device.

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

Color Contrast

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.

Adding Alt Text for Images

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. 

An email displayed with an image embedded on the left, and the same email without the image displaying.

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: After adding an image, your image options will be displayed directly below the image. Select "Edit alt text" to add.
Icon of a poster with image and text.

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.

Composing an Email

Pencil drafting text and images.

Body text

Designing for readability is key to writing good digital content, including emails. Some things to consider:

  • Use a legible sans-serif font, such as Arial, Calibri, Helvetica, Tahoma, or similar
  • Keep text at a reasonable size, typically at least 11 or 12pt. 
  • Align text to to the left instead of centered or justified
  • Break up text into short paragraphs
  • Use plain language 
  • Write descriptive link text

 

Emojis

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. 

Attachments

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. 

Video and Audio

When you embed a video or audio player in an email, add accurate captions to all videos and transcripts for audio content. Ensure media player controls, such as play and stop, can be activated with a keyboard.

Event Posters

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. 

Animation

Avoid auto-playing animations and videos and distracting animations.

Signatures

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. 

Guides and Resources

Browse these articles on accessibility from widely used email platforms.