Tips for email accessibility

Maintain a logical reading order

Screen readers read from left-to-right and from top-to-bottom. For the best experience, make sure your content follows that basic guideline. If you have a two-column email format, the reader will read the left column first and the right column second.  

Keep your code concise

An email with a lot of superfluous code can stunt loading times in the inbox and cause confusion for accessibility devices. Avoid empty and unclosed tags.

 

Ensure that your body copy is legible

• A good rule of thumb is to only go as small as 14 px for your overall font-size.   
• Have a line-height that is at least 4 pixels larger than your default font-size.
• Pick a good high-contrast color as your default font color. While it doesn’t have to be black, it should be easy to pick out against the background of your email.
• White space is important to give your eyes room to rest. Too much visual information is disorienting, so increasing padding and/or margins, both in the reading area and around images and CTAs allows the reader more space, literally and figuratively to process the information.
• Avoid justified text. There are simply too many variables that make justified text incredibly difficult to control in email. In print, justified text has proper spacing between words as well as the ability to hyphenate longer words. In digital, you have improper spacing between words that make it difficult to read. As much as a jagged edge may look undesirable, it’s important to prioritize legibility over aesthetic.
• Left-aligned text has the most legibility, as it has an obvious starting point and end.

Call-To-Actions

You want your CTAs to be a) obvious, b) well contrasted, and c) large enough to easily click on. For buttons, your minimum dimensions should fit your average thumb size – roughly 72 pixels x 44 pixels.
Be sure to convey what the link is leading them to. You’ll want to use something less generic than a “read more” or “click here” CTA. Those can be hard to distinguish with a screen reader. So rather than “to get the full list of sloth habits, click here” try “read the full list of sloth habits”.

If you are linking to a video, or have a video in your email, include a content warning if it contains any flashing, strobing or otherwise loud or disorienting imagery.

 

A busy email is a hard to read email, but it can also be dangerous to those with visual sensitivities.

• While animation can be a fun element to include, use it sparingly and effectively. Avoid bright, high contrast, strobing images, or anything that flashes more than 3 times per second on an image that is larger than a 25x25 pixel icon.
  • • Also, be sure to convey all the necessary information in the animation in the first frame. Not only is this important for certain email clients that do not allow animation, there are apps that can disable animations to protect sensitive users.
• A subtle pattern is a nice element to break the monotony, but subtlety is key. Avoid high-contrast lines, whirling patterns and anything that may create an illusion of movement.
  • • Bright colors, such as red, are great for CTAs and smaller elements that you want to draw the eye to – but avoid using them as background colors or major visual pieces. Red (#ff0000) of any color is statistically more likely to cause seizures, so use wisely.

Another important thing to keep in mind is how your email will appear to anyone who is color deficient or colorblind. 1 in 12 men worldwide have some form of colorblindness or color vision deficiency, and 1 in 200 women. Sites like https://webaim.org/resources/contrastchecker/ or https://contrastchecker.com/ and apps like http://colororacle.org/ can help you determine whether or not your color choices will be legible to all your recipients.