Email Accessibility: Your Ultimate Guide

You strive to deliver the perfect email experience to your subscribers. But if you’re glossing over email accessibility, you could be alienating those with visual, physical, cognitive or neurological disabilities.

Read on to learn how to make your emails more accessible for all of your subscribers.

You can think of accessibility in email as an extension of dealing with email clients with poor support. Including workarounds and fallbacks ensures every subscriber receives a positive experience.

Consider the visual aspects of email accessibility in your design

Let’s start by looking at the visual aspects of your email that can impact accessibility and where improvements can be made.

Use color intelligently

Subscribers with color blindness may not be able to differentiate between some colors in your email, so ensure that color isn’t the only way information is conveyed.

Color contrast can also pose issues to subscribers with visual difficulties. Use a high color contrast between different elements in your email, especially between copy and background colors. One way to do this is to use WebAim’s Color Contrast Checker to check the contrast ratio of the colors in your email.

Are your emails accessible? See what your emails look like for visually impaired users using the color blindness filter in Litmus Email Previews. Try Litmus free →

Don’t create harmful content

Content that flashes at certain rates or in patterns, such as animated GIFs, can cause photo-sensitive seizures in some individuals. Avoid flashing content or including links to videos that may have similar content.

Balance text and images

While sighted users can visually scan or skip over non-relevant content, blind users must listen to the entire content of the email, one email at a time. Tailor the written content in your email to deliver the main message. Also, consider how compatible your design is with popular screen readers.

Improve the readability of your email

Use larger font sizes

Anything smaller than 14 pixels on a desktop or laptop screen requires some effort to read. Users can increase the zoom level on their devices to help them read their screens, but this can have a negative impact on your email, which may appear broken or cut-off.

Text can appear smaller on mobile devices, forcing users to worker harder to read your email. Use media queries to increase the minimum font size from 14 to 16 pixels on smaller devices to help users read your email:

@media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Give copy space

For some it can be hard to read paragraphs and blocks of text where the lines of copy are spaced close together. Set an appropriate line height on text to make it easier to read for all. We recommend choosing a line height that’s 4 pixels more than your font size.

<p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Tip: When increasing the font size for mobile devices, don’t forget to also increase the line height.

Paragraphs of copy also need room to breathe to aid readability. When scanning an email it should be easy to identify paragraphs and be able to keep your place. Create enough white space above and below paragraphs.

One more step to make text easier to read is by moving it away from the edges of your emails. Adding padding to a table cell or paragraph tag will help you achieve this.

Avoid justified copy in your email

“Justified” copy means that letter- and word-spacing is adjusted so that the text falls flush with both the left and right margins. While common in print, the inconsistent word-spacing can make justified copy hard to read. Text that is left-aligned has been proven to be easier to read for all.

Choose the right typeface

The use of web fonts has increased the pool of possible typefaces that can be used in email, but before you decide to use Lobster as your body font, think about how accessible it is. When selecting the typeface for your email, choose one that is evenly spaced and not too condensed. This is a good idea not just for email accessibility, but for mobile users, too.

Use semantic elements

Including semantic elements gives your subscribers who use screen readers the option to “scan” through an email by header. You can do this by using <p> and <h> tags. These are supported in every client, so it’s a good place to start making your email more accessible.

Historically, styling <p> and <h> tags hasn’t been easy, which is why it’s still fairly uncommon to see these tags being used in email. Margins around text wrapped in either of these tags was hard to manage, but using code like this you’ll be able to control that whitespace:

<h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

<p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Tip: Using mso-line-height-rule:exactly; in your <h> tags will maintain line-height rule you set in Microsoft Outlook email clients.

Write readable copy

Creating a more accessible and readable email isn’t only down to how the email is coded, but how the copy is written, too. Making your email copy more human will aid in its readability and help build a 1:1 communication between you and your subscribers.

The most popular test, known as Flesch-Kincaid Reading Ease test, can be found in Microsoft Word and calculates how easy your content is to read on a scale of 0-100. That means:

• A score of 90-100 will be easily understood by an 11-year-old student
• A score of 60-70 will be easily understood by 13- to 15-year-old students
• A score of 30-50 will be understood by college students
• A score of 0-30 will be better understood by university graduates

Making something more “readable” shouldn’t mean you shy away from tricky topics or weighty subjects. Rather than dumbing down your writing, it refers to the accessibility of the text. Your sweet spot is somewhere between 60 and 70 to capture a general audience. Of course, if your audience is highly educated, then don’t be afraid to use more complex language.

You can also boost readability by editing your copy to be direct and to the point.

Create accessible content

Make links clickable/tappable

Ensuring the size of your bulletproof buttons are large enough to be used by thumbs and fingers on mobile devices will help with the accessibility of your email too. A bigger button will be beneficial to those who can’t control a mouse with precision.

Banish “click here” link copy

Avoid using “click here” as copy for your links. Screen reader users often tab through content, skipping through it as a way of scanning an email. Giving your links context will help these users to decide if they want to click through or not.

For example, if you have a link that goes to a product listing of shoes, using link copy such as “See more shoes” lessens the ambiguity of the link for screen reader users. Reducing the ambiguity of links is beneficial for email accessibility, but really benefits all subscribers. it doesn’t require them to read the context surrounding the link, which helps for those who scan emails.

Banishing “click here” links will also move your email content to be more device-independent. “Click here” may make sense for a subscriber using a laptop or desktop, but not for someone using a mobile device or tablet where tapping is required.

Use the ALT attribute correctly

The ALT attribute has been an email best practice since the dawn of HTML emails, owing to email clients blocking images by default. The text used in an ALT attribute attached to an image displays when the image doesn’t load. This helps the subscriber “see” the email if they have images off by default in their email client or if they are using a screen reader to read the email.

To correctly use the ALT attribute, the context of the image must be fully understood in relation to the content surrounding it. First, you need to decide if the image is functional, illustrative, or decorative.

All images require ALT attributes, so a null ALT attribute should be used for images that don’t need to be read by screen readers or represent anything vital to the subscriber.

View your email with all of the images turned off to help you decide which images require the ALT attribute and which ones can have a null attribute.

For a deeper dive into understanding how context informs the use of the ALT attribute for your images, visit WebAim’s page on the ALT attribute

Use role=”presentation” on all presentational tables

In email design, tables are used to hold content as well as structure the email’s design. Tables were never intended to be used for design. But due to restrictions in email clients such as Outlook, email designers have been forced to use the <table> element as a design element.

To help screen readers understand the difference between <table> elements that hold content and those that are purely for design, use add role=”presentation” on each table that holds content the subscriber needs to read. You only need to add it to each <table> element, not every <td>. This avoids forcing a screen reader to read each cell of your tables one at a time and helps the subscriber get straight to the important content.

In addition to role=”presentation”, aria-hidden=”true” is another HTML attribute that can be added to elements in your HTML that are for visual content and should be hidden from screen readers:

<table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

role=”presentation” can also be used on images. It’s recommended to use the HTML attribute role=”presentation” on any image with an empty ALT attribute to avoid the name for the image being read.

Email accessibility in action

Litmus Community members took part in a Community Contest to create an accessible email. The submissions illustrated the small steps that can be taken to open email up to a new audience.

Subscribers of this email will be able to increase the text size through their browser by up to 200% without breaking the design of the email. And it features an animated GIF that stops after three cycles (within five seconds) for those who suffer from photo-sensitive seizures.

Eyal Bitton created an email which uses copy for links that make sense out of context, and Eyal signals the end of the email to blind subscribers by using some hidden text.

Type E’s newsletter uses an interactive progressive enhancement to enable the subscriber to choose from standard or large text size. Email developer Paul Airy has also included an option–driven by an opt-in—where the subscriber can choose to display the email with tinted backgrounds if they suffer from certain disabilities.

These emails illustrate that it only takes a few small steps for emails to be more accessible and potentially reach a wider audience. Many of these steps not only aid accessibility but also help to improve your emails for everyone.

See your emails with images on and off

Want to see how your emails look in 100+ desktop, mobile, and webmail clients, including images-off views? Give Litmus a try, free!

Start testing now →

Ultimate Guide to Email Accessibility This guide has the insights and step-by-step advice you need to write, design, and code emails that can be enjoyed by anyone—regardless of their ability. Download the ebook →

Jaina Mistry

Jaina Mistry is the Director, Brand & Content Marketing at Litmus