timer ~ 16 min read
31401 views
rate it
12 September

Email Accessibility Guidelines: Standards & Best Practices

Stripo / Blog / Email Accessibility Guidelines: Standards & Best Practices

Email marketing helps businesses reach large audiences, convert them into customers, and provide high-quality services. And in this entire audience, there will definitely be people with various kinds of disabilities (vision impairment, hearing disability, and so on). The main task of any business is to ensure that such customers do not feel disadvantaged and accessible emails are one of the ways to achieve this goal.

Accessibility in emails is a must for three reasons:

  • to meet legislation requirements;

  • it will bring you more clicks, more conversions, and, as a result, better income;

  • don’t be heartless.

Why care about email accessibility _ Stripo _ Stats

Just imagine that 2.2 billion people worldwide have trouble seeing even with glasses or various visual disabilities. 20% (1.5 billion people) of the world’s population live with hearing loss or various hearing impairments. Besides that, about 9-12% of the world's population have dyslexia.

What is email accessibility, and how to make emails accessible?

Did you know that people who suffer from blindness and vision impairment use screen readers (VoiceOver for Mac, Microsoft Narrator for Windows, etc.) when opening emails? This assistive technology helps narrate the screen's content with a synthetic voice.

And some of those who are color blind do not distinguish between red and green colors (protanopia), while others cannot detect colors at all — they see only shades of gray varying from black to white (monochromacy).

How can you create accessible emails to help all these people see your email message without difficulties? We’re gonna share email accessibility standards and show you some tips and tricks to help easily code emails like that.

Email accessibility standards

Email accessibility standards are a set of rules and recommendations to let us make the emails we send out easy to read for those who have visual or hearing impairments.

1. Email accessibility requirements for color blindness

Color blindness has a few types:

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

Example of how text and background colors contrast

(original email by Uber)

Example of how red-blind people see colorful emails

(this is how red-blind people see it)

Deuteranopia is characterized by reduced sensitivity to green color. Green-weak/green blind people also tend to 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.

Example of colorful email campaigns

(original email from Premiere League)

Example of how monochromats see colorful emails

(the way monochromats see it)

Links in emails

If you add a link to some words in the text, making it blue is not enough. 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. Make this text bold. Avoid underlining the link text not to confuse dyslexic readers.

Example of an accessible link text in email

(Source: Email from Epilepsy Foundation)

The blog post title is written in bold. Due to this simple trick, all recipients know they must click on the blog post name or the CTA button, which is also bold.

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

  • make the link text bold;

  • avoid using green and red colors as the contrast ones. For example, don’t apply the green to a text written over a red background and vice versa;

  • check color contrast in your email. It’s one of the main contrast rules, which we’ll discuss a bit later;

  • always specify the name of items' color in brackets — people might not see colors good but might be aware that red flatters them;

  • if you use interactive elements for running tests in emails and highlight the correct answers with, say, green and incorrect ones with red, be sure to indicate whether the answer is right or wrong with words.

(Source: Email from HubSpot. Good example)

How do you know what colors people tend to confuse?

There are nearly 300 million people in the world with color vision deficiency. 1 in 12 men is color blind (8%), while 1 in 200 women is color blind (0.5%).

This picture shows what colors color blind people normally confuse:

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

This is why checking whether all color blind people can read your emails is critical. By using this free tool, you will see your images the way some recipients will do. Please, always do it — care for your customers and subscribers.

Color contrast ratio

Another way to create accessible content for colorblind people is to use appropriate color contrast in all design elements. Color blind people can still perceive contrast and differences in hue, saturation, and brightness. So you can use this to your advantage when creating email campaigns.

Color Contrast Ratio for Email Accessibility

(Source: University of Pittsburgh)

You can check it with this tool. They even give you some recommendations about the colors you should change to get the perfect color ratio.

2. Email accessibility requirements for blindness

The situation with emails for blind people is totally different. No contrast colors may help here. These people use screen readers on their desktop and mobile devices.

Consequently, our duty is to make our email campaigns legible for these assets.

Work on subject lines

Like a regular recipient, a screen reader also starts reading emails from a subject line.

This is an established truth that subject lines should be concise and descriptive. In other words, a proper subject line mirrors the general idea of the email.

How do you set it with Stripo:

  • click on the Export button above the template;
  • enter your subject line and preheader in the respective fields.

For your convenience, Stripo even shows how long the subject line is and calculates how many characters you already used.

Set the language

I decided to listen to some messages from my Inbox with screen readers. It was awful. This tool did not detect languages and read everything in a horrible mix. I heard that setting the language attribute in the code might help. By setting the language attribute to email, we are telling screen readers how they should pronounce or display your email content. Otherwise, it will simply read the email in the default language. And according to instructions given online, right in the email template HTML code, I set Eng for the entire email.

It looked this way:

Stripo _ Email Accessibility _ Setting Languages for Screen Readers

You know what, it worked!

This trick can be done not only in English but in many other languages. You just need access to a list of language codes you can add to your email HTML code.

Set presentation roles

All HTML email templates consist of tables that are "under the hood" of the email. If you don't add proper screen reader settings, users will hear these assistive devices read the entire HTML code instead of a logical and understandable text. This is why you must add the role="presentation" attribute to every table in your email. As a result, you should get something like this:

Presentation Role Email Accessibility

Important to note:

Stripo adds this attribute automatically.

Initially, it is not visible in the code editor when you create an email, but it is there. 

It is enough just to export the email as HTML code with the Support Accessibility option enabled. After opening the file, you will see that all presentation attributes are in place.

Presentation Role in Stripo

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>" as 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

Stick to the logical order

Screen readers consume email content in strict and logical reading order. It reads containers/blocks from left to right within one container; only then does it go to the second row, etc.

When coding accessible emails, make sure to use elements like <h1> and <p> in HTML code. Tags <h1><h2> will have an advantage over normal text in the same container and will be read first.

Note: it does not matter which font you set for certain parts of your texts. If it does not have tags <h1><h2>, it will be equal to the screen reader even if the font size is 32 px or more.

Example of a well-structured accessible email

In this example, the heading 2 text is 24px, while the normal text font is 27px. But the screen reader will “read” heading 2 first.

Setting Logical Structure in Emails for Screen Readers _ Code Sample

Add alternative text

Screen readers cannot “read” the images you use in emails. But they can read “alternative text," aka alt text.

This one is useful not only for people with visual impairments who use screen readers, but for all other recipients of yours because some email clients block images by default. Also, sometimes images can't be loaded due to a slow internet connection. You are doing yourself a favor by adding alt text to each image. Make sure it is clear and informative. But avoid using the word “image” in your alt text because its tag already mentions it. Samantha Connelly, in her post on email accessibility, says that it must be somewhat irritating.

Example of an email with an image

The way the alt text looks in HTML email code:

Example of alt text in the email code _ Accessible email

How you set an alt text it with Stripo:

Once you have inserted a photo/image into a container, you will see empty fields for inserting alt text and links on the settings panel.

Inserting Alternative Texts with Stripo _ Field for Alt texts

Sticking to this simple trick makes listening to emails by screen reader users way more pleasant and useful.

Note: if you use a GIF to show how to use/install/wear your product’s items, be sure to also provide recipients with a written manual or at least insert a link that takes customers to your website where you in detail explain how to.

Work on links

Links in emails should also be meaningful. Add clear and concise copy! 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 text

The first link does not tell the customer what it is about, whilst the second specifies the website and destination.

If you've been wondering, the first link took me to the subscribe page. But how would a person who uses a screen reader where the link might take him or her to?

Note: I designed many emails with numerous editors and sent them via numerous ESPs, then I tested these emails on different screen readers in different languages, and here’s what I got:

  • Windows did not “read” the links at all;
  • Macintosh VoiceOver did read entire links;
  • Android TalkBack did not read the link but said, “Link — tap twice to open it.”

Some OSs must learn to cope with screen readers to ease some people’s lives.

Ace CTA buttons

Certainly, the main goal of email marketing campaigns is to sell our products. Thus, we should pay close attention to the CTA buttons. And we normally do — by applying bright colors, by shaping the buttons themselves.

Some studies show that the design means much more than clear and engaging copy means much more than the design. While other investigations prove that the email CTA button design does not increase CTR and CTOR. It just makes the button more noticeable. And catchy text makes what it should — call subscribers to hit the button.

This is the way we see the button:

Example of an accessible email with CTA buttons

The screen reader sees only the text of the very button.

Social media icons

Stripo allows adding as many social media icons in emails as you need.

Some recipients who use the screen reader may not understand abbreviations applied to the icons — let the alt text of the social media icons be descriptive, too.

How you set it with Stripo:

When adding social media icons, you must work on their alternative texts (the alt attribute).

  • click on any social media icon in your email;
  • then in the settings panel, you will see the list of the icons you used;
  • click “More,” as shown in the screenshot below;
  • enter the alt text in the respective fields.

Click on the More Button to Get to the ALT text field

Note: the Title field already has a whole name inserted, while the Alt text field contains only a few letters. You may replace it with the entire name of the social media.

When starting a new campaign, be sure to work on your text to make email accessible so that people with visual impairments (or those who check their inboxes with Bixby and Siri due to being extremely busy) can get a clear idea of what your email is about.

3. Email accessibility requirements for dyslexia

Dyslexic readers confuse the order of letters in words and consider capital letters within a sentence as single letters despite normal intelligence.

Example of how dyslexic readers see the text

(the same sentence the way dyslexic readers see it)

What can we do to make emails accessible for dyslexic readers?

  • don’t underline links. Do like we said a few paragraphs before — make the text you hide the links behind bold;
  • never start a new sentence at the end of a line — the new sentence means a new line in emails;
  • no upper case if you want to emphasize something — increase the font size;
  • never add center-aligned text in emails — only left-aligned copy;
  • background should not be white; make it cream for dyslexic readers — same concerns other people, as text written on the cream background looks softer;
  • all sentences in emails should end with a period (.), and bullet points should end with semicolons (;).

Please find more in this guide

4. Email accessibility requirements for deafness

There is only one single requirement:

All videos that give how-to instructions with a voice should have captions or subtitles.

Adding Subtitles _ Captions to Emails

(Source: Video from Stripo)

Note: don’t rely on the subtitles YouTube offers. Quite often, they do not work properly.

Wrapping up

The following tips will help you with creating accessible emails:

  1. Use sufficient contrast colors of different shades. Even if a person confuses some mid colors, for example, dark green and dark brown, he or she will never confuse light green with dark brown.
  2. Add descriptive subject lines to your emails.

  3. Always! Always add alt text to all the imagery.

  4. If a GIF fulfills an educative mission, be sure to add a written, detailed description to it.

  5. Use only one language per email as screen readers can speak only one language at a time. Another language in the email is just transliterated, making it impossible to understand what the screen reader says in any other language.

  6. Ensure all the links inserted in an email are meaningful to avoid accessibility issues.

  7. Specify the Content-Type <charset=”utf-8”> to make all characters used in emails legible. I feel like reminding you that Stripo already did it for you.

  8. Set only left-aligned text in emails.

  9. Create your email messages with love and care for all human beings.

When you've finished your email campaigns, check them with accessibility testing tools, send a copy of the email to email clients, and try it with the screen readers.

Throw away accessibility issues creating your emails with Stripo

You might be interested in

previous next
banner9
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Templates
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they have....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business, and make a good lasting impression on clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine the best email signature examples and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information. Use this email signature template to design your own email signature faster Use...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s