— September 6, 2019
3 Areas to focus on, to make your emails more accessible to all
We have, for a long time, ensured that our emails read well. We check if they render correctly, display in all email clients, have a fall back image (should there be interactivity or animation), all while trying to be innovative and creative.
One thing we haven’t always considered is whether everyone can read the emails we send. Our emails need to readable for people with impaired vision, color blindness, dyslexia and even epilepsy.
The World Health Organization says that 217 million people around the world are visually impaired.
Enter email accessibility
The good news is that we have already been following a lot of this logic when designing our emails. Many of the guidelines we follow, fit into what makes it easier for us to read, in general. So, with a few updates, emails can be easily readable by all customers – making for a better experience all round.
There are three main areas to think about when it comes to email accessibility:
- CONTENT – how well it reads and how easily it is understood
- DESIGN – Layout accounts for a large part of how accessible our emails are, including colors and fonts used, as well as whether the design scales for different screen sizes
- CODING – understanding how an email is read using a screen reader would definitely change the way we code – from ensuring alternate text is used on all images, to limiting the animation on gifs to a single loop.
Here’s the low-down on each of those areas…
- Subject lines
Short and to the point is the aim here. It’s important not to have customers guessing the content. Shorter subject lines help on smaller screens, where all the information can be contained without being truncated.
A blob of text on a page is difficult to read. Giving paragraphs room to breathe – white space above and below – is key in aiding the scanning of an email.
- Easy to understand
Make your email easier to read. Keep sentences short and use simpler language. Having the goal of keeping your copy more to the point,will help in creating understandable content.
- Use white space
Creating breathing room around copy makes it easier to read. White space around paragraphs, bulleted copy and images makes skim reading easier too.
- Use of color
Try not rely on color in your email to convey a message. Consider how different people perceive that color – particularly those who are colorblind.
Make sure there is enough contrast between the text and background color of your call to action buttons. Light on dark or dark on light, works best to make it easy to read.
- Font size
Increase the font size of your email copy to 14pt (at least). Smaller fonts make it difficult to read on some screens.
Make links prominent and easy to click. Stick to underlining the words to differentiate them distinctly from text, and use content that describes the action, such as ‘read on’ or ‘get your voucher’ rather than ‘click here’.
- Left align text and bullets
When text is left aligned, it is easier to read. So are left aligned bulleted points. Stay away from justified text or centering any listed content.
- Balance images with text
Balance your message between text and images. This is important for screen readers, and consider the fact that text in an image doesn’t scale to fit on different screens
3. Coding considerations
- Animated gifs
If you’re including animation in images, don’t let them loop more than once and avoid flashing in those images, as it could cause seizures for those that are photosensitive.
- Logical reading order
Having a logical flow in your content (left to right and top to bottom). It not only makes an email easier to read for those with dyslexia, but it makes sense of the email for anyone using a screen reader.
- Alt text
This refers to the text displayed behind an image and what a person sees without images turned on or what the screen reader will read. Ensure that this text captures the message being conveyed in the image.
These are just 3 of the areas you can improve with coding changes. There are many more changes that can be made to enhance the readability of emails.
Some guides on this include:
- Email on Acid: https://www.emailonacid.com/blog/article/email-development/email-accessibilty-in-2017/
- Litmus: https://litmus.com/blog/ultimate-guide-accessible-emails
Test your emails
- Test emails both with images on and off, to see how readable your email is
- Try skim read the email in a few seconds. Do you get the gist of what is being said?
- Test the code in a tool like http://www.accessible-email.org/, which will give you the exact areas you need to fix in your email.