The world is a big, diverse place with people from many different backgrounds. As we design and build products or services for users, it is critical that we be inclusive of everyone. Just to give you a sense for the amount of diversity across the world, the World Health Organization estimates about 1.3 billion people are living with some sort of visual impairment.
With numbers like that, you can quickly see how important it is to consider how we can start taking steps to ensure we’re designing emails that anyone can interpret and understand. The good part is, the tips suggested in this post are straightforward and easy to make part of your design process.
From Mozilla’s MDN, “Accessibility is the practice of making your websites usable by as many people as possible.” This not only means we are designing for people with disabilities, but also those who may be using different devices, or those with slower internet connections.
Let’s go over a few accessibility considerations when designing our email templates. It’s important to keep an open mind and remember that accessibility is not a barrier to creativity, but simply a set of constraints we can follow to be inclusive of all of our users. I’ll cover three key tenets of accessibility design in this post since we are primarily focusing on email design.
1. Don’t use color as the only visual means of conveying information
2. Ensure sufficient contrast
3. Provide equivalent alternatives to visual content
This is the most common thing I notice across the web. As designers, we tend to rely on color a bit too much for aesthetics. It’s important to remember that by doing so, we may be excluding a portion of users who simply cannot see it.
It could be due to a color blindness, or simply the color was just too light to be easily read. You’d be surprised how differently colors can render across various devices and monitors. That light gray might look good on your computer, but it may be very light and unreadable on others.
Consider the use case of a system status email. You might have designed a colored dot that is intended to convey the system status. Without an accompanying label that specifically states the status, a user with disabilities may not be able to differentiate between just the green/yellow/red colors.
When it comes to text, the recommended contrast ratio is 4.5:1 or greater. I know you might be thinking, well, how do I know the contrast ratio as I’m working through my design?
Never fear, there are plenty of tools out there you can use as you work through your design. I highly recommend Contrast, a macOS app that lets you quickly analyze color contrast ratios.
Consider our use case of an email template. If a recipient of our email is blind, and our email contains a lot of images with text embedded in them, the recipient may be missing out on a large portion of our content. Typically, screen readers rely on additional information in the form of alternative text to help users understand the context of images.
Example of alt text in images
Another reason it’s important to use alternative text in your email images is that email clients can automatically block images from loading. It can also be helpful when that user has an unstable connection and images are loading slower than expected. If your image has alt text, the user can see that text and better understand the image that should have loaded there. It’s also possible to style your alt text, in the case your image doesn’t load, you can still make the experience look a bit nicer.
We’ve covered some important aspects of accessibility design in this post, but have only scratched the surface. There are many other facets of accessibility design on the web and how as designers we can make our work more inclusive to everyone. If you’re interested in learning more, I’d suggest reading through the Web Content Accessibility Guidelines (WCAG) 2.1.
