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

Perceivable

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

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.

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.

go daddy - email copy

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.

headlines in email

 

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.

justified text for dyslexic users

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.

center aligned text email nike

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.

blocks of text

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.

bold text

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:

alt text in email images

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.

email copy line length

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

grey text on white background - email accessibility

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.

call to action email accessibility

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.

contrast ratio - white on yellow GIF

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.

good email contrast ratio - gopro

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.

patterns on charts

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.

strava consistent design

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.

what is 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.

Wrapping Up

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.