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.
Designing an email
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.
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.
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.
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.
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.