The Ultimate Guide to Accessible Emails

BY  JAINA MISTRY As email marketers, we strive to deliver the perfect email experience to our subscribers. We make sure our emails are...

BY JAINA MISTRY

As email marketers, we strive to deliver the perfect email experience to our subscribers. We make sure our emails are sent at the right time based on our analytics and that they’re delivered to the inbox by monitoring our deliverability and running spam tests.

We personalize our content to be more relevant and tinker with our design to make sure our emails render perfectly on countless devices and in every email client.

These are all recommended steps to ensure your emails lead to a conversion. However, your emails could be missed by a significant chunk of your subscribers—people with visual, physical, or cognitive and neurological disabilities.

It only takes a few small steps to make your emails more accessible for all of your subscribers. In this post, we’ll discuss what those steps are and how they can make email better for everyone.

WHAT IS ACCESSIBILITY?

Accessibility serves as one of the founding pillars of user experience and design. For email, it means making sure that everyone can receive and understand your message, regardless of any disabilities or assistive devices they may be using.

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.

AS EMAIL DEVELOPERS WE SPEND HOURS GETTING AN EMAIL TO LOOK JUST RIGHT IN A CLIENT WITH LESS THAN 1% MARKET SHARE BUT VERY FEW OF US WILL SPEND A FEW MINUTES MAKING THE EMAIL ACCESSIBLE.
– MARK ROBBINS, REBELMAIL

ACCESSIBILITY IN EMAIL 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.

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 such as JAWS or Window-Eyes.

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 YOUR COPY SPACE TO BREATHE

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

I LIKE BIG BUTTONS AND I CANNOT LIE.
– JUSTINE JORDAN, LITMUS

While Apple’s iPhone Human Interface Guidelines recommends a minimum width and height of 44 pixels for buttons, this number varies depending on the mobile device vendor. An alternative rule of thumb would be using a minimum width and height of 72 pixels as this is the average pixel width of a thumb.

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 all subscribers, as it doesn’t require them to read the context surrounding the link—good for those who routinely scan emails without taking it all in.

It’s not only for accessibility, banishing “click here” links will move your email content to be more device-independent. While “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 the action 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.

Our December 2016 newsletter with the images on and off.

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 YOUR 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; however, 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. Email developer Rémi Parmienter recently discovered some unusual behavior in Chrome for users of VoiceOver—a screen reader application for MacOS. VoiceOver has begun reading file names for images, even if the ALT attribute is present but empty. 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.

ACCESSIBLE EMAILS IN ACTION

WE CAN IMPLEMENT A LEVEL OF ACCESSIBILITY IF WE LOOK BEYOND THE CHALLENGES. FOCUS ON WHAT YOU CAN DO, NOT WHAT YOU CAN’T DO.
– PAUL AIRY, BEYOND THE ENVELOPE

Litmus Community members recently 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.

by Chris

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.

by Eyal Bitton

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.

By Paul Airy

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.

Source