Addressing Accessibility – Relationship One

When most people think of accessibility online, they think of websites first. But what about email? It’s an online form of communication too, using most of the same technologies as the web, yet email accessibility is often overlooked, even though it’s just as important as the web. By making some minor changes, and keeping some basic principles in mind, you can help ensure that everyone in your audience can receive and enjoy your email content just as much as your web content.

This is A Big Topic, so get comfy. Ready?

What is accessibility?

Accessibility, in this context, refers to “the design of products, services, or environments so as to be usable by people with disabilities.” This is meant to ensure that people with disabilities have access to something via both direct and indirect means; the latter meaning through assistive technology, such as a screen reader.

Why is it important?

Making sure that your message is received by everyone in your audience should be the key goal of your email marketing campaigns, right? You spend hours of effort and considerable amounts of budget to refine your message, make sure your images are just right, hone your mailing lists to the right target group, and so on. However, if you ignore accessibility concerns, all that effort is likely wasted for a segment of your audience.

Some figures to drive home the scale of why this is important:

Visual impairments aren’t the only thing that can affect accessibility either; cognitive impairments should be considered as well. For example, it has been estimated that 5–10% of the population has dyslexia, which can also affect your ability to communicate effectively to your audience.

That’s a considerable amount of people that might be left out if you don’t take accessibility into consideration in your email communications.

Other important considerations — you know, aside from doing the right thing for your users — are of a more legal nature. Failure to comply with accessibility laws can result in governmental actions or legal issues, and no one wants either of those things.

All that said, making your content accessible benefits everyone, not just those that are differently abled. When you make your content accessible, you’re making it more usable too. So, how do you go about doing that?

Some Best Practices to Follow

Best practices for accessibility come in several forms; today, we will consider styling and accessibility as well as optimizations to the underlying HTML code.

Styling for accessibility

Use of color and contrast

Often, designers will rely heavily on color and contrast to get a certain message across. While that may work well for some audiences, it may not work so well for others who have color blindness or other visual difficulties. The Web Content Accessibility Guidelines (WCAG) standards require a contrast ratio of at least 4.5:1 for standard-sized text, and 3:1 for text larger than 23px, or bold text larger than 18px in size. To put this into context, black text on a black background would have a contrast ratio of 1:1, while black text on a white background could register as 21:1. A good rule of thumb would be to make sure that critical content appears in only one color that strongly contrasts with its background; the user will still get the message.

You can check for contrast using a variety of WCAG contrast checker sites online (I have one listed at the end of this article). Some testing services, like Litmus or Email on Acid, offer forms of color blindness checking to assist you with making accessible color choices in your emails as well.

What about dark mode?

Dark mode and accessibility don’t always play nicely together; you will need to test your emails in multiple clients to determine if it’s going to affect your accessibility from a color contrast perspective. Again, testing services can help here.

Mind your fonts

Fonts and font sizes matter

The choice of font is important. Choose one that has good spacing, isn’t visually dense, and is easily readable; the simpler, the better. Don’t go crazy.

As far as sizing is concerned, the minimum recommended size for standard text is 14px on a desktop or laptop screen. However, on mobile devices, it would be wise to consider a minimum size of 16px. If you’re using a font with a lighter weight, it might be wise to consider an even larger font size; here’s where user testing comes into play. Make use of CSS media queries to differentiate styling between desktop and smaller devices.

Spacing matters too

Similarly, there needs to be appropriate line spacing as well to promote legibility. Recommendations usually state that line height should be at least 4px larger than your font size but play around with it and see what makes the most sense for your layout. Don’t forget to increase the line height on mobile devices; you can use em’s instead of pixels here to make the email client do the math for you, and again, use media queries.

Don’t cram your other elements together. Be sure to include white space around your blocks of text and other elements so that it’s easy for your users to tell where one stops and the next starts.

Simple layouts are better

Your content should display in an order that’s logical and easy to follow, no matter what device the user is using. It’s important to keep in mind that screen readers will read content from left-to-right, and top-to-bottom; because of this, single-column layouts work very well from an accessibility standpoint. They’re also great for responsive design considerations too, as you don’t have to contend with your content potentially shifting or stacking into an unintended order. If you must use a multi-column or stacking layout, be sure to test to make sure that your message isn’t being muddled by being presented out of order.

Don’t forget the plain-text version

If your ESP or MAP supports it, always include a plain-text version of the email; many people who use screen readers prefer them since they strip out all the fancy stuff that they would have to sit and listen through otherwise. Sometimes automatically generated plain-text emails include spurious text from other elements, so be sure to review them to make sure that they’ve been generated correctly and convey your desired message.

Writing accessible content

It’s one thing to make sure that content is legible, but it’s also important to make sure that it’s easily understandable too. Here are some common best practices that not only make sense for general email use cases, but they apply to accessibility too.

Subject lines are extremely important

Remember, the first experience your users will have with your email is the subject line. Because of this, it’s crucial that it’s brief, descriptive, and meaningful, especially if the user is relying on something like a screen reader. Of course, good subject lines are beneficial outside of accessibility concerns too, since a good one tends to increase engagement.

Make your content readable

Now that the user has opened the email, they must be able to understand it. Making sure that your content is easily understood is another component of accessibility. Stay away from using a lot of technical jargon and acronyms, unless you know that your audience will readily understand them. This article from Litmus dives a little further into what it means to “write email copy like a human”.

Don’t use all-image emails

If the user has images blocked, or is using a screen reader, they’re not going to see any content present in your email if it is solely image based (except for any alt text that’s included which we’ll talk about shortly). This is one of the reasons that we never recommend having an email’s call-to-action being an image, but from an accessibility standpoint, it’s also detrimental to getting your message across. Just don’t do it.

No flashes, please

Since some users may be sensitive to flashing lights or content, avoid use of animated GIFs or links to content that may cause seizures. You never know what unintended effects may occur, so it’s best to keep it safe.

Make your linked text meaningful

When linking text, make sure that it tells the user what they’re clicking or tapping on. “Click here” doesn’t cut it.

Getting the code right

Now that we’ve talked about styling and content considerations, let’s dive into the weeds and talk accessibility from a coding perspective.

What language is that?

Remember to set the language attribute in the HTML of your email. This tells a screen reader how to pronounce the content, and if your users are on web mail, their browser might also offer translation capabilities.

Your tables need a role

Since basic email structure still relies on late-90’s-style HTML tables (thanks, Outlook), it can be difficult for a screen reader to distinguish a table used for layout from a table used for data. To help combat this confusion, be sure to add a role=”presentation” attribute to your table element; this tells the screen reader the table is there purely for layout purposes and can be ignored. You can also add an aria-hidden=”true” attribute as well; learn more about ARIA in this guide from the W3C.

Your buttons need a role too

If an element is intended to be a button in your email, you should also add a role=”button” attribute to it; that tells the screen reader that it’s an element that can be interacted with.

Use semantic elements, like headers and paragraphs

While it can be tempting to use styled “normal” text for things like headings and subheadings, this doesn’t help someone using assistive technology to navigate your email. Screen readers depend on having elements like headings and tables used to be able to correctly interpret the structural hierarchy of your online communications; without them, it can be difficult for users to navigate and find what they’re looking for. Be sure to use proper HTML headings — e.g., <h1>, <h2>, <h3> — whenever you need to have a heading. And for normal text, be sure to use the paragraph (<p>) tag as well. Other semantic elements, like <article>, <section>, and <summary> can also be used to better help users navigate through your content. MDN has a great page on HTML and accessibility that can be applied to the web as a whole, not just email.

Remember the alt attribute?

We all know about the alt, that attribute on an <img> tag that displays text in the place of an image if it doesn’t load… but have we been doing them correctly?

For them to be correctly used, the text in an alt attribute should provide both the content of the image as well as its context in relation to surrounding content. If the image is something that isn’t crucial to the reader or doesn’t need to be interpreted by a screen reader, you can use an empty (alt=””) attribute (but don’t omit it, because alt is a required attribute on all images). In these cases, you should also include a role=”presentation” attribute on the image as well to avoid potentially bizarre behavior in some assistive technologies.

Additional information about the proper use of the alt attribute can be found on the WebAIM website.

Okay, what’s next?

So, we’ve covered some things to keep in mind about why accessibility is important, and some basic accessibility best practice recommendations for your emails. Once you’ve put them into practice, what’s the next step?

First, and most importantly, be sure to test your emails, not just with tools, but with real people. If you know someone who has an impairment, see if they would be willing to assist you. They’re going to be a far better judge of what does and doesn’t work. If you don’t know someone, that’s okay too; you can do some testing yourself by having your favorite digital assistant read your email back to you out loud, or download a screen reader application. There’s no better substitute for actual experience. There are plenty of accessibility testing resources out there; I’ve included a list at the end of this post to get you started.

Once you’ve tested, let ‘er rip. Watch out for any complaints, take any that come in seriously, and look for ways to improve on them. Keeping your audience happy is key to keeping them engaged.

Wrapping Up

Accessibility is an important topic that is often overlooked when it comes to email. It takes a little effort but making sure that your emails are accessible to the widest audience possible will greatly improve the chances of your messaging being received, understood, and acted upon.

If you need any assistance with making your emails more accessible, Relationship One is here to help!

Some additional resources

Email on Acid has a great list of some additional resources for testing, included here:

• W3C’s Web Accessibility Evaluation Tools List — A massive list of over 160 tools that you can use for testing your content
• WebAIM’s Contrast Checker — This tool allows you to input two colors and determine whether they meet WCAG standards for contrast
• WAVE’s Web Accessibility Evaluation Tool — This interesting tool is a little different; in their own words, “WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.” Since it expects a URL to function, you’ll need to use the online version of your email (you have one of those, right?)
• The NVDA screen reader — This is a free-to-download screen reader for Windows
• Apple’s vision resource — A section of Apple’s overall accessibility site; this lists Apple’s built-in tools for accessibility, which can also be used for testing purposes
• JAWS — This is probably the most well-known screen reader available, for Windows only
• The axe DevTools extension — With over 200,000 users, this Google Chrome extension can look for accessibility errors automatically; again, use it on your email’s online version