email accessibility guidelines

9 Steps You Must Take to Create an Accessible Email


Email accessibility: Is it something your email marketing team considers when crafting a new campaign or email template?

In October 2018, the World Health Organization calculated that approximately 1.3 billion people worldwide live with a visual impairment. That’s a lot of potential email subscribers, if you think about it.

There are also countless people facing temporary disabilities, such as a broken hand, hospital stay, or surgery recovery. They may be using assistive technology to navigate their devices or email, as well.

Recently, we conducted a poll on our website asking visitors whether accessibility is a part of their email strategy. Interestingly, more than 70% of respondents said they are actively looking at making their emails more accessible.

So, if you’re ready to join the accessibility bandwagon, where do you start? In this post, we’ll break down some of the crucial pieces of code that make your emails accessible. If you want to make your life easy, take advantage of our accessibility check tool in our new Campaign Precheck — we walk you through each of these important steps and fix the code for you.

Jump into a free trial or upgrade your existing account to try it out.

Set the Language Attribute

Setting the email language tells screen readers and other non-human systems, such as search engines, to pronounce or display your email copy in a specific way.

If a subscriber with a disability is using a screen reader to read your email that is written in English, setting the language to English will ensure the screen reader pronounces your message properly. Otherwise, the screen reader will read the email with the device’s default language setting, which could make the message hard to understand.

The email language is set in the head of the email using a two-letter code. English, for example, is specified as “en,” so the code would look like lang="en". If you’re using our accessibility check tool, however, you just need to choose the language from the drop-down menu and we’ll get the code sorted for you.

Add a Content-Type

Content-Type plays a major role in the way an email displays. This code informs the browser or email client which type of characters to expect in the message and how to interpret those characters. The most popular character sets are UTF-8 and ISO-8859-1.

To illustrate, let’s take the following code:

<p>UTF-8 Characters: ö ü ä</p>

<p>UTF-8 Chinese: 激 光 這 </p>

<p>HTML Entity Characters: &#28450; &#23383;</p>

Here’s how it renders using each character set:

As you can see above, the Chinese symbols are not represented in the ISO-8859-1 character set. This is because ISO-8859-1 only includes Latin-based language characters. The result is a bunch of jumbled text, which is the ISO-8859-1 interpretation of the symbols.

Setting the content-type also ensures nothing breaks the reading pattern for a subscriber, whether the subscriber is reading the email herself or using a screen reader.

Set the Title of the Email

Using the <title> tag will set a title on the tab of the webpage when a subscriber views the email in a browser. This tag also provides a title and some context for people using assistive technology, such as screen readers.

Fix Your Tables

One of the most important steps in creating an accessible email is setting the tables to role="presentation". This uses Assistive Rich Internet Applications (ARIA) to tell the screen reader how to interpret the table, so it can read it in a way that makes sense for the subscriber.

Our Campaign Precheck tool will check your tables and make sure they are set to “presentation.” However, if you’re using a table for showing data, you should leave this off.

Remove Title Attributes

Some email developers like to use title="" to add titles to links. However, most screen readers do not read these by default, and they wind up being useless additions to your code. Instead, try including important information as part of the email copy or the link text itself.

Add Alt Text

We’ve talked a lot about the importance of alt text; you should include it to make sure your email is still readable, even if the subscriber has images turned off.

Alt tags also help subscribers using screen readers. When the screen reader comes across an image in the email, it will read the alt text to describe the image.

Here’s an example from the social callout in our newsleter:

social media button alt text example
When the images are turned off in the email, you’ll see the alt text for each of the social media buttons.

 

Social media button images
Here’s what the social callout looks like with images turned on.

 

It’s important to remember that not all email images need alt text, however. If you’re using an image purely for aesthetics (such as a spacer or shadow), be sure to set an empty alt="". This will tell the screen reader to skip over the image.

Within Campaign Precheck, you can go through each of your images and set alt text where it’s needed. We’ll add the right code for you.

Check the Contrast Ratio

Color contrast is especially important for subscribers who may have color deficiencies (color blindness). For example, white text on a yellow background may be difficult to read.

contrast ratio example

An email design should have a minimum contrast ratio of 4.5:1 to meet level AA standards outlined by the Web Content Accessibility Guidelines (WCAG) 2.0. For text larger than 23px or bold text larger than 18px, the contrast ratio should be 3:1. To give those numbers more context, the same color (white on white) has a contrast ratio of 1:1 while white on black has a ratio of 21:1.

Email on Acid’s Campaign Precheck has a contrast ratio tool built into the workflow that will check your email design for color contrast issues. The tool will flag anything below the standard and adjust the coloring, so it is easier to read.

Make Links Accessible

Links are another email element to consider for colorblind subscribers. Depending on the type of color deficiency a user has, he or she may not be able to easily see link or CTA button. Be sure to underline all links in your email, so you don’t lose out on a click.

Check Zoom

Many users with visual impairments will use a zoom function to read an email. When that happens, what will your content and design look like? Will your subscriber still be able to understand and engage with your message?

Our Campaign Precheck tool will show you what your email looks like when it’s zoomed up to 200%, so you can adjust design and copy if needed.

More to Come

There are many other elements to accessible emails, but from a design and coding perspective, these steps are a great place to start. You can learn more about accessible content flow and structure in this blog post.

Here at Email on Acid, we’re passionate about email accessibility and making sure email marketers can connect with every one of their subscribers, including those with restricted vision or other disabilities. That passion, combined with growing interest in accessibility, will drive us to improve and expand our Campaign Precheck accessibility tool. Stay tuned!

Author: Melanie Graham

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies