If your email is not accessible, your email is broken.
Email accessibility continues to be a crucial concern. Although the topic of email accessibility became familiar over a decade ago, an astounding 99.97% of emails still face critical accessibility issues.
Our article “Why accessibility is important” discusses various disabilities and their effect on user experiences. We also highlight starting points for ensuring full email accessibility. In this article, we share guidelines for optimizing your emails for accessibility.
Key takeaways
- Although accessibility has been a recognized necessity for over a decade, a staggering 99.97% of HTML emails still have significant accessibility problems, underscoring a massive gap in email design practices.
- Accessibility accommodations in emails are not a nicety but a necessity, with around half the world’s population potentially benefiting from more accessible email designs due to a variety of disabilities, including visual impairments, hearing loss, motor disabilities, and cognitive disorders.
- Effective email accessibility goes beyond simple technical fixes and requires a comprehensive, five-step strategy: design (ensuring visual accessibility); copy; working with alt texts; technology; and strategic linking. Only this holistic approach ensures thorough accessibility across all aspects of email communication.
Accessibility stats (number of people worldwide who would benefit from email accessibility)
Our previous article presents detailed statistics on the prevalence of various impairments and the current state of digital accessibility. Here’s a quick overview:
- 2.5 billion people have visual impairments, including 2.2 billion with vision problems and 300 million who are color-blind;
- 430 million people have disabling hearing loss (deafness), and 1.5 billion people have hearing loss;
- 968 million have motor disabilities;
- 1.6 billion have cognitive and learning disabilities, including 960 million with dyslexia and 400 million with photosensitive epilepsy.
This chart illustrates that roughly half the global population could benefit from accessible emails, yet 99.97% of HTML emails currently have significant accessibility issues.
List of email accessibility best practices
Email accessibility standards comprise a set of rules and recommendations for designing emails that people with all disability types can easily read:
- Make the alt text for images and GIFs meaningful.
- If a GIF or image serves an informative purpose, be sure to add a detailed written description.
- Use headings and subheadings (instead of only using larger fonts) to organize your content meaningfully and make it legible to screen readers.
- Use only program-formatted headings and bulleted and numbered lists.
- Make the link text meaningful.
- Opt for accessible fonts, such as OpenDyslexic, Comic Sans, and sans serif options, including Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, and Open Sans.
- Set the line spacing to about 150%.
- Specify the names of the items’ colors in brackets.
- Check the color contrast of your copy and imagery.
- Avoid using all capital letters for continuous text; use larger lowercase letters instead.
- Add punctuation at the end of bullet points and every sentence, including headings.
- Use single-color, off-white backgrounds.
- Left align your copy, with no line breaks and no justification.
- Avoid excessive bolding or italics; use bold for emphasis.
- Use underlining only for links.
- Place no more than one animated GIF image on a screen.
- Use GIFs with fewer than three flashes per second.
- Set the email language, presentation roles, and dir attribute for screen readers.
This summarizes all the accessibility standards for email. Below, we describe how we developed these specific rules.
Steps to creating accessible emails
Our previous article explores five types of disabilities and their unique impacts on user experience. Recognizing that each disability requires specific accommodations is crucial. For instance, focusing solely on solutions for color-blindness may not address the needs of individuals with dyslexia or those using screen readers. Building truly accessible emails demands a holistic approach that encompasses design, code, and copy. This comprehensive method ensures we address the full spectrum of accessibility needs, greatly enhancing the user experience.
Here’s how to do it:
Step 1. Writing accessible email copy
Disabilities it addresses: Visual as well as cognitive, learning, and neurological disabilities.
To write accessible text, remember to:
- keep it short — write concise copy so recipients can quickly grasp your point without needing to read lengthy texts;
- keep it simple — use straightforward language that an 8th grader could easily understand, avoiding complex jargon and academic terms;
- set the line spacing to about 150%;
- use subheadings — break your content into sections with clear subheadings to make your emails easier to scan;
- format headings rather than simply using larger fonts.
Step 2. Optimizing alt texts
Since people with visual impairments cannot see your images, clear and descriptive alternative text is essential for effective communication.
Disabilities it addresses: Alt text benefits all recipients, not just those with visual disabilities. It helps those with images blocked due to slow internet, security settings, or personal preferences and supports screen reader users, including people with visual impairments, dyslexia, and other reading or learning disabilities.
Expert
First, although they are often used interchangeably, the terms alt attribute and alt text have distinct meanings:
- the alt attribute is the HTML attribute used within the image element;
- alt text is the content placed inside the alt attribute.
When there is no alt attribute, remember to:
- people using screen readers will hear the entire URL for the hosted image or the filename (if the image is unlinked) or will hear the image URL (if the image is linked);
- no recipient will be aware of the content of an image if the image is blocked.
(Source: Webinar with Sarah Gallardo)
Every image in an email must have an alt attribute.
To follow best practices for alternative texts:
Expert
- consider both the content and context of the image;
- make sure your alt text conveys what the image depicts;
- remember that screen readers typically stop reading alt text after 100–120 characters;
- avoid phrases such as “this image is about,” as screen readers already indicate an image’s presence;
- use sentence or title case, avoiding all caps;
- aim for descriptive yet concise alt text;
- ensure good contrast between the alt text and the background for visual clarity.
Step 3. Making links accessible
Disabilities it addresses: Supports users of screen readers and those with motor impairments.
Expert
To follow best practices in making links accessible:
- stick to an intentional linking strategy, adding links only to essential images and not linking decorative ones;
- use descriptive text to clearly indicate where the link leads, avoiding generic phrases such as “Learn more” or “Click here”;
- make sure the alt text for linked images describes the destination of the link;
- ensure links stand out by using formatting methods such as underlining or bolding rather than relying solely on color;
- whenever possible, encase links in call-to-action buttons to assist those with poor vision or motor disabilities in clicking them.
Step 4. Optimizing email design for accessibility
Due to its complexity, this step is divided into several groups.
Group 1. Text formatting accessibility guidelines
Disabilities it addresses: Optimizing design helps individuals with poor vision, those who use screen readers, and people with dyslexia.
- avoid using all caps, as they can be misinterpreted by people with dyslexia, and screen readers may read them as abbreviations;
- include punctuation marks at the end of bullets and headings;
- minimize the use of italics and bold for emphasis; avoid bold italics entirely;
- underline text only if it is a hyperlink;
- opt for a body text size of 16 px for readability;
- use accessible fonts, such as OpenDyslexic, Comic Sans, and sans serif options (including Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, and Open Sans);
- align your copy to the left without justifying or adding line breaks.
Although Success Criterion 1.4.8 (AAA conformance) allows it, best practice recommends avoiding justified text for the reasons mentioned. Align text to one side only.
Group 2. Working with colors
Disabilities it addresses: People with color-blindness, poor vision, and dyslexia.
Expert
- ensure sufficient color contrast between text and images;
- use single-color backgrounds; for texts smaller than 18 px bold or 24 px normal, the contrast between fonts and background should be 4:5:1, whereas it should be 3:1 for texts larger than those;
- choose dark gray fonts on off-white backgrounds instead of stark black on bright white;
- avoid using color alone to highlight important information in emails;
- when using images to indicate right or wrong answers (with red and green, respectively) or trends in numbers, complement the images with text descriptions or “+” and “−” signs for clarity.
(Source: Email from HubSpot)
Group 3. Working with imagery
Disabilities it addresses: People with color-blindness, poor vision, dyslexia, and photosensitive epilepsy.
When working with GIFs and images, remember to:
- use GIFs with three or fewer flashes per second;
- use one animated image (GIF) per screen;
- maintain color contrast as described previously;
- include meaningful alt text for images. For GIFs that convey instructions or significant information, provide additional descriptions below the GIF.
Step 5. Meeting an email code’s accessibility requirements
Disabilities it addresses: Supports those who use screen readers and other types of assistive technology.
For detailed insights on email accessibility and assistive technology, refer to our webinar featuring Sarah Gallardo and Dmytro Kudrenko.
To meet accessibility requirements, it is critical to:
- set the lang attribute in both the <html> element and the direct children of the <body> element; this redundancy is necessary because some email clients may remove it from the <html> element;
- wrap content within the <body> with a dir attribute for directionality;
- assign role=“presentation” or role=“none” to <table> elements to the role attribute.
If you are using Stripo, you don’t need to worry about ensuring that HTML emails are optimized for screen readers, as all emails built with Stripo are already fully optimized.
Tools for testing whether your emails comply with all email accessibility best practices
When you finish your email campaigns, check them with accessibility testing tools and/or try them with screen readers.
You have to eat your own dog food. Meaning you need to test, always test the outcome.
These tools will help you check your emails:
- accessible-email.org, by Jordie van Rijn and Maarten Lierop, checks whether your email code is compatible with any screen reader; it can even help you optimize it;
- Accessibility Checker, by Parcel, helps you assess your email for accessibility best practices and issues; it categorizes the identified issues by severity (critical, serious, moderate, and mild), making it easier to prioritize fixes;
- Campaign Precheck, by Email on Acid, checks whether your email is optimized for assistive devices;
- Accessible Colors checks the color contrast of the email body (copy and other elements, excluding imagery);
- WebAIM (web accessibility in mind) is a color contrast checker that considers not only colors but also the font sizes for each case;
- Coblis, a color-blindness simulator, shows whether your images are accessible to color-blind people;
- Trace RERC (PEAT) verifies that your GIFs comply with the recommended limits on flashing frequency.
Experts and resources to learn more about digital and email accessibility
This article has shared essential practices for accessibility in emails. Use the following list of key resources and experts to gain more insights on the topic.
- Sarah Gallardo, lead email developer at Oracle, is a noted specialist in email accessibility who offers extensive accessibility guidelines and standards. Her expertise helps organizations align with best accessibility practices through in-depth educational materials.
- Mike Paciello, chief accessibility officer at AudioEye, actively educates brands on the importance of accessibility through the latest statistics and insights. His work is crucial in motivating companies to implement and prioritize accessibility.
- Thomas Logan provides expert accessibility consulting, helping organizations ensure that their digital content is accessible to all. His services include training, strategic advice, and comprehensive audits that adhere to strict accessibility standards.
- Mark Robbins, an advocate for email accessibility, shares his deep expertise by providing actionable tips and innovative solutions for email marketers. His focus on making email communications accessible benefits senders and recipients alike.
- Paul Airy, a specialist in email design and development, applies behavioral science to enhance email usability and accessibility. His approach not only improves user experience but also ensures that emails are comprehensible and navigable for all.
- WCAG established the international standards for accessibility, providing a framework that details how digital content can be made accessible to people with disabilities. These accessibility rules and guidelines are essential for developers and content creators worldwide.
- Email markup consortium by Parcel, led by accessibility experts including Mark Robbins, provides essential materials for enhancing email accessibility. It features a quarterly report, a detailed glossary, and a list of common mistakes with solutions, all aimed at raising industry standards.
- A11y.email, a blog run by Sarah Gallardo, offers in-depth materials on email accessibility, covering topics such as effective alt text, meaningful links, semantic HTML, and color contrast. It also provides tools and techniques for testing accessibility in emails, making it ideal for email developers and marketers.
- AudioEye, run by Mike Paciello, offers a wealth of information on digital accessibility. It features articles on best practices, compliance guidelines, and the latest accessibility trends, helping brands ensure that their digital content is inclusive and accessible to all users.
- The Equal Entry blog, led by Thomas Logan, provides detailed articles on digital accessibility. It covers best practices and innovative topics, such as GenAI in email accessibility, the web, and video games, aiming to make digital content inclusive for all.
- The British Dyslexia Association raises awareness and supports individuals with dyslexia, providing resources, information, and guidelines for creating accessible and dyslexia-friendly digital content.
- Yale University offers articles and resources on web accessibility, including best practices for creating accessible links and other digital content.
Wrapping up
Creating accessible emails is an essential part of inclusive communication strategies that benefit not only people with disabilities but also all other email recipients. The broad prevalence of accessibility problems in current email designs highlights the urgent need for awareness and implementation of best practices. By adopting the comprehensive guidelines outlined in this article, marketers and developers can significantly improve the user experience for a diverse audience, ensuring that emails are not only readable but also truly accessible to all. This approach both enhances engagement and demonstrates a commitment to inclusivity in digital communications.
0 comments