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.
10 ways to make your email easy to reach and understand
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.
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.
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.
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.
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”.
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 ;).
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.
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.
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 w3.org 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
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.
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.