The Accessible.org email accessibility guide provides recommendations for creating accessible emails. Many recommendations are taken from WCAG success criteria so you will follow best practices for ADA compliance.
Table of Contents
Avoid Instructions That Rely Solely on One Sense
Do not use instructions that depend only on one sense, like “click the round button.” It’s okay to use sensory instructions, but be sure to provide an additional text description to make instructions clear for everyone.
Example: Instead of “Click the round button to submit,” use “Click the round ‘Submit’ button.”
Reference: WCAG 1.3.3 (Sensory Characteristics)
Avoid Long URLs
Avoid using long URLs in the body of your email. Instead, use descriptive link text that explains the purpose of the link or exactly where the link goes. This makes the email cleaner and more readable for all users.
Example: Instead of writing “Look at this umbrella on Amazon: http://www.amazon.com/super-umbrella-with-stripes-138411293-product-display,” use “look at this umbrella on Amazon” and link under “umbrella on Amazon.”
Reference: Best Practice
Avoid Flashing or Blinking Content
Avoid using flashing or blinking content in your emails. Flashing content can cause seizures in individuals with photosensitive epilepsy and can be distracting for other users. If you must use animations, ensure they do not flash more than three times per second and provide a way to pause or stop the animation.
Example: Avoid any gifs or videos that contain blinking or flashing content.
WCAG 2.3.1 (Three Flashes or Below Threshold)
Color
Use color combinations that are easy to read for people with low vision or color blindness. Avoid background images or patterns that make text hard to read. Do not use color alone to convey important information. Ensure color contrast is sufficient to meet accessibility standards.
Example: Instead of using red text alone to indicate an error, use red text and an error icon or message, such as “Error: Please enter a valid email address.”
WCAG 1.4.1 (Use of Color)
Emojis and Emoticons
Use emojis sparingly and not as replacements for words. Avoid using text emoticons. Use plain language or emojis instead to keep the message clear for all users, including those with screen readers.
Example: Instead of “Great job! :)”, use “Great job! 😊”
Reference: Best Practice
Ensure Sufficient Color Contrast
Ensure text has enough contrast with the background: 4.5:1 for normal text and 3:1 for large text. This makes text readable for people with visual impairments.
Example: Use dark text on a light background or light text on a dark background to ensure readability.
WCAG 1.4.3 (Contrast – Minimum)
Format
Use HTML format to keep the email content accessible. Simple layouts work best.
Example: Instead of using a complex multi-column layout, use a single-column layout with clear headings and sections.
WCAG 1.3.1 (Info and Relationships)
Headings
Use headings to organize and structure longer emails or those with several sections.
Example: Use <h1> for main headings and <h2> for subheadings.
WCAG 2.4.6 (Headings and Labels)
Logical Reading Order
Make sure the email content follows a logical order. This helps screen readers navigate the email easily and ensures all users can follow the content.
Example: Structure the email so that the content flows in a logical, intuitive manner.
WCAG 1.3.2 (Meaningful Sequence)
Marking Any Links to PDFs
Label links to PDF files as PDFs. This informs users what to expect when clicking on the link.
Example: Instead of “Download the file,” use “Download the PDF file” or “Download File (PDF)”.
Reference: Best Practice
Message Subject
Write a brief subject line that clearly describes the email’s content or purpose. This helps recipients quickly understand the email.
Example: Instead of “Important Information You Need to Know,” use “Update on Your Phone Service Status.”
Reference: Best Practice
Don’t Rely on Color to Relay Information
Do not use color alone to convey important information. Use text or icons in addition to color to make the message clear to everyone.
Example: Instead of using red text to indicate a sale price, write out Sale Price (and you can keep the red text).
WCAG 1.4.1 (Use of Color)
Don’t Rely on Visual Cues
Avoid using only visual cues like italics to relay information, as they may not be perceivable to all users. Use other methods like headings.
Example: Instead of increasing the font size and bolding a word to indicate a subheading, use an H2.
Reference: Best Practice
Don’t Underline Non-links
Do not underline text that is not a link to avoid confusing users. Underline only hyperlinks to make them easy to identify.
Example: Only use underlines to indicate the presence of a link.
Reference: Best Practice
Don’t Use All Caps
Avoid using all caps because screen readers might read all caps as individual letters. Use regular or title case for better readability.
Example: Instead of writing FINALLY, write finally.
Reference: Best Practice
Tables
Avoid using tables in emails if possible, as they can be hard for screen readers to understand. If you must use a table, provide an accessible alternative or a clear explanation of the table’s contents.
Example: Instead of presenting data in a table, use bullet points or a simple list.
Reference: Best Practice
Text and Fonts
Use a simple, readable font for emails. Avoid complicated or difficult to read fonts and keep text size at 12 points or larger. Align text to the left.
Example: Instead of using a decorative font, use a standard font like Arial or Times New Roman.
Reference: Best Practice
Use Alternative Text for Meaningful Images
Always provide alternative text (alt text) for images that convey important information. Alt text ensures that users who cannot see the images, such as those using screen readers, can still understand the content. The alt text should be descriptive and concise, accurately reflecting the purpose of the image.
Where possible, mark non-meaningful images as decorative by leaving the alt attribute empty. If this is not possible in your email client, use a short file name.
Example: For any meaningful image, provide an alternative text value.
WCAG 1.1.1 (Non-text Content)
Use Descriptive Anchor Link Text
Write descriptive text for links that clearly indicate where the link goes to. This helps all users, especially those using screen readers, understand the link’s purpose.
Example: Instead of “Click here,” link to a descriptive subject so the link purpose is known. For example, link to the last part of this sentence: “Read more about website accessibility best practices.”
Reference: Best Practice
Whitespace and Layout
Use paragraph spacing and layout tools to create a clean presentation. Avoid using tabs, multiple spaces, or carriage returns to create whitespace.
Example: Use appropriate line spacing and margins to separate sections of text.
Reference: Best Practice
Summary
We’ve covered several email accessibility best practices. Some are more crucial than others, but each one can not only improve accessibility, but also usability. Even if you only implement a select few, it will improve your email accessibility.
