Advertisement
  1. Web Design
  2. Accessibility
Webdesign

A Beginner’s Guide to Email Accessibility (Checklist + Resources)

by
Difficulty:BeginnerLength:LongLanguages:

This guide will walk you through a checklist of over thirty improvements you can make to your emails to make sure they’re as accessible as possible. It’s also packed with useful links and tutorials, so bookmark this page and make it your go-to resource for email accessibility.

feature image from Wax Seal Logo Mockup on Envato Market
Feature image from WaxSeal Logo Mockup on Envato Market

Note: this tutorial is part of a whole week’s worth of email content on Tuts+ Web Design–check out the Mastering HTML Email learning guide for more!

Email Professionals: It’s Time to Prioritize Accessibility

We put a lot of effort into the newsletters, marketing campaigns, and other emails we send. We carefully craft the right message. We diligently design the visuals. We triumphantly test in Outlook.

And it pays off. Email is still how most people prefer to hear from companies, and as a marketing channel, it has an average return on investment of 32 to 1.

But still, most of us could be doing even better. HTML emails aren’t traditionally designed and coded with accessibility in mind. As a result, many of our recipients struggle to join in, and we’re turning away part of our audience.

Sometimes improvements are obvious. If your entire email consists of fine print, most of us over the age of 25 will have a hard time reading it. But more often, the barriers we place between our message and our recipients are more subtle. I’ll admit it took me a moment to notice the problem in the following photo:

Once we become aware of these issues, they’re often easy to fix. By reading this, you are already taking an important first step towards making your emails accessible to more people.

If you’re new to coding emails, I recommend first reading Nicole Merlin’s tutorials. These will teach you the fundamentals of HTML emails, and how they differ from web pages.

We’ll build on those skills as we learn how to apply accessibility considerations to our emails.

What do We Mean by “Accessibility”?

At its core, email accessibility is about making your emails available to as many of your recipients as possible, no matter their circumstances. We generally think of accessibility as accounting for different disabilities, and that’s true, but it’s actually a broader definition than that, as outlined by Sami Keijonen:

“We are all different and our needs can change over time.” – Sami Keijonen

Disabilities come in many forms and severities. WHO’s World report on disability estimates that 15% of the world’s population is living with a disability. Depending on their situation, these individuals may have access to assistive technology which makes everyday tasks easier. To make our emails more accessible, we need to avoid placing barriers in front of people as well as the tools they rely on.

Begin With a Baseline Experience

Choose an email you’ve sent recently. Open it on your screen, or print it out so you can take notes on it.

What’s the goal of the email? What action should the recipients take after reading it, or what information should they have learned?

What elements does the email consist of? How does each one contribute to the goal? Would the email still make sense if one of the paragraphs, links, or images were removed?

Asking these kinds of questions helps you define a baseline experience–the bare minimum that needs to be successfully communicated to the recipient. This might be as simple as a link and its label, or there may be more you need to get across.

Above all, the baseline experience needs to be available for all recipients to access and understand. And everything else should be designed to not get in the way. Now for the specifics...

1. Make Text Readable

Avoid Walls of Text

The longer the paragraph, the more difficult it is to read. This applies to everyone, but especially people with dyslexia or other learning disabilities.

Here are some tips for making your text more scannable:

  • Split long paragraphs into shorter ones. Each paragraph should have a single focus. Read each sentence and see if it focuses on the same thing as the last one. If not, start a new paragraph.
  • Group related paragraphs under descriptive headings. If you use more than one heading level, make sure the hierarchy makes sense; typically you’ll use a <h1> for the main heading, <h2>s for each section, <h3>s for sub-sections, and so on. Using semantic heading elements also makes your email easier to navigate using screen readers.
  • Use italic or bold for emphasis, but use them sparingly. If you emphasize everything, nothing stands out.
  • Present groups of points as bulleted (<ul>) or numbered (<ol>) lists to make them easily digestible.
  • Include graphics to visualize and support the text content.

Use Simple Words

If you’re a designer or developer, writing may not be part of your job. In that case, consider sharing this tutorial with your colleague or client. When working to make our emails accessible, the language we use is at least as critical as the more visual or technical aspects.

Remember that people read at different reading levels, for many reasons. You may have recipients with dyslexia. You could be writing in their second language. Or maybe they are unfamiliar with the jargon of the subject.

If you are writing to a group of people about a topic, you will often be more versed in the subject matter than them. The more we know about something, the more we forget what it’s like to not know. This phenomenon is known as the “curse of knowledge”.

If you’re not sure if people less familiar with the topic can understand your writing, find someone to ask for feedback. Your colleagues may be suffering from the curse of knowledge too. Maybe you can get help from a friend, family member, or one of your subscribers?

When I signed on to write for Tuts+, they sent me their style guide which has some examples of plain English word choices:

Use “buy”, not “purchase”. Use “help”, not “assist”. Use “about”, not “approximately”.

Could you replace any of the words in your emails with simpler ones? How about keeping a list of confusing terms you commonly use, and words to use instead?

There are also several formulas for measuring how readable your text is

If you copy and paste your content into Word or Outlook, you can get its readability rated using two tests: The Flesch Reading Ease test, which scores the reading ease from 0 to 100, and the Flesch-Kincaid Grade Level test, which estimates at what U.S. school grade level someone would typically understand the text.

These tests look at the average number of words per sentence, and the average number of syllables per word, as indicators of how easy the text is to read.

For more comprehensive tests, try readable.io. This online tool lets you run your content through multiple readability tests. Their paid plans even offer a tool specifically for emails: forward the email to a specific email address, and they reply with an automated readability report.

Use 14px Font Sizes or Larger

Increasing the font size is not just a silly trick for making your essay seem longer.

It’s also a simple way to make your emails easier to read. 14px is the absolute bare minimum for body copy. The text here on Tuts+ has a font size of 18px, and that doesn’t feel too large either.

Headings should be large enough to easily stand out from the body copy. Type Scale is a handy tool for calculating and previewing suitable font sizes. Learn more about scale and hierarchy from these tutorials:

Make Sure You Use Contrasting Colors

As a general rule, dark text on a light background color is easiest to read for most people.

If you use a color combination with low contrast, such as light gray text on a white background, it can be hard to read for people with low vision or color blindness. Low contrast also makes text harder to read under poor lighting conditions like direct sunlight.

Light text on a dark background can also work well, especially for people with light sensitivity, or when using a bright screen in dark surroundings. But for people with presbyopia (blurred vision), light text on a dark background creates a sort of halo or glow effect. Everyone eventually experiences presbyopia to some degree. Our eyes’ ability to focus reduces with age, typically starting sometime after 40.

There are many tools for checking if your color contrast is high enough:

  • contrast-ratio.com is a helpful tool with a memorable domain name. When you enter a color combination, it instantly previews the contrast and changes the address bar to a direct link so you can share the color combination.
  • I also really like tanaguru contrast finder, which suggests other color options if your contrast is too low.


color contrast tool
That’s right, PapayaWhip and DarkSlateGrey, beautiful

Avoid Thin Font Weights

Ultra-light fonts have been popular with designers for some years now, but they are less popular with people with low vision.

Contrast good font weight bad
Contrast good, font weight poor

When combined with low color contrast and older screens, these font weights are particularly hard to read. For a better reading experience, use weights from 500 (normal) and up.

Align Your Body Copy, Don’t Justify or Center

Languages that are read from left-to-right, like English, are easiest to read when left aligned. For right-to-left scripts like those used in Arabic, Persian, and Hebrew, align the text to the right.

Even if you prefer the look of centered text, you should avoid it if you can. Text is easier for everyone to read when each line starts just below the previous. This is true even for headings but is especially important for body copy.

Lastly, you should never use justified alignment, where the text is arranged so it has even edges on both sides. Justified text is more difficult to read in general, and especially in web browsers and email clients, which don’t handle justification well.

Use Large Enough Line Height

Words need room to breathe.

If lines of text are too close together, they can be hard for the eye to separate. It becomes too easy to accidentally jump to the wrong line. If they’re too far apart, they start to look like separate paragraphs.

The best line height to use depends on the font size and the line length. But if you want a quick, general rule, you can’t go too wrong with a line height of 1.5 times the font size. For instance, a font size of 16px would be comfortable to read with a line height of 24px.

Email client support for the line-height property is mostly solid, except for some odd behavior in Outlook. Use px values instead of em, percentage, or “unitless” values for more consistent results.

Make the Line Length (the “Measure”) Readable

The further you go along a line of text, the more difficult it is to find your way back to where you started.

If your text runs too wide, the eye has to move around a lot, and it’s difficult to continue reading from one line to the next.

For optimal readability, aim for a line length of around 45-75 characters.

The font size, line height, and line length all influence each other. There are many approaches to deciding the proportions. Some people like to use the golden ratio (even if its magical properties aren’t necessarily a guaranteed recipe for success). Using the Golden Ratio Typography calculator, you can quickly get line height recommendations and calculate the approximate line length (CPL, or characters per line) based on your font size and column width.

Use Semantic Markup

Traditionally, email developers have coded every part of their emails as table markup, including separate table rows for each heading and paragraph. This is partly because some email clients used to change the styles of semantic elements, but also because people would get so familiar with how HTML tables worked that they ended up using them by default.

As the saying goes: if all you have is a hammer, everything looks like a nail.

But as email clients have improved their rendering, and we as email developers have collectively improved our coding practices, many have found that there are more downsides than advantages to the table based coding style.

If you instead code your paragraphs, lists, and headings, as <p>, <ul>, <ol>, <h1>, <h2>, etc., then people using screen readers and other assistive technologies will more easily navigate and make sense of your content.

You will still have the same level of control over how your content looks by styling it with CSS, and it will be more accessible, with less code. You will want to apply the margins you want for each element, whereas styles like the body copy font size and color can be set on a parent element and inherited by all of the paragraphs.

Here’s a basic example:

Use the lang Attribute

Most computers and smartphones come with screen reader software which reads text out as speech. In order to pronounce words correctly, and not like an Italian stuntman, screen readers need to know what language your text is written in.

To specify the content language, we use the lang attribute. Here’s a quick example of how a French sentence sounds with and without the language specified (video from Léonie Watson):

The lang attribute works with any HTML element. If you use different elements within the same email, specify the correct language for each part.

The main language should be set for the <html> element. But because some email clients will remove this element when displaying the email, it’s safest to also repeat the attribute on a wrapper element inside the <body>, such as a <div> around the entire email’s content.

To find the right value to use for your language, you can refer to the IANA Language Subtag Registry, which is a long text file of languages and their corresponding subtag values. Or use the friendlier language subtag lookup which lets you search the same information.

Here’s the French sentence from before, with the language correctly set:

2. Use Color Considerately

Don’t Communicate Solely With Color

Thoughtful use of color can help support your message or convey a mood. But if you rely on color alone to communicate certain information, it may be missed by recipients who are blind, color blind, or from a culture where those colors carry different meaning.

For instance, instead of using a red or green dot to indicate whether a product is in stock, use text like “in stock” and “sold out”, and use color only to support it.

Take Color Blindness Into Account

There are different types of color blindness that cause people to have difficulty distinguishing colors. The most common type is red-green color blindness, which makes it difficult to tell red and green hues apart. Total color blindness, which makes everything look black and white, is rare.

When choosing colors for text, graphics, and layout elements, be mindful of combinations of colors in the red-orange-yellow-green range, placed close together. Especially if the colors are similar in brightness and saturation.

There are also other color combinations that can be awkward for people with different color blindness types to distinguish. You can use a color blindness simulator to catch any issues in your emails. There are many to choose from. 

Don’t Overuse Bright, Saturated Colors

For people with light sensitivity and migraines, staring at backlit screens can cause eye strain and act as a migraine trigger. This can be made worse by bright colors, especially in blue and red hues.

For large areas such as background colors, use more muted colors when possible.

Avoid Underlined or Colored Non-Link Text (Especially Blue)

Not all links are blue and underlined, but all underlined and blue text is linked. At least that’s what will readers expect.

To avoid confusion and frustration, don’t use underlining and colors for emphasis.

3. Check That Your Images Are Accessible

Avoid Text in Images

Many senders still design emails with text in images instead of live HTML text. If your employer or client demands pixel perfect rendering, it’s easy to see how this might seem like a good solution. But the downsides to trapping the text in image files outweigh the advantages.

  • Screen readers can’t read text in images.
  • If image blocking is turned on in the email client, or if the email is read offline, the images break.
  • You can’t select, copy, and paste the text.
  • Translation software can’t interpret the content.
  • The text can’t be properly scaled or reflowed to fit different screen sizes or zoom levels.

Some of these problems can be partly solved by setting the content as the image’s alternative text and styling it with CSS. But unfortunately, email clients do not share a consistent way of handling image blocking and alternative text. And any hierarchy, such as headings, would be lost in the alternative text version of the content.

If your design calls for text placed over an image, backgrounds.cm helps you code this in a way that works across most major email clients.

Finally, in situations where you can’t avoid using images for text, add the role="text" to the image so screen readers will treat its alternative text value as regular text.

Use Helpful Alternative Text

We use images for many different purposes. Some contain important information, others are illustrations or part of the layout.

All images must have an alt attribute, but the attribute shouldn’t always have a value. In cases where alternative text isn’t needed, use a blank alt attribute to prevent screen readers from spelling out the image file name or link URL. Check out this example from Rémi Parmentier:


If the image has valuable content, describe it in the alternative text. Or if the image is a link, add alternative text to describe where the link points to.

W3C has a handy decision tree for alternative text. It covers most of the common uses for images, and how to use the alt attribute in each case.

Use GIFs Responsibly

Our main option for including animations in our emails that will work in most email clients is to use GIFs. We’ve seen many great examples of GIFs in email. They can be great for explaining ideas more effectively than you could with a static image, or for adding visual interest. Countdown timers and video previews are other popular uses.

Unfortunately, GIFs can cause problems for some recipients.

In extreme examples, intense animations can trigger seizures for people with photosensitive epilepsy. If you have GIFs that feature blinking or flashing colors, or bold patterns with high contrast, it’s worth testing them using The Trace Center’s free Photosensitive Epilepsy Analysis Tool (Windows only). This tool captures animations from your screen and identifies potential seizure risks.

Although less dramatic, subtle animations can cause problems too. GIFs that loop forever can distract from your other content, especially for people with attention deficit hyperactivity disorder (ADHD) or autism. Email on Acid offers some animation best practices for subscribers with ADHD.

4. Pay Attention to Layout and Tables

Avoid Unnecessary Tables

Although HTML tables are necessary for getting certain layouts to display correctly in email clients, especially in Outlook, email developers tend to overuse them.

I would recommend searching through your template code for every instance of <table and evaluating whether that table is needed. I often come across <table> tags that could easily be replaced with a more accessible and lightweight <div>, or even removed completely, without it affecting how the email renders.

Use role="presentation" on Layout Tables

On the remaining tables, add the role="presentation" attribute. Screen readers typically announce every table cell they encounter, which can make emails very tedious to read.

By adding role="presentation", you are telling the screen reader to treat the table as a regular text element, and to not navigate it as a data table. Check out the examples on Accessibility in email: Part II by Mark Robbins.

If your emails have tables containing actual tabular data, don’t use the role attribute on those.

Use aria-hidden="true" on Spacer Elements

As margin and padding have somewhat inconsistent support across email clients, it’s not uncommon to use separate elements like <div>s or even old-school spacer images to add spacing to an email design.

Such spacer elements don’t add any value for people reading your email with a screen reader. To make screen readers ignore a spacer, add the aria-hidden="true" attribute to the element.

5. Design Clear Links and Click Targets

Make Links Obvious, Beyond Color

Links are often the most important part of an email, since they’re how your recipients take the next step. Giving them a different color than the rest of the content will make them easier to find. Blue text has the best chance of being recognized as a link, but you can use other colors as long as they stand out, even to color blind users.

Avoid using your link color for unclickable text, to prevent confusion.

Underlining the text also helps suggest it’s clickable. Some prefer to bold their links instead, for aesthetic reasons, but it might be worth reserving bold text for emphasis.

It’s generally best to avoid “Ghost buttons”, a common style of buttons with an outline color but a transparent background. These can be difficult for recipients to recognize as being clickable, especially when placed on top of a background image. Button styles with a contrasting background color are easier to discover.

Use Helpful Link Text

People reading your email with a screen reader may be skipping from link to link without reading the content between them. And low vision recipients may read your email zoomed in, missing the context around your links. For links to be accessible to them, the link text should be able to stand alone and still make sense.

A short and descriptive link text helps people navigate efficiently.

Links pointing to different places should not have the same link text. Make each of them unique—no “Read more” links!

Avoid displaying long website URLs as link text, since they’re usually less useful as link text to all recipients. 

Make Buttons Big and Fully Clickable

For the most important links in your email, a nice big call-to-action button can give you a nice increase in click-throughs over text links.

Having a large enough area to click makes the button easier for everyone to hit, especially many users with physical disabilities.

Litmus has a good overview of ways to code email buttons. To prevent difficulties and frustration, choose one where the entire button surface is clickable.

Litmus button

Saying that, I have a personal preference for buttons.cm.

Don’t Make Everything a Link

To increase click-throughs, it can be tempting to turn every heading, image, and even paragraph, into a link to your landing page. This also means people can click the link easily without having to be too accurate. However, there are some downsides to making everything a link.

For people reading your email with a screen reader, each link will be read out, so repeating the same link for each element will make your email tedious to navigate.

If you have elements near each other that should link to the same place, for example, an icon with a text label, a good solution is often to wrap them both in the same link, creating a single clickable area.

If most of your email consists of links, this can also make your email difficult to scroll on mobiles and other touchscreens. Especially for people with tremors or other muscle-control problems, making it through an email without accidentally clicking unexpected links can be a challenge.

Consider :hover and :focus Styles

Giving links a subtle :hover style is a simple way to confirm to people that what they are about to click is, in fact, a link.

When navigating through the links in an email by keyboard, :focus styles help your readers keep track which link they’re at. Most email clients and browsers add an outline as a default :focus style for links. It’s generally best not to remove this outline, but if you do, you should make sure you replace it with an equally clear :focus style.

Any time you add a :hover style, it’s usually good to apply the same style to :focus so people will have a similar experience whether navigating with their mouse or keyboard.

Link to Accessible Content

While it’s not something you can always control, when linking to web pages it’s good to favor content which is also accessible.

If you have a choice between linking to two similar articles, where one is easy to read and the other has poor color contrast or a tiny font size—all else being equal, go with the more accessible one if you can.

6. Don’t Forget About Plain-Text

Include a Plain-Text Version

Due to the accessibility issues they may experience with many HTML emails, some recipients choose to use the plain-text version of emails instead.

Since you can’t use images, font sizes, colors, and so on, your layout options are limited. When composing the plain-text version, think about how best to present your core message using just text, and worry less about making it consistent with the HTML version.

Pay extra attention to how you format links, since only the link URL will be clickable. A good pattern is to write a descriptive link label followed by a colon on one line, and then the link URL on the next line.

Many ESPs (Email Service Providers) will automatically generate a plain-text version for you, but if you give it a read through, you will usually find little ways to make it more readable.

7. Get Familiar With Testing and Tools

Use These Email Specific Tools

There are many ways to test your email, both to help find accessibility issues, and to check that your fixes work as expected.

A good place to start is accessible-email.org, which provides you with an accessibility report of your email. This checks that all images have an alt attribute, that heading levels follow a correct hierarchy, and many of the other points we’ve covered here.

thorough report from httpwwwaccessible-emailorg
Typically thorough report from accessible-email.org

If this is the first time you’re evaluating the accessibility of your emails, the chances are you’ll get a neat checklist of improvements you can make. When you come back to retest your updated email code, you can look forward to the satisfaction of red crosses turning into green check marks.

With its popular set of email testing tools, Litmus lets you check many aspects of your email’s accessibility, such as the plain-text version, the images-off view, and different color blindness simulations of your email design.

Test With Screen Readers

A good way to experience your email like some of your recipients do is to try reading it using assistive technologies like screen readers. Most operating systems have a screen reader built-in that you can test with:

You may also consider testing with third-party screen readers. The most commonly used screen readers are JAWS (commercial) and NVDA (open source), which both run on Windows. For JAWS, a 90 day license is available, which helps reduce the cost of testing.

Install Your Preferred Browser Tools and Plugins

All major web browsers now come with built-in developer tools for testing accessibility. Although these are not specific to email, most concerns apply just the same.

One I often use is the Audit tab in Chrome’s developer tools, which scores the page and gives a handy overview of issues to fix.

Additionally, there are several third-party plugins that can help you get a slightly different perspective on mostly the same points. Here are a few that I recommend:

  • tota11y comes as a bookmarklet and Chrome extension that you can use in the browser to test your email. Its checks include text color contrast and ARIA landmarks. It also shows you how screen readers see the different elements in your email.
  • Web Developer is a browser extension for Chrome, Firefox, and Opera, which makes it easy to test turning off images and embedded CSS, among other things.
  • The Funkify Chrome extension consists of a set of “disability simulators”. Each mode alters the page in ways that represent different challenges, such as dyslexia and trembling hands, to help you evaluate how well your design holds up. Funkify also comes with tota11y included as one of its modes.

Understand the Importance of User Testing

No tool or simulator can quite replace talking to people living with disabilities and learning about how they interact with your email. InVision has a helpful article on getting started with accessibility user testing.

Conclusion

Having read this article, the best thing to do next is to find a quick improvement you can make to one of your emails, and do it.

Any step you take towards creating more accessible emails will help include more people, which increases your audience. And when you fix the problems that make your emails difficult to read for people with disabilities, the chances are you’ll also be making things better for everyone.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.