Creating Accessible Emails
When organizations review the digital accessibility of their products and/or services, HTML emails can be overlooked. Although most email systems allow users to view HTML and text-only versions of messages, making most messages fairly accessible, the text-only version may not contain all of the information that is in the original message. So how do we solve this issue? Below are a few suggestions:
- Avoid using images of text whenever possible: Companies sometimes create giant images full of information in their email messages. Describing all the information in a single alt attribute (more on alt attributes below) can be time-consuming and may not be helpful to screen reader users, as the attribute may be pretty lengthy. We recommend writing email text as plain text as much as possible, and only using images for pictures, logos, and other visual-only content.
- If images of text are included, add alt attributes: As stated above, emails may have images with embedded text, a problem for users with visual impairments. Linked images also need alt attributes to describe where the link goes. For example, emails will often have linked social media logos. In these instances, the alt attributes should be
alt=”Facebook", or whatever social media network you’re linking to. Check out our blog post on alt attributes for more information.
- Add an ARIA role of “presentation” to layout tables: HTML tables sometimes are used for layout purposes. Screen reading software expects all tables to contain tabular data, so email creators must add an ARIA role of “presentation” to tell screen reading software that it shouldn’t be read as a traditional table.
- Ensure proper heading structure: Is the text styled like a heading marked up as a heading? Is text marked up as a heading but should not be a heading?
- Use appropriate color contrast: Make sure that all color pairings meet a contrast ratio of at least 4.5:1.
- Avoid flashing or blinking content: This can include GIFs or animations.
Many email templating editors will not allow the author to natively mark up the email components in an accessible format using the interface itself. However, many tools allow you to edit the HTML directly. What we typically do here at A360 is get the content and images created using the editor. Once that is approved, we then go ahead and update the HTML where needed and have our auditors test the output before sending.
For more information on making sure your email messages, or any other digital properties, are accessible, our expert auditing team is here to help! Just fill out the contact form on this page to get started.
Similar Articles from the A360 Experts:
- Accessible Color Contrast FAQs
- Closed Captioning Vs. Audio Descriptions
- Slack Hints For Screen Readers