1.3 billion people worldwide live with a visual impairment. Add onto that anyone who has a temporary disability (think broken hand). That’s potentially a lot of email subscribers who require accessible emails.
So what can we do as marketers to be inclusive with our emails, and ensure the customer experience is as positive as possible?
1. Language attributes
Defining the email language tells screen readers and other non-human systems, for example a search engine, to pronounce or display your email copy in a set way.
The email language is set in the head of the email using a two-letter code. For example, English is specified as “en,” so the code would display as lang=”en”. You can find a full list of codes here.
Setting the language to English, or your chosen language, will make sure any screen reader pronounces your message properly. If you don’t, it’s possible that the screen reader will read the email with the device’s default language setting, which could make the message difficult to comprehend.
2. Title tag
This is a simple one, you will probably find you’re doing it already, but utilising the <title> tag will set a title on the tab of the webpage when an email is viewed in a browser. Additionally, this tag provides a title and some context for people using assistive technology, for example a screen reader.
3. Content-Type
Content-type code tells the email client which types of characters to expect in the message, as well as how to interpret them. The most popular character sets are UTF-8 and ISO-8859-1. You can find a full list of sets here.
For example, setting UTF-8 on an email like this:
<p>UTF-8 Chinese: 激 光 這 </p>
Will cause the characters to display like this:
If you didn’t use content-type at all, or used the wrong set, it would look like this:
You can set this in your email header using a meta tag, that looks something like this:
{!{code class="language-markup"}!}czo3NTpcIiZsdDttZXRhIGh0dHAtZXF1aXY9XCJDb250ZW50LVR5cGVcIiAgY29udGVudD1cInRleHQvaHRtbCBjaGFyc2V0PVVURi04XCIge1smKiZdfS8mZ3Q7XCI7e1smKiZdfQ=={!{/code}!}
Setting the content-type also ensures the reading pattern isn’t broken for a subscriber, whether they are reading the email themselves, or using a screen reader.
4. Alt Text
Alt text (alternative text) is the copy that sits behind your image in the code. Setting alt text is important not just for accessibility with screen readers, but also for all those recipients who have images turned off.
Without relevant alt text, your email may not be readable, and it can damage the overall experience of the email for your subscribers. Alt text also help subscribers using screen readers, because when the screen reader comes across an image in the email, it will read the alt text to describe the image.
Not all email images need alt text. For example, if you’re using an image purely for aesthetics, for example a spacer, ensure you set an empty alt=” “. Doing this will tell the screen reader to skip over the image.
5. Contrast
Colour contrast is important for users who may have colour deficiencies or be colour blind. For example, having a yellow background with white text overlaid can be difficult to read.
According to the Web Content Accessibility Guidelines (WCAG), an email design should have a minimum contrast ratio of 4.5:1. Contextually, the same colour (white on white) has a contrast ratio of 1:1 while white on black has a ratio of 21:1.
6. Table fixing
Setting tables to ‘role=”presentation”‘, is one of the most important steps in creating an accessible email, because it uses Assistive Rich Internet Applications (ARIA) to tell the screen reader how to interpret the table. This means it can read it in a sensical way for the user.
Hopefully there will be more methods for making emails accessible popping up over the next few years, but in the meantime there’s some you can start with!
For more tips on checking your emails before you send them, you can use our pre-send checklist.