10 Tips on Accessible Email

Sonya Trachsel
Software Engineer
Accessibility for everyone!

My world is accessible. Things are easy for me to reach, I can speak up when I want to get a point across, and I can understand what people around me say. It wasn’t always like that.

Until about 5 years ago I didn’t speak English well, so in order to watch an inspiring 20 minute TED talk, I had to translate almost every word with a dictionary. 20 minutes would turn into 2 hours. Lucky for me it was a nearly easy fix. With hard work, determination, Skype talks with strangers, and hours of watching the sitcom Friends, I can now understand and be understood.
For me it was just a matter of time; for some, communication is a lifelong challenge. Even in 2016, technology is not completely accessible, and it’s up to us—creatives—to make it better. It shouldn’t be an option anymore, as we need to help users access the information even if they have a difficulty. When we develop an email or design a website, our goal is to reach as many users as we can. Then why not think of everyone?

10 ways to make your email easy to reach and understand

Stuff your brain with knowledge as often as possible.

1. Learn every day

The first step is to do your research. Then educate others. There are multiple resources at your disposal, but the best guidelines are described on the W3 website. It’s good to be aligned on accessibility with other disciplines, as content and design both inform the development.

Implement a clear hierarchy for what you want to communicate.

2. Lay it out

It would be tough to read a fairy tale if it started with “And they lived long happily after” and ended with “Once upon a time.” Content hierarchy in email is as important as in a book. Begin with the pre-header, introduction and hero image to make your email easy to scan and draw attention to what’s important. It’s smart for both marketing and accessibility purposes—if you pick the simplest and the most relevant content for your email marketing campaign, you’ll guarantee that a potential customer won’t struggle to understand what you are trying to say, and therefore it won’t be a reason for them to close the email before taking further action.

Plain text is underrated. Use it.

3. Write it up

Plain text is what email historically is about—sending a message with plain letters and numbers, same as 20 years ago. But the marketing industry quickly changed that. All those “what if we do this?” ideas turned email into an incredible platform for promoting a product or idea. Technology has made so much possible that sometimes we forget the most simple and necessary form. There are multiple reasons for that, but if you want your email not to end up in the spam box or be accessible in case html doesn’t work in a browser, plain text email must be a part of your send. Want to learn more? Check out this Litmus post on plain text email.

Always check your image resolutions!

4. Find an ALTernative.

In email marketing, we often rely on images. But what if the images won’t show up for some reason? This is when the phrase “an image speaks a thousand words” becomes irrelevant. We can go an alternative route and add an ALT tag. These days you can even style your alt tags to make them cohesive with the overall design. Describe your image within the tag, send yourself a test and turn off the images within the browser. Did it make sense when you saw your email? If yes, then you’re on the right track.

*Did you know that a spacer image should also have an alt tag?

Include alt=”” (null) to your spacer image so a screenreader knows not to read it. Some developers use alt=”spacer image”. A screenreader would say, “Image, spacer image”. Doesn’t sound like fun, right? Other web and email developers simply leave out the ALT attribute for spacer images (and maybe even regular images). In this case, most screenreaders will read out the filename, so a user would hear something like “spacerimage.jpg”.

Buttons should be coded. Don't use images as buttons.

5. Code it whenever you can.

Speaking of images: we know it’s easy to use images for CTA buttons. Perhaps the font of our choice doesn’t always work in Outlook or design doesn’t render well in all email clients. But with tools like bulletproof buttons, you can now create a fully-coded button with a few clicks. Customers who have their images disabled will appreciate the thought and will take an action on that call of yours ;).

Some people can't see all the colors in the rainbow. Make sure your designs have enough contrast for them!

6. Mind your colors.

Blindness and other degrees of vision impairment are very common, so sufficient contrast between text and background colors is a must. Protanopia (red-green color blindness) is the most common type of color blindness. If you use these colors together you might lose audience as some users won’t have a good experience. To avoid common color design mistakes, it’s important to test your email with a color blindness simulator. We suggest uploading your design image here, test with the Adobe Photoshop tool, or send an email test directly to Litmus where you can check your email with the built-in color-blind filter.

Make sure your type weights and sizes coincide with your hierarchy and support legibility.

7. Balance the proportions

Nowadays there are thousands of fonts and font variations that could potentially be used in web, but not in email. Outlook, for instance, can only display fonts that are already installed on your subscriber’s computer. As frustrating as it can be for accessibility purposes, these limits might be a good thing. To make your message accessible, your font should be easy to read, so sans-serif fonts (such as Arial, Helvetica, or Verdana) are more legible on screens. If you want to get creative and incorporate more complex typography, make sure to mind the size of your text. Your minimum font size should be 12px. Don’t go too small or too big, and be intentional about the use of italic and bold styling. As you know, balance is the key.

Be intentional with your links.

8. Link with a meaning

A call-to-action has a purpose that prompts your visitors, leads, and customers to take action. If I ask you for a direction and you tell me simply to go “there” I may get lost on the way. Your customers will be more likely to click on the CTA if it’s precise and clear where they’ll end up. According to the website, the best way to call a customer to action is to do the following:

  • explain what the link offers
  • avoid talking about mechanics
  • do not use a verb phrase

Please don't hurt my eyes with flashing gifs that are too fast. It's distracting and painful!

9. Don’t be too flashy

Whenever developers attach a gif or animation to the webpage, they have to ensure that users can select a mode where animation is deactivated for accessibility purposes. Content flashing rates between 2 Hz and 55 Hz can harm users with photo-sensitive epilepsy. Additionally, users who are visually impaired may not have time to review content that is animated before it changes. Since we can’t provide a dynamic option to disable an animation in email, we can ensure that GIF content and design changes at a comfortable speed.

Finally, animated GIF file size can significantly increase the loading time, which can potentially frustrate the audience and lose subscribers, especially those who rely on mobile. So make sure to test your images for loading time and file size before including them in your email.

Alt text is super important for those times when your images don't display or can't be seen.

10. Take Time to listen

Lastly it’s time to take your customer’s journey yourself. Open an email, put on your headphones, turn on the screenreader and close your eyes. What do you hear? If you’ve never seen this email before, would you be able to understand what it is about? Would you be able to locate CTAs if needed? What about the unsubscribe button? This is the best way to make sure all your text and image ALT tags are in place and that your story is easy to understand without having to see it.

Do we have to have a disability in order to understand accessibility?

My take on this is that true empathy comes often not through personal experience, but through the willingness to understand someone else’s perspective and take a real effort to address the problem. If you want an idea on how to bring awareness to your workplace, a good idea is to create an accessibility checklist for your team that you can use for future projects. Refer your teammates to this accessibility guide and encourage them to keep it updated with their new finds and discoveries. A collaborative approach will keep everyone aligned on the mutual passion and will help everyone to be a part of this change.
What have you learned about making your email or website more accessible? Do you find any issues or constraints? How is this initiative supported at your workplace?

Tweet me @sonyatrachsel or directly @eroi as we’d love to engage with you in this important conversation.

Sonya Trachsel
Sonya Trachsel, Software Engineer at eROI.