Take a look around, listen to what’s going on. Do you see everything clear, in full-color mode? And you hear noises and voices well? Congratulations, you’re certainly a lucky person. Moreover, you’re actually a really happy one. You have vision and hearing!
You may think these abilities are common and given by default to everyone? What if I tell you that 4.5% of recipients in your contact list are suffering from color blindness, so it’s difficult for them to read or understand your email content?
Though color blindness is not the only widespread disorder. Just a bare fact: 285 million people around the world suffer from severe visual impairments that make seeing a problem even with contact lenses or glasses.
And 5% of the Earth’s population have hearing impairments. In other terms, over 360 million.
That’s something to think about. We cannot ignore all those people. We must do our best to be friendly to them, and to make their life better. This is what accessibility is all about.
Now, make yourself a cup of tea or coffee, and let’s dive into the details.
What does email accessibility stand for?
There are people who suffer from severe visual disorders or even complete blindness. They are using screen-reading software to vocalize inbox emails — VoiceOver, Microsoft Narrator, and other similar tools. Therefore our duty is to adjust our content to these assistants.
When it comes to color blindness, from protanopia (when people cannot distinguish certain colors) to monochromacy — there are no tools that help people with these conditions. So we have to optimize email imagery ourselves.
Others are suffering from hearing impairments, dyslexia, etc. Consequently, there are sets of accessibility rules for each type of disorder. Thus we came to the answer to a question in the heading.
In a nutshell, it means sticking to standards that make emails readable for people with all types of special requirements. Fortunately, modern HTML email template builders and other marketing software provide us with advanced tools to implement these standards quite easily and with no special skills.
I’m gonna share these standards below, as well as some practices that will be helpful to create accessible emails.
Accessibility standards
So, dear friends, it’s time to explore one by one these sets of recommendations we need to follow in order to send out “universal” emails that will be easy to read for recipients with all types of visual, hearing, and perception malfunctions.
1. Color blindness
There is a list of color blindness types. Here they are:
Protanopia means defunct perception of the red color. Readers with protanopia, aka red-blind people, tend to confuse black color with all the shades of red. They also cannot distinguish dark brown from dark green and see no difference between blue color and mid diapason of red. Take a look at this email from Uber:
And this is how recipients with protanopia see it:
Deuteranopia is a reduced perception of green. These people also tend to confuse mid red/green diapason, bright green/yellow, and light blue/lilac colors. Again, take a look at the same email: original on the left, and deuteranopia version on the right.
Tritanopia means blindness to blue color and its shades. This is why those who suffer from this impairment typically confuse light blue/gray, and dark purple/black. The same email sample, but you can see the tritanopia perception of it on the right:
Monochromacy is for total color blindness. These people can see the reality painted only in black, white, and varying shades of gray. No other colors. Just imagine the world on the screen of a very old TV set. This is how monochromacy looks like. Seriously, it gives me goosebumps.
What should we do?
- Choose the font size for email copy no less than 14 px. However, I recommend 16px to provide recipients with accessible email design;
- Avoid contrast solutions based on colors that color-blind clients may not distinguish. For example, don’t write your copy with green or blue text over a red or lilac background. Look at the message below. It’s OK for people with full diapason of colors perception… but is it as good in the case of protanopia or monochromatic vision? I don’t think so…
(original message)
(this is how clients with protanopia will see it)
(the way monochromats see this message)
How should they understand whether their favorite team won or lost the match?
- Forget the idea of adding green buttons over red pics, or vice versa. The same is true for all the “risky” color combinations mentioned above. The idea is really bad — people with color perception malfunctions may not notice the button at all;
- Always specify the product’s color in brackets — clients may not distinguish, for example, red color but they know that red shirts or dresses match their image perfectly;
- Make links in your emails bold.
Yeah, regular blue color for links text is not enough. And not only because of color-blind recipients. Have you ever read emails in the street when the sun shines mercilessly right onto the smartphone screen? Then you know what I mean — it’s hard to distinguish colors at all. So make links bold, and don’t underline them. Why? Because underlining may distract people with dyslexia. We’ll talk about dyslexia in detail a bit later.
In this email, menu items are bold too. This simple idea optimizes the customers’ navigation within the newsletter — they will easily find the desired category of apartments.
Notice the “View detail” link with an arrow. It says that you may see more details by clicking it;
If you add interactivity elements or run tests in your campaign, choose green/deep red/light blue colors to highlight the correct answers. And red/black/grey respectively for wrong respectively. Be sure to duplicate yes/no answers with text.
It’s really essential to check if the email fits the requirements of people who suffer from a color deficiency. For your convenience, I’d like to add this table to our post. Save it to find the matching colors and avoid confusion:
There’s also a free color blindness simulator tool that shows your pics the way color-blind recipients will perceive them.
As we can see, color testing is not too complex — just don’t ignore it. Show your care for all the subscribers. Be good.
2. Blindness and severe visual impairments
The next chapter is dedicated to accessibility standards for blind and partially sighted persons. These rules are all about visual disorders too, but the principles and solutions here are totally different. No color schemes or contrast combinations may help in this case. This aspect of accessibility science is based on using screen reading software.
Consequently, our mission is to adjust our emails to these tools. In other terms, we have to make emails legible for these tools.
What should be given special attention here?
Email subject
Typically, screen readers start reading an email from its subject.
So the commonly accepted rule is simple yet effective: make your subject line brief and descriptive. A good subject should explain the core essence of the message.
Language settings
It’s really important to configure language settings in the email copy. This task requires some effort and work with email copy but it’s worth it. The matter is that email text vocalized by screen readers may sound terrifying if you ignore these settings. Something like conversations of orcs from Lord of the Rings 🙂
To avoid this, specify the respective language in the email code (if available).
Logical order
Screen readers have a strict order on how to vocalize emails. They read containers and blocks from the left to the right and then proceed with the next line.
To provide accessibility, specify header tags like <h1>, <h2>, <p>, etc in HTML code. These tags will add priority over regular text, so these elements are vocalized first.
Also, the font size doesn’t matter when tags are specified. In the example above, the heading 2 font size is 24px, and the normal copy font is bigger — 27px. But screen readers will vocalize heading 2 first.
Alt text
AI technologies are developing steadily today. But screen reader tools are still not smart enough to “look” at the pics in the email and describe them. Maybe in the near future… As for nowadays, these utilities can only read alternative text aka Alt text we add to images.
How to adjust alt text to accessibility standards? You guessed right, it’s pretty obvious: make this text concise, descriptive, and informative. One helpful note: avoid the “image” word in this text. The image tag already specifies it, so it will be kind of weird to hear the duplicated “image image…” 🙂
Links, CTA items, social icons
Links should be as concise and informative as possible. Add clear text to them and remember that screen readers will transform this text into voice! Let recipients know what you offer them and where they’ll go by click.
Just look at these links:
The first link… uh… seriously, I fear to imagine how creepy it will sound. While the second one clearly specifies the website, publication date, and the post title.
The same is true for CTA buttons and social media icons. In fact, these items are hyperlinks, too, just wrapped in aesthetically appealing visual shape. Every skilled email marketer pays the closest attention to them, works on design and effects, chooses perfect color solutions to generate clicks…
But when it comes to screen readers and accessibility for blind persons, the only important thing here is text. Make it catchy enough to complete its mission — compel subscribers to click the button.
This is how we see the CTA button in the email:
But screen reading tools don’t give a flying duck about all our designer tricks and marvelous hover effects. All that software sees is the bare text. Nothing else. So make sure your text works on its own.
Regarding social media icons, some subscribers who “listen” inbox emails may not understand the abbreviations we apply to these icons. So write descriptive alt text for these items.
That’s all about blindness. Just one more important note: screen readers are widely used today not only by people having severe visual disorders. Millions of recipients are listening to their inbox emails when they are busy, in the street, in the car, etc. So this aspect of accessibility is even more vital than one could imagine.
3. Dyslexia
People who suffer from dyslexia tend to confuse the order of letters in the text, despite the normal IQ level.
Here are practices of accessibility for dyslexic recipients based on the post published by the British Dyslexia Association.
- Avoid underlining links. As I already mentioned a bit above, make your links bold instead of underlining them;
- Don’t begin a new sentence at the end of a line. The new sentence should be a new line respectively;
- No CAPS LOCK if you need to highlight/emphasize a certain idea — use the bigger font instead;
- Forget the center-alignment — only by the left side of the screen;
- White background may distract dyslexic recipients, cream colors are softer and don’t make difficulties;
- End all sentences with a period (.), you should also use semicolons when there are bullet points in email copy.
4. Deafness and partial hearing
For people with hearing impairments, there’s one single standard. All the videos embedded in your emails should be equipped with subtitles or text descriptions.
Just don’t rely on the automated subtitles provided by Youtube and other video hostings. They are often, eh eh… to put it mildly, far from ideal. And in some occasions are even on the verge of schizophasia.
Email accessibility top tips
I’ll end up with our review of the best accessibility practices today. As we can see, this aspect of email marketers’ work is really essential. Consequently, never skip the accessibility testing before clicking the “Send” button! Check your campaigns with the aforementioned color blindness simulator, send the test email to all the available devices, and listen to them with different screen readers.
Now let’s briefly recap the key points of this post. How to provide accessibility?
- Choose different colors to create a contrast scheme to prevent confusion;
- Write clear and descriptive subject lines;
- Never forget about alt text, add it to all the imagery;
- If the GIF animation has an educative role, provide readers with a detailed description;
- Don’t use different languages in one email because screen readers can work only with one single language at a time;
- Check the meaningfulness of your links;
- Align text by the left side;
- Create your newsletters and triggered emails with true love. Care about all your subscribers.
I sincerely wish you all the best. Spread care and kindness all around!
