Why does accessibility matter?
- 5-15% of the US population has dyslexia
- 4.5% of the population in GB suffer from color blindness
- 2.4% of people in the US and 3% in the UK are considered blind or partially sighted
- Many are affected by temporary disabilities
Making emails accessible is not also important due to the rise in using voice assistants:
- Alexa is the only voice assistant that can read out the whole email. Alexa reads through the HTML text only and skips image alt texts.
- Siri reads the sender name, subject line, and preheader
<sender name> sent you an email <subject line>
It says < preheader>
Would you like to reply?
- Cortana can read email only from Outlook (only like Siri)
- Google Assistant doesn’t support email at all
The 4 Web Content Accessibility Guidelines Principles
These are the WCAG that you need to take into account in your email templates as well.
Your content needs to remain easily consumable for people with disabilities. In order to reach this, you need to add certain elements in your emails:
- ALT text for visual elements
- Sufficient color contrast
- Use an email design that works without colors as well
- If you are embedding a video in your email, make sure to add subtitles
Operable means that people need to be able to interact with their emails in alternative ways. In order to do so you need to make your emails:
- Easy to navigate with the keyboard (tabs)
- Use descriptive links to help people understand what a certain link does
- Display elements for sufficient time, especially when have animated GIFs
- Avoid using visuals that can cause seizures or other unwanted physical reactions
To make your text understandable for those who use screen readers, for example:
- Indicate the language at the very beginning of the email
- Follow copywriting conventions in a predictable way
- Most importantly, make your text readable – in terms of design and content as well.
Your content needs to be robust enough to be compatible with all sorts of different user agents and assistive technologies that people with disabilities use. In our case, there are mostly screen reader apps, which are not user friendly at all.
Copywriting for Better Email Accessibility
Here at Chamaileon, we are big fans of email design. But we also understand that good email design can only help us reach our objectives if it’s paired with good email content. So everything starts with the copy.
Before diving in email copy, we would like to highlight that no matter how great your email content or design is, people won’t pay attention if you fail to make the Sender name, Subject line, and Preheader interesting and trustworthy enough to make people open your message.
Also, remember that both Siri and Cortana will use the above format to read out your email.
Forget about SEO Principles
You don’t need to care about SEO or Google when you write your email.
Use human to human language that’s conversational and easy to understand. Even adult Americans prefer to read 7th grade-level text, while the average would be able to tackle 9th grade as well.
You can use Readable to check your readability score and Grammarly to check how Correct, Clear, Engaging your content is, and how well it is delivered in order to make the right impression on the reader. The free plan in both tools is already good as a starting point.
Use Headers & Hierarchy
The different header levels help your subscribers who use screen readers clearly understand the hierarchy of your message.
Also if you want to build up your email design system it’s best to stick with certain heading and text styles that should be carved into stone.
Avoid All Caps
The problem with all caps is not only that it can feel like SHOUTING on the web, but it also makes your text much harder to read for dyslexic people. In fact, 5 to 15% of people are dyslexic. And writing in all caps makes it difficult for them to distinguish between the different letters.
Avoid Justified Text
Justified text sometimes feels like a good idea from a design perspective, but it is difficult to read for both dyslexic and non-dyslexic users as well. This is because it creates large uneven spaces between letters and words. When these spaces line up above one another, a distracting river of whitespace can appear.
This can cause dyslexic readers to repeatedly lose their place when reading. You can avoid creating the river effect by using left-aligned text, instead of justified text for your paragraphs.
Short center-aligned text only
According to Litmus if the copy is longer than two lines, it should be left-aligned.
Center aligning seems to be more accepted in email designs than justified text and actually there are many brands including Starbucks, Disney, Airbnb, GoPro, Nike, and many others who refuse to obey this rule which makes reading a challenging experience for dyslexic and even non-dyslexic people.
Always break up large blocks of text
Make sure to break up overwhelming large blocks of text to make it easier for users to digest the information. As you can see in this short animated GIF, it’s much easier to read short sections of words, instead of a whole block.
Best practice says that you should use paragraphs that don’t go beyond five lines as maximum.
Emphasize with Bold Text Styles
Use bold text to highlight important words and phrases. Bold text not only looks better but actually makes it much easier to read a text for dyslexic people.
So use bold text for emphasis, instead of italic or underlined text.
Use ATL Text for Images
ALT text is very important in emails because images can be blocked in some email clients, but also because screen readers read out the Alt text out loud. However, it can be a bit tricky to write proper alt text for your images.
Everything you need to know about embedding images in emails the right way.
Here are some tips to consider when working on your alt texts:
- Don’t repeat the same alt text
- Descriptive & short (max 100 characters or less).
- Alt-text is not title text
- Use empty alt text for illustrations
- Style your alt text
It goes without saying that you shouldn’t write: “Please enable images for your email” as an image ALT Text.
Most screen readers will not prioritize alt text over title text and instead, read both. This doesn’t create a great experience for the user.
Here’s an example of what not to do:
Email Design for Better Accessibility
Keep your Line Length short
Another contributor to the readability of email content is the length of a line.
The ideal line length is often quoted to be between 45 and 75 characters. A line that is too long causes users to lose focus and makes it harder to move to the next line correctly.
While a line that is too short causes users to jump too often, causing fatigue to the eyes.
You should also break up the content with headings, lists, or images to give mental breaks to the reader and support different learning styles.
Use headings to logically group and summarize the information. Headings, links, controls, and labels should be clear and descriptive to enhance the users’ ability to comprehend your email content.
Don’t use (light) grey as your text color
Never make your email text too grey, even if it looks good from a design perspective. You want to keep readability in mind.
As a rule of thumb, you shouldn’t use a grey color that is lighter than:
- #959595 for 24px text or 19px bold text.
- #767676 for smaller text
Optimize call to action size and spacing
Always optimize your email buttons’ size and spacing. According to WCAG, the minimum size for a call to action should be 44 by 44 pixels. Google, however, advises that buttons should be bigger reaching 48 by 48 pixels.
The minimum spacing recommendations according to Microsoft and Google are pretty different. In fact, Microsoft recommends that the min spacing in a call to action should be 8px, while Google says that it should be at least 32px.
We are leaning more towards Google’s recommendations because it gives more space to the reader’s eyes.
Here’s an example of a checkbox in an email.
The checkbox size in this email is 28 by 28 pixels. And the margins around the checkbox button is at least 20 pixels. Which makes the overall size of the button around 48x48px, and allows any reader to clearly see and follow the call to action.
This example reminds us of the footer call to actions in our emails. Usually, we include small social icons in the footer. Make sure to check the size of your social icons and the spacing between them.
Optimize the contrast ratio
Make sure that the contrast ratio between the text color and its background color is around 4.5:1 for smaller text, and 3:1 if the text is larger.
You can use online tools like contrast-ratio.com that automatically calculate the contrast ratio between two colors.
It’s important not to round up the contrast ratio that you get if you think it’s close to the standard. For example, if your contrast ratio is 4.45:1 for a certain color combination, you can’t simply round it up to 4.5:1. You need to change the text or background color to reach the recommended ratio.
Here’s an example of what not to do when it comes to color contrast.
This animated GIF from Vinyl Me which looks cool, but doesn’t respect many email accessibility principles, not just contrast ratio:
- The rotating text on the GIF is in all caps.
- The contrast ratio between the white text and the yellow background is only 1.96:1, which is far from the recommended 4.5:1.
- The GIF features a rotating text that is not only difficult to read even for people with no disabilities, but can also cause dizziness or vertigo.
The design looks great and out of the ordinary, but it has many readability issues and is far from optimized for people with disabilities. It does not serve its purpose.
On the other hand, here’s an email design from GOPRO that respects the email accessibility guidelines. The hero GIF in the email has a high contrast ratio of 13.57:1.
Even the call to action has a good ratio of 9.88:1 when it comes to the button’s blue color on the black email background color. However, the button’s white text on the blue color doesn’t respect the contrast ratio with only 2.12:1 CR.
Don’t use colors only
You shouldn’t only use color to make a certain image or chart understandable. For example, when you have a chart, you can add a specific pattern to every bar or section of your graphic.
That is what will make it easier for people with disabilities to understand your chart. Because they might miss the different colors illustrated in the graphic, but they won’t miss the patterns or labels associated with it.
Use consistent and clear layout & copy
You should always make sure that your email style aligns with your website. Here’s an example from Strava. You can see how their application, website, and email designs are consistent and follow the same brand guidelines.
This makes it easier for anyone familiar with their content to quickly recognize the brand.
The first step to establish a consistent visual brand across all channels is to build a design system.
An email design system can be established by hand-coding your emails or simply creating a master template that includes regularly used email blocks. Whenever, you or anyone from your team designs a new email, you rely on this master template by embedding already existing email blocks in your new design.
You can use a drag and drop email template builder like Chamaileon to create and save your master template, save every block in specific shared folders, and group them according to brands or projects.
Code HTML Emails with Better Accessibility
Click on this video to watch a short webinar delivered by Patricia, an email developer and expert at Chamaileon, during Inbox Expo London 2020. She will walk you through the steps of coding HTML emails to make them more inclusive.
Email accessibility is a topic that has gained more and more popularity over the last few years. And for good reason. Designing and sending emails that can be read and understood by each subscriber, despite their visual impairment or other disabilities, helps get your message across and make your brand more inclusive. You can use our drag and drop email builder to create accessible emails in a matter of minutes. Our email editor allows you to add alt text to images, structure your email layout in H1, H2, H3, and so on.