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. By using accessibility principles for design and clear language these guidelines and recommendations will benefit everyone. Use the considerations below to ensure your emails are designed with accessibility in mind and can be read by everyone.
Images
Images are often a key aspect to emails, capturing the readers attention and making for a more visually appealing experience. However, the meaning of the images you use might not be apparent to all users.
Use text instead of images of text
It is recommended to use real text as much as possible because real text is adaptable. The user can customize text for better readability by: adjusting the line, word, and character spacing; changing the font face; changing the text colors; increasing the text size; and translating it to other languages. True text can also be copied and pasted, and it adapts to various screen sizes. When text is baked in an image, it loses that adaptability.
When images of text are used instead of text, users cannot change the visual presentation of the text. For example, the text can become blurred or distorted when magnifying it and the color, font, and size of the text cannot be changed. Authors should convert images of text to text that is styled.
Exceptions include images of text that are considered:
-
Essential: A particular text presentation is essential to the information being conveyed, such as logotypes.
-
Customizable: The image of text can be visually customized to the user's requirements.
Examples of these exceptions include (but are not limited to):
-
Diagrams, graphs, and screenshots that visually convey more than text.
-
Text in images like logos that are considered essential.
-
Images of text that have controls to customize font, size, and spacing.
It is also important to note that alternative text, which provides a text alternative of an image for those who are unable to see or interpret it on their own, is read as a block when navigating with assistive technology such as a screen reader. Standard text allows users to read content in smaller sections and at their own pace, whereas alternative text is limited in length and in how users can read it. Emails that are large images conveying a lot of information would not provide an efficient user experience for users navigating with a screen reader.
As mentioned, alternative text is a text description of the content contained within any images and other non-text content. This text description serves as an alternative to the visual experience; hence it is called alternative text or alt text. Alt text provides context by conveying the information in the image to users. Images that display information must always include alternative text that conveys this meaning. The alternative text should be short and concise but provide context for users. To learn more about how to write effective alternative text, check out the alternative text page.
- Images that do not convey meaning can be marked as decorative. Different platforms sometimes have an option to "mark as decorative" or if there is an alt text field the double quotations "" can be used which will tell a screen reader to skip the content.
Alt Text in Email
Alt text should be concise and descriptive, but shouldn’t duplicate the text in the body of the email. How to add alt text in email:
- Outlook: Right-click on the image and select “Edit Alt Text…”
- Gmail: After adding an image, your image options will be displayed directly below the image. Select "Edit alt text" to add.
- Hubspot: Edit the image element which opens the content/styles boxes, the alt text field is below the image.
Color
Use color combinations that are easily readable to low vision users and users who have difficulty differentiating color. 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.
- Avoid using background effects that contain images or patterns that lower the text-to-background contrast.
- Do not use color alone to convey information or instructions.
- If you use a custom theme in Outlook, Gmail or Hubspot ensure the theme’s font size and color contrast are accessible.
Learn more about using color in accessible designs.
Hyperlinks
Ensure the visible link text describes the purpose and/or destination of the link.
- When adding or editing a hyperlink, paste the URL (web page address) into the Address field, and include concise, descriptive text in the Text to Display field.
- A link’s purpose and/or destination should be easily understandable based on the link text.
- Avoid using ambiguous link text such as “click here” or “read more”.
- Avoid using a full web address as link text.
Other additions
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, Audio, Animations
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.
Avoid auto-playing animations and videos and distracting animations.
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.