How to Create The Perfect Accessible Email for Your Audience [Infographic]

I’m sure we all remember back at the beginning of the year when Beyonce got sued for her website not being ADA compliant.

However, not only do you have to worry about your website but you should also be worrying about your emails. As marketers, we want to make sure we are delivering the best email experience we can to our subscribers.

With more than one billion people in the world living with some form of disability, it’s important to cater to their needs as well. .

It’s about inclusion and making sure you provide everyone who engages with your brand, the best experience possible.  

With the assistance of adaptive technologies, and tools such as screen readers, screen magnifiers, eye tracking systems, and advanced sip-n-puff devices, it’s now possible for these one billion people to not be left out.

So, how can you do your part?

Email Monks created an infographic on how to create the perfect accessible email and included a key to indicate which techniques help you address the different needs people have.

There are three areas to keep in mind when writing, designing, and building out your email when it comes to accessibility:

1. Content Creation
2. Content Styling
3. Content Structure

Let’s dive a little deeper in to each one.

Content Creation

Copy - When it comes to your copy, break it down into sections. Give each section a heading so at a glance, or by listing to a screen reader, your subscribers can quickly understand the message that you’re trying to convey in that section.

Imagery - Use images. Avoid creating animated GIFs that flash repeatedly, as they may trigger photosensitive seizures in some people. Add an alt attribute in each <img> tag, and use words to describe the image.

Buttons - Buttons should selectable across their entire area. Pro-Tip: Build your buttons to a minimum height of 44px. If your email has more than one button, consider writing a different call to action for each one.

Links - Rather than instructing subscribers how to respond to your CTA’s just simplify your calls to action. For Example: update your preferences rather than click here to update your preferences.

Content Styling

White Space - Just like websites let your content breathe, use that whitespace.

Fonts:

• Headlines - Choose a decorative, serif or sans-serif typeface that is easy to read.
• Heading - Choose from serif or sans-serif typeface, to help distinguish your headings from your body copy.
• Body Copy - Choose a sans-serif typeface, avoid using thin or light weights.
• Font-size - Look to make your body copy a readable size, 14px if your font has a large x-height and if it is had standard x-height, make the font-size 16px.
• Line-height - Your line-height should be 1.5x the font-size. For Example: Font-size of 16px should have a line-height of 24px.

Color - Keep color contract between the color of your text and the color background, using a contrast checker, such as WebAim Color Contrast Checker.

Alignment - Stick with the default alignment of left, avoid centering or justifying your text.

Content Structure

Flow - Build your email so it makes sense when you read from top to bottom.

Line Length - Each line of text should be no longer than 60-70 characters. If longer, bring in the width of your columns.

Hierarchy - Use semantic tags (H1-6, P) to markup each piece of content.

Tables - On your structural tables, add role="presentation" inside each opening <table> tag, to prevent screen readers ‘reading’ each cell within your email.

Now I’m sure you are asking yourself how do I test my emails for accessibility. Here are a few tools to help with that.

• WAVE – Web accessibility evaluation tool. These browser extensions can assist you to evaluate and correct issues with your HTML.
• A Checker – This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. You can paste your email HTML directly to it.
• VoiceOver – VoiceOver is unique because it’s not a standalone screen reader. It’s deeply integrated in iOS, macOS and all the built-in apps on Mac.
• Narrator – Narrator is a screen-reading app built into Windows 10.

• TalkBack – TalkBack is the Google screen reader included on Android devices.

Here is the full infographic, on how to create the perfect accessible email.