10 steps to more accessible email

Getting started with accessibility means rethinking many parts of your email templates and how you manage your email creation process. They also have a bonus: The time you invest now in making your emails more accessible will give all of your readers a better email experience.

At RPE Origin, we are all in on making email more accessible for everyone, regardless of visual, cognitive or physical challenges. We created these resources to help you get up to speed quickly:

• Free guide: ADA Inclusive Email Marketing: The Hidden Benefits of Inclusive Design.
• Blog post: “Email accessibility means email for everyone“)
• Blog post: “Email for everyone: How RPE Origin makes accessibility work”

In this post, we’ll outline 10 steps you can take now to create more accessible emails. They might require some time to incorporate into all of your templates, but you can begin by redesigning your most important messages first.

None of these will require significant investment beyond the time it takes to revise your templates and test the changes. Your email developers and designers likely already have the skills to achieve many of these changes.

1. Semantic HTML tags
2. Descriptive alt text
3. No image-only emails
4. Color contrast
5. Accessible fonts
6. Legible font size and line height
7. Descriptive clickable links
8. Correct role attribute for tables
9. Regular QA testing across browsers, devices, and email clients
10. Training in email development and design

Now for the details:

1. Semantic HTML tags: For ADA compliance, you have to use semantic HTML tags, like the H1 tag, which indicates what your email header or most important information is. A screen reader will see that code and interpret it as an important line.
2. Descriptive alt text: Adding text in alt tags and body copy that isn’t embedded in images will help. It’s easy and quick to string a bunch of images together, but that’s like wallpapering over a moldy wall or spray-painting a rusty car. It looks nice, but you haven’t solved the problem.

   What you write in alt text is important, too. When you listen to a screen reader going over your email, you might hear what I discovered in another agency email a client sent us. All we could hear was “Click to display image,” “click to view real-time content,” “click to display images,” and “click to view real-time content.” That was it, over and over. So embarrassing! (Listen to it here.) With descriptive alt text, you could use “Here is a picture of our new credit card.” Or you could put the offer details there.

3. No image-only emails: Large companies often have their entire email as one big image or several images with text embedded in the images. The only text you can read with images off is the block of legal text in the email footer. You can’t see the offer or the call to action buttons. No disclaimers, no descriptive copy, nothing.

   People who don’t know about enabling images will see it as broken and delete it or mark it as spam. Or they might think it’s a phishing attempt. When that broken email comes from a well-known brand, especially from a bank, credit card company, or healthcare service, it erodes their trust and credibility. The email looks pretty, but it doesn’t work.

4. Color contrast: Some colors don’t work well together, such as a light green font on a light blue background, or electric red on a bright green background. Someone with low vision or a colorblind person wouldn’t be able to distinguish those colors, or they might see them as a big blank. So, you need high contrast with appropriate colors. With text on a colored background, you should have a contract ratio of 4 to 1 or 4.5 to 1.
5. Accessible fonts: Many brands will use specific or custom fonts. Subscribers who don’t have those fonts downloaded on their devices will default to something else that might not be easy to read or decipherable by a screen reader.
6. Legible font size and line height: The size can’t be too small, like 6 points or less. A lot of disclaimer or email footer copy is this size. The problem is that something legally required, like an unsubscribe link, might be hard to find, especially if it’s in a low-contrast color. You also need enough space between lines to make the copy readable, such as 4 pixels plus the point size for the font. A 14-point or 16-point font size is a good minimum, especially on mobile devices, then the line height will be 18 to 20 pixels.
7. Descriptive clickable links: You can underline links for clarity because we all know what an underlined link means in an email. Further, don’t underline copy that isn’t a link. Use focus indicators like a different link color (see No. 3 above for color-contrast tips). Also, describe what will happen when someone clicks your link. Don’t say “Click here.” Say “Download our whitepaper” or “Sign up for e-billing.”
8. Correct role attributes for tables: Most emails are based on tables. They’re like big, fancy Excel spreadsheets. It’s a reliable way to get around the many restrictions of email design. When you use a table layout to accommodate a screen reader or other assistive devices, you have to ensure it has the right role attributes. So you code the email with “role = presentation.” This tells the screen reader not to read attributes like “table,” “table column,” “row 1” and so on. It’s like stage directions in a script, where the actor reads the dialogue but not ‘[Exit, stage left].’ Unless you’re Yogi Bear.
9. Regular QA testing across browsers, devices, and email clients: Having a designer, whether on your in-house team or with an agency, that does this as part of the QA process is very important. Most people won’t check on mobile devices or on an email client other than Outlook. You have to be sure the email works correctly on iPhones and Android devices, in dark and light modes, when copy blocks are resized and rearranged on mobile and equally readable on mobile and desktop.
10.  Training in email development and design: Many people who design for the web also do email design. But email design has significant differences. It’s like doctors and dentists. They’re both medical people, but you wouldn’t want your dentist taking out your appendix. Email brings in a lot of money, but marketing budgets allocate few resources and often treat email as an afterthought. Investing in email design training, or working with outside experts who understand the nuances of email design, accessibility, and usability can make your email more valuable for the company and customers alike.

How RPE Origin designs for accessibility

We work to make sure every email we touch, whether it’s a design we created or one that comes from another agency on behalf of one of our clients, is coded correctly and as accessible as we can make it.

This can be a big challenge because many of the emails we receive from other agencies are broken. We can tell the designers aren’t familiar with good email design practices. So we will have to spend time correcting their errors, especially on emails that have to be resized and restacked as screen sizes shift.

We won’t design any email that we can’t hand-code for accuracy. We know what works and what doesn’t. And, we know what our clients need to make their emails as accessible as possible.

Wrapping up and next steps

Be sure to download our new guide, ADA Inclusive Email Marketing: The Hidden Benefits of Inclusive Design, to learn more about how to make your emails more accessible to readers of all abilities.

While you’re at it, share this post with your design team. And if you need help, feel free to contact us and discover how our services can help you get even greater value from your email marketing program.