email-accessibility-guidelines-standards-best-practices
02 August 2023

Email accessibility guidelines: Standards and best practices

Create accessible emails
Table of contents
  1. Why accessibility in emails is a must 
  2. What is email accessibility?
  3. Email accessibility standards for each type of impairment
  4. Universal email accessibility guidelines 
  5. Accessibility testing tools
  6. Wrapping up
1.
Why accessibility in emails is a must 

So, everybody gets it's crucial to make emails accessible to everyone. However, achieving such accessibility can often be a complex task due to a myriad of factors to consider, along with the presence of conflicting information found in various resources.

After thoroughly reviewing and analyzing an extensive array of resources, ranging in dozens if not hundreds, we've put together recommendations for email accessibility. These guidelines aim to satisfy the diverse requirements of every reader.

Why accessibility in emails is a must 

  • for social reasons — to make emails easy for everyone to read;
  • legal reasons — to meet legislation requirements;
  • business reasons — it will bring you more clicks, and more conversions, which will result in a better income;
  • humane reasons — we’re extremely lucky to be able to read, see, and tell colors. Let’s make emails a little bit better for those not this lucky.  Let’s not be heartless.

Reasons to maintain email accessibility _ Insightful stats

Just imagine that:

  • 2.2 billion people worldwide have trouble seeing even with glasses;
  • 9-12% of the world's population have dyslexia (every 10th person);
  • 300 mln people are color blind (1 in 12 men and 1 in 200 women).

What is email accessibility?

Email accessibility ensures that everyone with any impairment can “read” your message.

Types of impairments that make reading challenging or even impossible

Blindness 

Blind people use screen readers such as VoiceOver for Mac and Microsoft Narrator for Windows, etc., when opening emails. This assistive technology helps narrate the screen's content with a synthetic voice.

Visual impairment

People with visual impairments may read emails or surf the web on their own, without assistive technology, but still might experience trouble reading even with glasses on. 

Color blindness

Color blindness is also known as color vision deficiency (DVC). These people do not tell colors. Some don’t see red, some don’t see blue, and some don’t see green. Some don’t see colors at all; they just see shades of gray.

Those who don’t see red or green tend to confuse green and red, blue and purple, even dark red with black, and many other colors.

Dyslexia

Dyslexia is a disorder mainly characterized by severe difficulties in acquiring reading, spelling, and writing skills. There is no relationship between a person’s level of intelligence, individual effort of socioeconomic position, and dyslexia. They just have trouble reading and writing unless the text is optimized.

Actress Jennifer Aniston, movie director Steven Spielberg, billionaire Richard Branson, and many other famous people have dyslexia.

Photosensitive epilepsy

Photosensitive epilepsy is when seizures are triggered by flashing lights or contrasting lights. One in 100 people on Earth have epilepsy, and five of them have photosensitive epilepsy.

When creating an email, you need to consider all these impairments, as they have different requirements for email accessibility. Some are even controversial. So, we had to thoroughly investigate recommendations for each type of impairment to find a solution that would meet the needs of all types of impairments.

What can I say? I think we managed to do it. And later in this post, we will share these email accessibility guidelines. But before we do, let us share the recommendations for each impairment type so you know how exactly we’ve developed our universal email accessibility guidelines.

Email accessibility standards for each type of impairment

Email accessibility standards are a set of rules and recommendations that let us design emails that are easy to read for those with visual impairments.

1. Email accessibility requirements, specifically for blindness

These people use screen readers on their desktops and mobile devices.

Did you know that 7.7% of those who use screenreaders do not have any visual impairment, they just do it for their convenience.

Consequently, our duty is to make our email campaigns legible for screen readers.

When writing on this section of the guidelines, we consulted:

  1. W3 Schools.
  2. Accessibility.com.
  3. Microsoft.
  4. Email markup consortium.
  5. Email on Acid.
  6. Princeton University.
  7. Harvard University.

What can we do to make emails “readable” for screen readers?

  • set the language in your email code so the screen reader knows what language to read your email in. Use only one language per email. Here’s a list of language codes you can add to your email HTML code;

Stripo _ Email Accessibility _ Setting Languages for Screen Readers

  • set presentation roles to your email code role="presentation". Most HTML email templates consist of tables. If you don't add this code element, recipients will hear these assistive devices read the entire HTML code instead of logical and understandable text. You add them to each table of your emails. Please be advised that Stripo automatically adds this attribute the moment you export your email to the ESP or email client of yours;

Setting Role Presentation _ Email Accessibility Best Practices

  • encode characters. The way the email content will be displayed depends on the Content-Type. You need to add <charset="UTF-8"> in your email HTML code right after "<head>" because this is the most popular charset net and supports the vast majority of characters. Luckily, all emails built with Stripo already have this set specified in emails;

Stripo _ Email Accessibility _ Adding CharSet in Your Code

  • use heading and subheadings — <h1>, <h2>, etc. Organize your content in a meaningful way that is easy to read for both people and screen readers; 
  • add alt text to all images or GIFs. Screen readers cannot “read” the images you use in emails, but they can read “alternative text," aka alt text. AI is only learning to  “recognize” images. Make sure your alt text is clear and informative;
  • always duplicate important information from the graphics and GIFs under the images;
  • avoid emoticons, as they are made up of punctuation characters. They lose their meaning when read with assistive technology;
  • use only programmatically formatted bulleted and numbered lists;
  •  make the links’ text meaningful whenever it’s possible to let people know what they are about to click on and where they will get it. Just compare these two links:

Example of a generic and meaningful link texts

2. Email accessibility requirements, specifically for visual impairment 

As mentioned above, according to the World Health Organization (WHO), 2.2. billion people today suffer from a vision disorder. 

Forms of visual impairment:

  1. Central vision loss.
  2. Peripheral vision loss.
  3. Blurry vision.
  4. Visual disorders following brain injuries.

When writing on this section of the guidelines, we consulted:

  1. Inclusive city maker.
  2. WHO.
  3. Supplemental Guidance to WCAG 2 by W3 Schools.

What can we do to make emails legible for people with visual impairment?

  • avoid the use of Roman numerals;
  • choose legible fonts. Sans serif fonts work just fine;
  • use line spacing between words, sentences, lines, paragraphs, and blocks of copy. It reduces clutter. Please be advised that “white space” means the background color and that it does not need to be really white.

3. Email accessibility requirements, specifically for color blindness

Color blindness has the following types:

Protanopia is characterized by reduced sensitivity to the red color. These people, also named red-blind, confuse black with many shades of red, dark brown with dark green, and some shades of blue with mid-some shades of red.

Email accessibility _ Example of an email with green and red colors

(Source: Original email by Uber)

Accessibility in emails _ Example of an email that is not optimized for color-blind people

(This is how red-blind people see it. Red tomatoes, red meat, and bacon look all green, just like lettuce next to them, which makes it hard to tell what food is in the burger)

Deuteranopia is characterized by reduced sensitivity to green color. Green-weak and gree- blind people also confuse mid-reds with greens, bright greens with yellows, and light blues with lilac.

Tritanopia makes people blind to blue and its shades. This is why people who suffer from tritanopia confuse light blue with gray and dark purple with black.

Monochromacy makes people totally color blind. They only see shades of gray, varying from black to white.

This picture shows how color-blind people usually “see” colors:

Palette with colors _ The way color blind people see different colors _ Email accessibility

When writing on this section of the guidelines, we consulted:

  1. Colour blind awareness.
  2. Accessible colors.
  3. Colbldindor — color blindness simulator.
  4. Yale University
  5. The University of Pittsburgh.

What can we do to make emails accessible to color-blind people?

Please, be advised that these recommendations only make emails accessible to color-blind people. Some recommendations hurt dyslectic people. Later, we will exclude them.

  • make the link text bold or underlined. Colorblind people or those who, while reading emails on a mobile device, have the sun shining right onto the screen might not see the color difference; 
  • always specify the name of items' color in brackets — people might not see colors as good but might be aware that red flatters them;
  • check the color contrast in your email. This will help email recipients tell what’s written anywhere in your email;
  • check if the images are easy-to-perceive and understandable for all color-blind people;  
  • if you use interactive elements for running tests in emails and highlight the correct answers with, say, green and incorrect ones with red, indicate whether the answer is right or wrong with words.

Accessibility in interactive emails

(Source: Email from HubSpot. Good example)

4. Email accessibility standards, specifically for dyslexia

Given that there are several types of dyslexia, every dyslexic person is different, and what they see depends on both the type of dyslexia they suffer from and the severity of their dyslexia. 

What do dyslexic people see?

According to NeuroHealth, they:

  • see letters and numbers backward;
  • see letters and numbers upside down;
  • may not be able to distinguish between similar-looking letters such as e, c, and o;

Email accessibility _ Example of how some dyslexic readers see the letters

(Image source: Daniel Britton)

  • see letters all bunched together;
  • see letters jumbled;
  • see letters out of order.

Example of how letters mix up for dyslexic readers _ Best practices to maintain for email accessibility

When writing on this section of the guidelines, we consulted:

  1. European dyslexia association.
  2. British dyslexia association.
  3. Dyslexia Style guide by the British dyslexia association.
  4. E-learning heroes.
  5. Daniel Britton.

What can we do to make emails legible for dyslexics?

  • avoid underlining or italics — use bold for emphasis;
  • the same applies to links — never underline them. Use bold instead; 
  • line spacing should be 150%;
  • avoid using all capital letters for continuous text. Lower-case letters are easier to read;
  • use Sans Serif fonts, such as Arial, Comic Sans, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, and Open Sans;
  • add extra space around headings and between paragraphs;
  • use single-color backgrounds. Avoid background patterns or pictures;
  • the background should not be white; make it cream for dyslexic readers, as copy written on the cream background looks softer;
  • use sufficient contrast between backgrounds and text;
  • use headings;
  • write short sentences. The optimal length is 60-70 characters;
  • left align your copy, no justification.

5. Email accessibility requirements, specifically for photosensitive epilepsy

Did you know we can trigger epileptic seizures in emails by simply using GIFs incorrectly? 

What causes photosensitive seizures:

  • three or more flashes per second;
  • color flashes;
  • sunlight, especially when shimmering off water and flickering through trees;
  • stripes of contrasting colors;
  • lighting effects at live concerts or events.

When writing on this section of the guidelines, we consulted:

  1. Epilepsy Society, UK.
  2. Epilepsy Foundation, US.
  3. Visually sensitive seizures: An updated review by the Epilepsy Foundation.
  4. Accessible web.

What can we do to make emails legible for people with photosensitive epilepsy?

  • place just one animated GIF image on a screen;
  • use GIFs with 2 flashes per second.

Universal email accessibility guidelines 

Finally, we can sum it all up and come up with email accessibility guidelines that would meet the needs of all people with any visual disability or impairment.

Some of the above recommendations were contradictory, so we had to find a compromise. For example, for color-blind people, we should either underline links or make them bold, whereas for dyslectics, we can only make them bold. The compromise here is using bold for links.

So, here are our universal email accessibility guidelines:

  1. Set the email language, presentation roles, and content type for screen readers.
  2. Always! Always add alt text to all the images and GIFs.
  3. If a GIF or an image fulfills an educative mission, be sure to add a written, detailed description to it.
  4. Use heading and subheadings — <h1>, <h2>, etc. — to organize your content meaningfully and make it legible for screen readers.
  5. Avoid emoticons.
  6. Use only programmatically formatted bulleted and numbered lists.
  7. Make the link text meaningful.
  8. Choose Sans serif fonts.
  9. Set the line spacing to about 150%.
  10. Specify the names of the items colors’ in brackets.
  11. Check the color contrast of your copy and imagery.
  12. Avoid using all capital letters for continuous text; use more giant lower-case letters instead.
  13. Add punctuation at the end of bullet points and every sentence, including headings.
  14. Use single-color, off-white backgrounds.
  15. Write short sentences.
  16. Left align your copy, with no justification.
  17. Avoid underlining or italics — use bold for emphasis.
  18. Place just one animated GIF image on a screen.
  19. Use GIFs with two flashes per second.

Accessibility testing tools

When you finish your email campaigns, check them with accessibility testing tools and/or try them with screen readers.

Here are the tools that will help you check your emails:

  • accessible-email.org by Jordie van Rijn and Maarten Lierop — this tool checks whether your email code is compatible with any screen reader. They can even  help you optimize it;
  • Campaign precheck accessibility check by Email on Acid — it checks if your email is optimized for assistive devices;
  • accessible colors to check the color contrast of the email body (copy and other elements, excluding imagery);
  • Coblis, color blindness simulator — it checks whether your images are accessible for color-blind people;
  • Trace RERC to check your GIFs for flashing;
  • Stripo (coming soon) — in the near future, we will check the accessibility of your code, color contrast, presence of alt text for imagery, etc.

Wrapping up

With email, businesses reach large audiences. And it is our duty to ensure that customers with a visual deficiency do not feel disadvantaged.

In this article, we’ve surveyed the five types of impairments that make reading challenging, sometimes even impossible. Following the guidelines above, you will avoid accessibility issues and build fully accessible emails so that every subscriber of yours can easily read your message. 

Create accessible emails with Stripo
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
5 comments
Dennis Brown 1 year ago
Really helpful advice, thank you. However, as a 'red-blind' person, I obviously can't see the difference between the two 'Uber' email screenshots, so I'm still none the wiser as to how it was meant to appear; it would be great (and help your post's accessibility :) if you could add an image of how it was intended to display, or at least point out the difference. Thank you :)
Hanna Kuznietsova 1 year ago
Dennis Brown, Hello. Oh wow. I sincerely beg your pardon. I was focused on how to show the people who see all colors the difference between how we perceive colors and the importance of making emails accessible, and it never occurred to me that we also need to explain this difference. But we sure do. This only proves that we need to make our sites and emails more accessible. As for the image... I am sorry, I don't really know how exactly we can show it so that "red-blind" people notice the difference (I'll search, I promise). But for now, we've added some description under the second email: meat, bacon, and tomatoes are red in the first Uber screenshot. But in the second screenshot (in my opinion, and I may be wrong, please correct me if I am), it's hard to tell what food is in the burger because everything looks green. Once again, I am terribly sorry for this huge mistake of mine. Thank you very much for bringing our attention to it.
Dennis Brown 1 year ago
Thank you, Hanna :) And the addition of the description does help, perfectly - thank you. As for how I see it, good question! The main thing for me is just how identical the two images look, though it's difficult to describe what colours I 'see' the items as; if pushed, I'd say they just look bland; I definitely (and unsurprisingly, I guess) don't see anything in them that I'd describe as red. Incidentally, your post did serve a further purpose, highlighting to my family the difference in how I see colours - with all of them appreciating (possibly for the first time) how different our colour-vision can be. Thanks for such a helpful post ?
Courtney Cannon 1 year ago
Hello! What email accessibility tester tools are you using to ensure the emails are accessible before emailing them out?
Hanna Kuznietsova 1 year ago
Hello, Courtney. Thank you for your question. We are sorry for not getting back to you sooner. Currently, we use Email on Acid precheck. It helps us check line spacing for the copy when it's zoomed in and some other things. We also use Coblis, Color Blindness Simulator, to check the color contrast ratio and stick to the best practices shared in this post. If you know any other tools, please share them with us - we'll be happy to try them. Thank you. And eventually, we're going to add the "Email accessibility pre-check" to Stripo; it will highlight all the issues and will give hints on how to fix them.
Type
Industry
Seasons
Integrations
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.

Stripo editor

For email marketing teams and solo email creators.

Stripo plugin

For products that could benefit from an integrated white-label email builder.