Email Accessibility: Designing and coding accessible emails

What is email accessibility?

Email accessibility is a topic that has gained more and more popularity over the last few years. Email accessibility entails designing and sending emails that can be read and understood by each and every subscriber, despite their visual compartment or other disabilities. In this blog post, we will walk you through best practices that will help you create more accessible emails. This information was presented during a workshop held by Chamaileon during Inbox Expo 2020. You can watch the email accessibility webinar here if you would rather.

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, visually impaired, or partially sighted
• Many are affected by temporary disabilities

Making emails accessible is 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

sent you an email

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 WCAG Email Accessibility Guidelines / ADA Email Compliance

Email accessibility all started with the ADA email compliance guidelines that were first published in The Americans with Disabilities Act of 1990. Unfortunately, the initial version didn’t specify the guidelines with enough clearance.

Then WCAG, aka Web Content Accessibility Guidelines, was born in 1999, which declared that emails need to maintain a logical order, use headings, have sufficient color contrast between text and backgrounds, provide alt text for images, include meaningful link text, and use a descriptive subject line in all cases.

Besides these base values WCAG includes the 4 below principles that you need to understand if you want to improve email accessibility across your organization.

Perceivable

Your content needs to remain easily consumable for people with disabilities. In order to reach this, you need to add certain elements to 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

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

Understandable

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.

Robust

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.

[optin-monster-shortcode id=”v9znemfd1sgbljyz7r0j”]

HTML Email Accessibility Standards for Copywriters

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 outstanding email content. So everything starts with the copy.

Before diving into 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’s 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.

If you obey the below email accessibility requirements when composing your email, you will already do better than many large brands. Don’t worry, these rules are not too hard to follow and will help you improve the overall quality of your message as a side effect.

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

Does center-aligned text matter for accessibility? Yes, it does. Especially in case, the text is rather a paragraph nor a headline. 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, but it’s usually overused. There are many brands including Starbucks, Disney, Airbnb, GoPro, Nike, that refuse to obey this rule. As a result, many of their emails are challenging to read 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 ALT Text for Images

ALT text is very important in emails not only because images can be blocked in some email clients, but also because screen readers read out the ALT text 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 Accessibility Best Practices for Designers

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 are at least 20 pixels. Which makes the overall size of the button around 48x48px, and allows any reader to clearly see and interact with 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 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.

Shortened Email Accessibility Checklist | TL;DR

• Maintain a logical reading order
• Define the language of your email in the HTML code (available in Chamaileon)
• Include role=”presentation” attribute on all <TABLE> elements (available in Chamaileon)
• Use different text headings (H1, H2, H3…) in the email code to highlight important information for screen readers
• Optimize text color vs. background color contrast ratio – aim for 4.5:1
• Always provide meaningful Alt texts for image elements
• Use meaningful link texts

Tools to Help You Conduct an Email Accessibility Test

When I need to check email accessibility I usually start with accessible-email.org. It’s a handy tool operated by Maarten Lierop & Jordie van Rijn.

To get started you just need to paste in your email HTML and it will instantly analyze

• Heading usage
• Link labels
• Image ALT texts
• Document title, language, encoding, and
• If role=”presentation” is used in the code to highlight which tables are for layout purposes only

Checking color contrast is a bit more tedious. There’s no tool that would automagically analyze the font and background colors used in your email. You’ll need to manually insert the color codes you use into a Contrast Ratio Checker and double-confirm that the ratio is above 4.5:1.

You should test the contrast ratio extensively especially when you are building out the email design system. Once you have that fixed and have your email blocks defined, you won’t need to thinker with contrast ratio checks all the time.

Wrapping Up

Accessibility in email marketing is a topic that has gained more and more popularity over the last few years. And for a good reason. Designing and sending emails that can be read and understood by everybody, despite their visual impairment or other disabilities, helps your brand stand out from the competition and show that you care.

We believe that more and more companies should deal with creating accessible emails, so we added several features to our email design platform and HTML generator likewise to make it easier for our customers. In Chamaileon’s drag and drop email builder you can not only define headings and ALT texts, but also set the email language and add role=”presentation” to the email code automatically.

[optin-monster slug=”rrgjcuqrpslkair68fyo”]