If you're like most organizations, your email spends a lot of time in QA, ensuring that HTML renders perfectly even in long-obsolete versions of Outlook, or in AOL on Opera OS. By that logic then, businesses should also be ensuring that the 20% of Americans who have disabilities are also able to read your email as well.
Twenty percent?
According to the 2010 US census, 20% of Americans have a disability. That means that up to 20% of your target audience will either have a great deal of trouble reading your emails, or won’t be able to read them at all. There is a way to reach your entire targeted audience, however! You can build your emails with accessibility in mind, and few, if any, will be excluded.
Don’t forget, too, that the Baby Boomer generation is aging. They control 60% of the wealth in the US. While most Boomers don’t consider themselves disabled, there are certain issues that arise as a person grows older, such as hearing and vision loss. Building accessible emails will make it easy for aging folks to consume your content as they’ll be able to read and understand it easily. Hopefully this will lead to more click-throughs!
Designing and building accessible emails
Emails are relatively simple HTML documents - so there are just a few things to keep in mind when designing and building an accessible email. Let’s talk about the design first, then we’ll discuss the building blocks.
Color Contrast
When you design an email, it’s important that the colors of the text and any informative icons are high-contrast. Try to avoid grey-on-grey or light text on white. If you use text over images, try to make sure that there’s plenty of contrast beneath the text. The color contrast ratio should be a minimum of 3:1 for large text, or 4.5:1 for body text. The W3 defines large text as greater than 18pt, or 14-18pt bold. This helps users with low vision as well as users outdoors on a bright, sunny day.
Role=presentation
Unlike modern web design, emails are designed using <table> structures. While this is fabulous for consistent structure and layout across email clients, it’s less great for users dependent upon screen readers to consume the information. Screen readers will tell users they are in a table, the number of rows and columns, and cause the user to have a very poor experience. Never fear, however! This can be avoided by using a simple <role=”presentation”> on your tables. Screen readers will then ignore the table structure and read the content in a linear, logical fashion.
Language tags
This is a critical piece of information in the HTML header. Screen reader software looks for the language tag so that it can read the information correctly. With no language tag, it will read the page in its default language, which will result in strange and confusing pronunciation if the default language does not match the language of the page.
Unique title
Give your email a unique, descriptive title! This helps users scanning through emails determine whether yours is an email they need to read; and if they are searching through their inbox to get back to it, they’ll be able to find it more quickly and easily.
Text alternatives
Each <image> element in your email requires appropriate text alternatives. If the image contains information the user needs, the <alt> element must contain that information. However, if the image is purely decorative, such as decorative lines or stock images of smiling people, the alt element can be null, or <alt=””>. A null alt element allows the screen reader to skip over the image completely.
Link text
Link text must be treated a little differently for an accessible email than for an accessible website. All those “learn more” CTA’s? Unfortunately, adding <aria-describedby> pointing to an ID to give more information to screen reader users doesn’t work with email clients. Some strip out the information, others add strings of numbers to the ID. If your email contains a lot of generic links, such as “click here” or “read more”, screen reader users scanning the links out of context will not know the destination. Instead, try using short, descriptive text for your CTAs. Rather than “Read more,” try “Read our blog.” When tempted to use vague link text, try to be more specific.
By following the rules outlined above, you’ll make your emails viewable and accessible to more users, across more technologies.
Learn more about Primacy's Accessibility practice.