Email accessibility tips

In this article you will find a collection of tips to help you design accessible emails.

Choose an accessible email template
If you're creating your emails using Delivra's drag-and-drop editor, build or select an email template that is simple and flexible. One or two column layouts are recommended because they are universally easier to read across devices.

Maintain a logical reading order
Screen reader technology reads 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.  

Avoid using tables
Template layouts that use tables to structure elements can be confusing for recipients that are using assistive technology.

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.
• Break up text whenever possible into short paragraphs.

Call-to-action
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”.

Video/Animation

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. 

• 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.
• A busy email is a hard to read email, but it can also be dangerous to those with visual sensitivities.

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

Emojis
Be mindful of your use of emojis and do not overuse them. Add emojis to the end of a sentence instead of between words and do not use them to replace words in your message. Avoid using emoticons altogether because the meaning is lost when screen reader tech is being used.

If you have specific questions about accessible email design, please reach out to Support to discuss.