Accessible Design for Vision Impairments

How to Create Accessible Emails

September 4, 2018

It’s important that everyone can read your email, regardless of any disabilities or assistive devices that they are using. A few small changes can make your emails more accessible for your subscribers. If you’re not sure where to start, here are some helpful guidelines to follow.

Color Contrast

It’s important to provide enough contrast between the text and the background, so that it is easily readable by your subscribers, including those with vision disabilities. Today you can use online tools to help take the guesswork out of making sure your text is easy to read on top of a colored background. For example, Web Accessibility in Mind (WebAIM) has a free color contrast checker, where you can compare two different colors to see if they provide an appropriate contrast ratio.

Providing appropriate color contrast is also important for colorblind subscribers. While it is hard to know exactly how someone with color blindness will see your email, it’s recommended that you use colors on opposite ends of the color spectrum. It’s also important not to make your design rely solely on color. For example, if your links are highlighted with a bright color, then make sure they are underlined as well. This way, even if someone can’t see the color of the link, they will still know it’s a link due to the underlined style.

Font Size & Spacing

We recommend using font that is larger than 14px for easy readability. The line-height between text should also be at least 120% of the font size. This means that if you use 14px font, you should have a line-height of at least 17px.

It’s also important to add space between paragraphs and in the horizontal margins. Not only does this make it easier to scan through content quickly, it also makes the text easier to read for those with visual impairments.

Call to Action Links

In addition to making links have cues that do not rely on color, it’s important that the links are big enough to easily be clicked. When a subscriber uses a phone to view your email, the buttons have to be big enough to be pressed with a thumb. In addition, making buttons and links larger helps those who have trouble precisely moving a mouse. Apple suggests a minimum of 44px width and 44px height for links. The average thumb size is 72px, so you may want to make your buttons at least 72px wide and 72px high, at least on mobile.

The text in your CTA links and buttons should also contain descriptive copy. Someone using a screen reader might have trouble knowing where “click here” goes, and avoid following the link. However, if you used descriptive text like “read more about email marketing,” then they would know where that link would go.

Animated & Flashing Images

If you insert animated GIFs or videos into your emails, please be mindful of those who are susceptible to photo-sensitive seizures. The Web Content Accessibility Guidelines recommend that you should avoid content that flashes more than three times in any one second period. If you are unsure if your content flashes too quickly, you can also use the free Photosensitive Epilepsy Analysis Tool to test your content.

Design for Screen Readers

While people with sight can visually scan emails, blind users sometimes have to listen to the entire email from top to bottom. Therefore, edit your email content so you aren’t including irrelevant material. Also, it’s important to use the appropriate HTML tags for headers and paragraphs of text. Some screen readers allow users to “scan” the email by headers, or content placed in tags like <h1>, <h2>, <h3>, etc. So place your titles in these header tags, instead of only making the font size larger.

Many email designs also use table elements, for consistent rendering in email clients. If your email uses a table structure, you can add an HTML property to the table to indicate if the screen reader should read the content or skip over it. For each table that has content that the screen reader should read, add the following property: <table role=”presentation” …>.

Finally, be careful of using all CAPS. Using all capital letters can be read incorrectly by screen readers (and may make your email more likely to be marked as SPAM).

We hope these 5 tips help give you helpful framework to make your next email more accessible to all of your audience.