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.

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.

(original email by Uber)

(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.

(original email from Premiere League)

(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.

(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:

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.

(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:

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:

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.

Encode characters

The way the email content will be displayed depends on the Content-Type. You need to add  in your email HTML code right after "" 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.

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

and in HTML code. Tags

, 

 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 

, 

,

 it will be equal to the screen reader even if the font size is 32 px or more.

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.

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.

The way the alt text looks in HTML email code:

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.

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:

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:

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.

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.

(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.

(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 > 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.