Melissa Berdine is the Content Manager of Email on Acid by day and moonlights as a freelance email marketer. Her M.O. is connecting brands with their audiences via intentionally crafted messages. Being an avid traveler and eater, Melissa finds solace on airplanes and can often be found concocting something delectable in her kitchen. Follow her antics on Twitter at @MelissaBerdine.
Expert Diaries from Zoho Campaigns connects avid email marketers to the experts in this space, and help them learn some best practices and tips. Our aim is to connect email geeks and form a community that learns email marketing from one another.
Making emails accessible is top of mind for many email marketers these days. Maybe it’s due to the fact that approximately 17% of the global population lives with some form of visual impairment, the growing adoption of voice assistants reading email, or simply that it’s the inclusive, compassionate thing to do. Whatever the motivation, it’s never been more important (or easier) to create emails that can be understood by every subscriber.
Some facts and figures
We live in a hyper-connected world, one rife with communication tools and the internet always at our fingertips. But for many people, using a computer, tablet, or smartphone requires additional technologies. These can include screen readers and screen magnifiers or the more advanced sip ‘n puff devices and eye-tracking technology.
We mentioned above that about 17% of the worldwide population is visually impaired. That amounts to roughly 1.3 billion people. Approximately 36 million people across the globe are blind. According to Sharon Hurley Hall at Optin Monster, people with disabilities represent $1 trillion in disposable income worldwide.
Similarly, according to the 2017 U.S. Census Bureau, more than 40 million Americans (out of 325 million) were living with some degree of disability, 7.5 million of whom were visually impaired. As such, the ADA cites the U.S. Department of Labor’s findings that in the US specifically, “the large and growing market of people with disabilities has $175 billion in discretionary spending.”
Countless people also face temporary disabilities, such as a broken hand or surgery recovery, and may be using assistive technologies to navigate email as well.
Brands that don’t make their emails accessible are quite literally leaving money on the table by missing out on an entire market of consumers.
How to make emails accessible
There are three main components that make an email accessible: copy, design, and code. They all work together to provide a pleasant user experience for every subscriber.
When making an email accessible, it’s good to start at the root of the email HTML and then work your way up to the content and design.
Accessible email code
Many accessibility issues in email marketing stem from development. With that, there are a few quick code changes we can make to make emails more accessible:
Use semantic code
Screen readers read an email from the HTML, not the pretty version you see in a preview or a drag-and-drop builder. Using semantic code adds hierarchical tags to your content, such as <h1>, <h2>, <p>, etc. These tags allow the screen reader to differentiate between headings and paragraphs, which creates a more pleasant listening experience and allows the user to better navigate your emails.
Set a language attribute
This will tell screen readers and other non-human engines what language to expect and how to pronounce or display the content.
You can set the language by using the two letters that correlate to the language the email is written in. Here’s a handy list of HTML language codes.
Set your language attribute in the of your email using lang=”” to define the language. For instance, setting the language to English would be lang=”en.” If the email is written in Spanish, it would read lang=”es.”
Set a <title> for the email
Proper use of the <title> tag has two benefits for email subscribers. First, this tag will set a title on the tab of the web page when viewing the email in a browser. It also provides a title and some context for users with assistive technology.
Set presentation roles on all tables
To do this manually, go through your email HTML and add the attribute role=”presentation” to every tag so it looks something like this: <table role=”presentation”>.
This uses Accessible Rich Internet Applications (ARIA) to tell the screen reader this is a presentation table, not a data table (which is the intended use of tables in HTML). This makes reading email content a lot more intuitive for screen readers.
Remove link titles
Whenever possible, avoid adding title=”” to links. Screen readers will break their reading pattern to read the title, which garbles the listening experience and makes the email difficult to follow.
Add alt text to all non-decorative images
Alt text is a major element of email accessibility. Each non-decorative image that adds context to the email should have intentional, effective alt text. There are plenty of tips to write effective alt text, but here are the main points to keep in mind:
Avoid repeating alt text across images — that’s not much better than having no alt text.
Don’t start alt text with “image of” because screen readers already preface alt text with “image of.”
Alt text is not where a photography credit should go.
Make alt text descriptive, but concise. If it’s very long, then that information should probably go in the body of the email.
However, not every image requires alt text. If you’re using an image, GIF, icon, etc. purely for decoration (such as a spacer or shadow), be sure to set an empty alt=”” on those images. Screen readers will know to skip over these.
Encode characters
Including the Content-Type lets a browser or email client know which type of characters to expect. It also ensures nothing breaks the reading pattern for a subscriber, whether they are reading the email themselves or using a screen reader.
Simply add the following line of code to the head of your email:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
If you need some help converting special characters to HTML, here’s a handy, free tool that will do it for you.
Accessible email design
Emails are a visual medium, after all. These guidelines align with the Web Content Accessibility Guidelines (WCAG)’s Level 2 AA Standards. Following them will ensure your emails are accessible and can be read by subscribers with color blindness or other vision impairments.
Have good color contrast
Color contrast is how well text can be read against a background color. An email should have a minimum contrast ratio of 4.5:1 to meet WCAG’s ADA-compliant standards.
For text larger than 23px or bold text larger than 18px, the contrast ratio should be 3:1. To give those numbers context, white on white has a contrast ratio of 1:1 while white on black has a ratio of 21:1. The greater the difference between the two numbers, the better the contrast.
Pay close attention to text and layout
A general guideline is to keep your fonts at a minimum of 14px. Any smaller can be difficult to read for some people. This can vary slightly — if you’re using a light font, you may consider keeping to 16px.
Speaking of difficult to read, while center-aligned paragraphs may look nice, they can be much harder for dyslexic subscribers to read. Try to keep large bodies of text left-aligned.
Lastly, indicate text links and CTAs for those with color blindness. Depending on the kind of color deficiency a subscriber has, they may not be able to easily see a link or CTA button. Indicate a link with bold font, underline, or symbol (>) so you don’t lose out on a click.
Accessible email copy
This is writing copy that everyone can understand. Simple words, short sentences, and a consistent structure for calls-to-action (CTAs) all help keep an email’s copy accessible. Avoid things like jargon, inappropriate jokes, and cultural references that can exclude people.
The ROI of accessibility
Have you ever made a purchase from a brand after getting only so-so marketing from them? Probably not. A subscriber’s experience with your email will determine whether they click, convert, or not.
Listening to a screen reader read jumbled HTML and trying to read an email that’s barely visible don’t motivate engagement or purchases. Making these simple adjustments will significantly increase the quality of your emails for your subscribers who need them.
While making these changes is simple in nature, it can add a bit of time to the email development process if done manually. At Email on Acid, we’ve created an affordable tool called Campaign Precheck to automate the process so you can finish in minutes. It allows you to make click-to-fix ADA-compliant accessibility adjustments in just a few clicks.
Making emails accessible is an effort that won’t go unnoticed by your subscribers who depend on it to digest content and communications. You can find out more on accessibility standards in email marketing for 2019-2020 in our Email on Acid white paper on the subject.
Comments