Email Accessibility Compliance for Marketers

There are 1 billion people in the world living with some form of disability (source: World Health Organization). On December 26, 2017, the Trump DOJ officially withdrew the Obama DOJ’s Advance Notices of Proposed Rulemaking (ANPRM) (82 Fed. Reg. 60932), stating that it is “evaluating whether promulgating regulations about the accessibility of Web information and services is necessary and appropriate.” This means it is up to the courts to decide when and how Title III of the Americans with Disabilities Act (ADA) applies to websites of places of public accommodation.

Regardless of the lack of enforcement or penalty for noncompliance to website owners and marketers, the best practice for web development and email factors in accessibility to optimize ALL users’ experience (UX).

Accessibility on the web and email is made possible with the assistance of adaptive technologies, and tools such as screen readers, screen magnifiers, eye tracking systems and advanced sip-n-puff devices.

Our previous recommendations were made with accessibility in mind as people have varying abilities when it comes to sight, hearing, cognitive and neurological function when viewing emails.

Here are email accessibility recommendations adapted from a Email Monks infographic with our additional insight:

Content

Copy
Break down your copy into sections, and give each of your sections a heading, so, at a glance, or by listening to a screen reader, your email recipients can quickly understand your email message. Then, break down your sections further into small, digestible paragraphs.

Images
If your email features images that contain embedded text, the text should not be key to the message of the email because a screen reader cannot read images. If you do embed text in images, be sure the text is placed elsewhere in the message body text.

Avoid adding GIFs and video that flash repeatedly, as they may trigger photo-sensitive seizures in some people.

Add an alt attribute inside each img tag, and carefully consider the alternative (alt) text you insert into it because screen readers can read the alt text.

Examples:

If your image is a logo, insert the name of the organization.
If your image is a photograph, and that photograph is key to understanding the message of your email, insert text that clearly describes it.
If your image is purely for design purposes, like an arrow or color bar, insert an alt attribute, but leave it empty as screen readers should ignore reading this.

Buttons
Buttons should be bulletproof (i.e., HTML button instead of linked image) and selectable across their entire area using a finger or thumb. If your email features more than one button, consider writing a different call to action for each one. Also, your buttons should be a minimum of 44px in height.

Links
Link your calls to action, rather than text that instructs email recipients how to respond to your calls to action (e.g., visit our website rather than click here to visit our website). This is best practice for many non-accessibility reasons (e.g., Google search), and “click here” is not very useful for a screen reader.

White Space
Give your text some breathing room to help with readability by using white space. Group related content together, separating each group with white space. Insert paragraph spacing to help distinguish one paragraph from another.

Fonts

Headline
For your headline, choose from decorative, serif or sans-serif typefaces. Be mindful that it needs to remain easy to read.

Heading
For headings, choose from serif or sans-serif typefaces. Serif typefaces, such as Georgia and Droid Serif, may help to distinguish your headings from your body copy.

Body copy
For body copy, choose a sans-serif typeface, such as Arial or Roboto, but avoid using thin or light weights, such as Roboto Thin or Roboto Light.

Font size
Define a minimum, readable size for your body copy. If your body copy’s font-family has a large x-height, apply a minimum font size of 14px. If your body copy’s font-family has a standard x-height, such as Arial, apply a minimum font size of 16px. And remember that for web/email, font size is measured in pixels (px) not point (pt) like it is for print.

Line height
As a guide, style your line height at 1.5x the font size. For example: font size: 16px, line height: 24px; or font size: 16px, line height: 150%.

Color
Check the color contrast between the color of your text and the color of the background it sits upon, using the WebAim Color Contrast Checker.

Alignment
Retain the default (left) alignment of your body copy, avoiding centered or justified text.

Line Length
Manage your columns, so each line of text is no longer than 60-70 characters.

Hierarchy
Use semantic tags to mark up each piece of content. Headlines should be wrapped within pairs of h1 tags, headings within pairs of h2 to h6 tags, and paragraphs within pairs of p tags.

If you want to dive a bit deeper into accessibility of email, here are helpful resources:

Wave Tool: This Chrome and Firefox extension enables you to evaluate your emails and highlights anything that prevents them from being 100% accessible.
A Checker: This tool checks your emails’ HTML for accessibility. You can either paste in the URL of your email, upload your HTML file or copy and paste it.
VoiceOver on macOS
VoiceOver on iOS
Narrator on Windows
TalkBack on Android