Accessibility in Email Design: How to Execute it Right
There are 253 million people with visual impairment while 300 million colorblind people. You must take them into consideration while designing any email. It is quite likely that they are taking the help of screen readers, eye tracking systems, screen magnifiers, sip n puff devices, and other adaptive technologies.
To cater to all these subscribers who might be using such tools, designing accessible emails is inevitable. So, let’s get a hang of all the tips you can use to create accessible emails.
1. Make use of the <title> tag properly
You must set the <title> tag of the email without fail. This is necessary because:
- For subscribers accessing your email on a browser, the webpage tab will get a title through the <title> tag.
- If the subscribers are using screen readers, the title will make the email more relevant.
See the HTML code below to understand how you can use title tag in emails.
2. Do not forget to add HTML language attribute in the email code
If you are a global business with several branches in different countries, you might have to send emails in different languages according to their geographical location. For instance: Your subscribers in the Netherlands would prefer to receive emails in the Dutch language while people in Canada would like to read emails in English or French.
In order to inform the screen readers about the right pronunciation, you should always set the language attribute by using lang=””. By doing so, the devices and email clients will understand how to write the words.
Check out w3schools to get the list of language codes. Here’s how the code will look like.
3. Add semantic codes in the email
Semantic codes facilitate better comprehension of the emails as screen readers can clearly figure out the paragraphs and headings. Use <H1> and <P> tags so that the screen readers can convey the message of the email without any confusion.
You must maintain proper visual hierarchy and logical reading order in the emails. Regardless of the devices the subscribers are accessing your emails from, they must be able to read the content in a proper flow. This becomes particularly important for people with cognitive disabilities and users taking the help of screen readers. It will facilitate quick consumption of the content.
See this email by Survey Monkey wherein they have placed limited content and relevant visuals with plenty of white space. The CTAs are perfectly in contrast with the white background.
4. Make sure your font size is at least 14px
If your email has tiny fonts, your subscribers will find it hard to read and not engage with it. Therefore, you must ensure that your emails are easily readable. Keep 14px as the minimum font size. Also, keep the size to 16px in case you are using a light font face like Montserrat.
5. Avoid center-aligned email copy
It can be daunting for a dyslexic patient to read center-aligned email copies. Of course, it looks more visually aesthetic but it can make the email inaccessible for certain subscribers. It is advisable to have a left-aligned copy with a properly sized font face.
6. Do not add flashy GIFs
Many marketers add flashy images or animations with too bright colors. That is not recommended according to the principles of accessibility. GIFs flashing at the rate of 2 Hz to 55 Hz can worsen photosensitive epilepsy leading to seizures. Therefore, you must design GIFs that end after three cycles or within five seconds. See to it that the frames in your GIFs transition smoothly and do not have a high animation rate.
7. Have a suitable alt-text for the email visuals
Screen readers will not be able to understand what the images are trying to convey. Hence, you must add a relevant alt-text that describes what the image is about. As a result, it will render the email readable and accessible even if the email clients block the images by default. If an image is placed only for its visual impact, add an empty alt=“” on the image. Screen readers will not consider such visuals.
8. Pick an appropriate contrast ratio
Imagine blue text on a purple background. It will be nearly impossible to read it, right? Now, take a look at the text block below. Very easy and convenient to read, isn’t it?
Always follow WCAG guidelines and maintain 4.5:1 as the minimum contrast ratio. This can be modified to 3:1 for a font size of 23 px or bold fonts larger than 18 px. Follow the thumb rule of arranging dark text on light backgrounds and light text on dark backgrounds to enhance the readability of the content.
9. Create a text-only version for all your HTML emails
A plain text email can be of great value if the subscriber is using a screen reader. Therefore, make it a point that all your HTML emails are accompanied by a text-only option.
10. Space your email elements properly
A cluttered email is the biggest turn-off for any subscriber. You must have ample white space in your email so that it becomes easy to skim through or read. Your subscribers will get enough breathing space to consume your content properly. Add padding to your tables and visual elements with proper line heights and spacing in the text.
Wrapping Up
Whenever you are designing and coding your emails, you must always take into account these accessibility principles. It will not only help you to reach out to a larger audience but also impart a pleasant experience to them. This will, in turn, contribute to a higher ROI and better conversions.
The Author
Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free responsive HTML email templates in addition to providing email automation, campaign management, and data integration & migration services. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.