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.
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.