Email Accessibility 101: Designing Email for All

What is email accessibility?

More emails are sent now than ever, with the number of email users expected to grow to 4.2 billion around the world by 2022. Despite so much of our communication moving to the written word, an estimated 1.3 billion people live with some form of vision impairment, including 36 million people living with blindness.

Tech continues to develop to support those with disabilities, but as an email marketer there are several things you should consider to help make your emails more accessible. Ultimately, you want your email design to be easy to digest for as many people as possible, from both an ecommerce and values perspective.

Your steps to accessibility

Use heading elements in code

Most template builders will use these automatically, in which case you can skip this part - you’re already ahead of the game! But if you’re building or editing your email code from scratch, you should use <p> and <h> tags, which are supported in every email client. These will allow screen reading devices to determine hierarchy in your copy, distinguishing between header and body text.

Use a logical reading structure

Because emails are built using tables, you have to be careful about how screen readers will interpret columns and other data, particularly when the layout shifts for mobile screens. If you’re using side-to-side columns, make sure they stack in the correct order on mobile - if you want to avoid this concern altogether, you can use a single column format throughout.

Either way, information should be read from left to right and then top to bottom, like in the example from Evernote below.

Have clear focus and avoid visual clutter

Negative space is your friend! Clustered content can be hard for some subscribers to take in, both visually and cognitively. Give your text, images, and CTAs a little room to breathe and consider paring down the overall number of elements in your email to focus on what really matters. Sometimes less is more, like in this email from Mejuri.

Use live text

Some fonts may default to web safe fonts (like Arial and Verdana) if they aren’t supported by your subscribers’ email clients. It can be tempting to use your brand’s favorite fonts in images of text rather than using live text so you have more control over the layout and overall appearance, but these images can’t be interpreted by screen readers. Live text also maintains its size on mobile devices where images shrink, making it the better option for overall readability.

Still not convinced? If you must use images as text, make sure you also include that copy in your alt text (more on that below).

Choose your fonts carefully

For easy reading, limit your text to one to three fonts, maintaining consistency in how they’re used throughout (e.g. use the same font for all headers). This reduces the cognitive load for subscribers and keep the focus on your message rather than its delivery.

Email experts recommend using a minimum 14px font size - this will help ensure your copy is large enough for subscribers with varying levels of vision and to be read clearly on mobile devices. Avoid fonts with embellishments and other intricate details, as these can be difficult to read for subscribers with dyslexia or visual impairments.

Avoid centering text

Center-justified text can be hard to read for subscribers with dyslexia, so keep your copy aligned to the left whenever possible. If you do want to use some centered text, we recommend keeping those pieces short and punchy, used as more of an accent.

Say what you mean

Use clear subject lines and calls-to-action so readers know what to expect! Subscribers rely on these elements to indicate whether they should open an email or click a button, even more so for those with visual impairments. When using links, make sure the hyperlinked text meaningfully describes what’s on the other side. You want to keep your emails engaging, but don’t employ a bait-and-switch to do so (these can also harm brand trust).

Related: Tips for Crafting CTAs that Drive Clicks

Use alt text for images

Alternative text is what readers see before images load, or if they fail to load. Using alt text ensures that any information shown through images will still get through to the reader even if the image can’t be seen. Screen readers will read alt text as part of the email so your message will still get across to subscribers with visual impairments.

Most ESPs will give you a place to include alt text with your images in their template builders, including Hive. If you’re writing your own code, you can use the alt attribute (alt=” ”).

Contrast those colors

Using contrasting colors in your email design is a great way to draw attention to a point of focus, like a CTA or important message. Above all else, contrast between your text and its background ensures your email will be legible, particularly for those that experience color blindness.

But don’t rely exclusively on color to indicate features like links! If a reader can’t see that color, your message will be lost - even just underlining your text avoids this issue.

The bottom line

Always consider how your email will look from different perspectives. Ask your mom to look at it. Send it to your second grade teacher. Or you can just read it on mobile and from a distance, check your color contrast, and test how it looks on different screens.

Using these few steps will help make your emails accessible so you can reach more customers - following basic design fundamentals will keep your campaigns more readable and engaging overall. And ultimately? It shows that you care.