#  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](/content-creators) 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](#design)
- [Adding alt text to images](#alt)
- [Composing an email](#compose)
- [Guides and resources](#guides)

---



 

##  Designing an email 

   ![Illustration of person looking at emails on a mobile device.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__360x360_scale/public/online-accessibility-huit/files/undraw_messages_re_qy9x-adjust.png?itok=f5Miu7od) 

 

### Choose an accessible design template 

If you're creating an email using a third-party platform such as [MailChimp](https://mailchimp.com/features/email-templates/) or [Constant Contact](https://www.constantcontact.com/features/email-templates), 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](https://accessibility.huit.harvard.edu/use-sufficient-color-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](https://www.tpgi.com/color-contrast-checker/).



 

 ### Color for Meaning

Color is a great communication tool, but should be used mindfully. Avoid using [color alone to convey meaning](https://accessibility.huit.harvard.edu/avoid-reliance-color), as your message may be missed or misunderstood by people who can't see color. Instead use color along with a [secondary element](https://accessibility.huit.harvard.edu/technique-colored-pictograms) (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.](/sites/g/files/omnuum12446/files/online-accessibility-huit/files/email_2_jpg_-_salon_images_both_displayed_and_not_displayed.jpg)

 

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.](/describe-content-images)

### 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](https://mailchimp.com/help/add-alt-text-to-images/) or [new email builder](https://mailchimp.com/help/design-an-email-new-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.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__100x100_scale/public/2024-06/poster-image-text.png?itok=HumGibYl) 

 

**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.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/online-accessibility-huit/files/content_creation_pencil_m.png?itok=zwJKZBEN) 

 

### Body text

[Designing for readability](/design-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](/use-plain-language)
- [Write descriptive link text](/technique-writing-link-text)



 

 emoji\_emotions 

 [### Emojis

 ](https://uxdesign.cc/emojis-in-accessibility-how-to-use-them-properly-66b73986b803)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.



 

 

 article 

 [### Attachments 

 ](/accessible-documents)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.



 

 

 play\_circle\_filled 

 [### Video and Audio

 ](/media-accessibility-resources)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.



 

 

 image 

 [### Event Posters

 ](/describe-content-images)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.



 

 

 bolt 

 [### Animation

 ](/design-comprehension)Avoid auto-playing animations and videos and distracting animations.



 

 

 shield 

 [### Signatures 

 ](/describe-content-images)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.

 

 



 ### Microsoft Outlook

How to make your emails accessible and unlock your content to everyone.

[Make your Outlook email accessible to people with disabilities](https://support.microsoft.com/en-us/office/make-your-outlook-email-accessible-to-people-with-disabilities-71ce71f4-7b15-4b7a-a2e3-cf91721bbacb)



 

   ![](/sites/g/files/omnuum12446/files/styles/hwp_16_9__480x270/public/2024-06/outlook-logo-960x540.jpg?itok=Z2a7Ca5e) 

 

 

 

 ### MailChimp

Learn best practices for making your campaigns accessible and usable for all your subscribers.

[Accessibility in Email Marketing](https://mailchimp.com/help/accessibility-in-email-marketing/)



 

   ![](/sites/g/files/omnuum12446/files/styles/hwp_16_9__480x270/public/2024-06/mailchimp-logo-960x540.png?h=c8c954f7&itok=CEzUb8Ux) 

 

 

 

 ### Constant Contact

Create campaigns in a way that makes them accessible for all your recipients.

[Creating accessible emails](https://knowledgebase.constantcontact.com/articles/KnowledgeBase/36885-Creating-accessible-emails?lang=en_US)



 

   ![](/sites/g/files/omnuum12446/files/styles/hwp_16_9__480x270/public/2024-11/constant-contact-logo-white-960x540.png?itok=vVbbxlc5) 

 

 

 

 ### Litmus

It only takes a few small steps to make your emails more accessible for all of your subscribers.

[The Ultimate Guide to Accessible Emails](https://www.litmus.com/blog/ultimate-guide-accessible-emails/)



 

   ![](/sites/g/files/omnuum12446/files/styles/hwp_16_9__480x270/public/2024-11/litmus-logo-white-960x540.png?itok=yKqVyXSy)