Accessiblity in your email design

Learn what techniques to use to make your email designs accessible for everyone.

 

Topics covered in this article:

What is accessibility?

Structure of email

Color in email

Font and spacing in email

Images and animations in email

 

 

What is accessibility?

 

Accessibility simply means optimizing your email design so everyone can take part in the experience. Many of your subscribers may have sight disabilities, use screen reader or other assistive devices for the web and email. Making sure you have an accessible email is as important as fine-tuning your email design to look great in every email client.

 

There's an estimated 285 million people worldwide with visual disabilities. From email structure, to color, text and images, you can make an inclusive email for everyone that receives it. By making a few easy updates to your email design, you can be sure that your finely crafted message will be experienced by a wider audience with different needs and abilities.

 

Next we'll review the design components for an accessible email. Good news! Most aspects of accessible design are easily achieved in WordFly's Modern Editor.

 

 

Structure in email

 

One of the first things to consider is, how will this email read in a screen reader? Make sure the email reads well if read from top to bottom.

 

Heading styles

Screen readers will read an email from the top to button, establishing a hierarchy of information. Make sure to have defined styles in your email design to help with the reading flow. Heading styles help form a structure for the message being conveyed. Screen readers recognize heading styles with  h1 and h2 in the code. If heading styles are not present or defined logically, the sense of structure is lost and screen readers have no headers to read out to the user. Modern Editor takes care of adding the heading styles when those are applied!

 

Responsiveness

Emails should read well in both desktop and mobile. All emails built using Modern Editor will be responsive from the start. Use the slider at the top of the editor to preview both versions.

 

 

Color in email

 

There's a couple things to keep in mind when it comes to the colors used in your design. Color blindness or color vision deficiency (CFD) affects nearly 5% of the world’s population. They won’t be able to see every color in your design. Make sure that you’re not using color as the only way that information is presented. 

 

You want to make sure there's enough contrast to make thing easier for everyone to read. Watch out low color contrast between text and background as it may be tough to read for people with CFD. There are free tools available online that can help you assess color contrast.

 

WordFly's Inbox Preview integration with Litmus has a mode that helps you test the email in color blind mode.

 

 

 

  

Font and spacing in email

Think about opportunities to go a little bigger with your spacing, font sizes, links and buttons.

 

Spacing

Make sure that there's enough space between lines for readability. We recommend using a line height that is at least 4px more than your font size. Padding is also great here, you don't want text to be right at the edges of the email. This can make it harder to read for some. Finally, avoid using justified copy, instead use left or right aligned text so that it is easier to jump from one line to the next without getting lost.

 

Font

You want to use fonts that are easy to read. Starting with size, you want to make sure to use a minimum of 14px and go up from there. Larger font also makes it easier to select a portion of the text for copying, or clicking a linked word. Also consider what font-family you will use. There are some beautiful and creative fonts available, they may not be the easiest to read. Select fonts that will render and read well for everyone.

 

Links

When it comes to hyperlinking, you want to start making use of descriptive links. Screen readers will read the link. Instead of using link text like "More info" or "Click here", try using links that describe where the link is going such as "All available dates for this event". For those viewing the message, underlining and using a different color for links helps make the links obvious.

 

Buttons

Ensuring everyone can easily click or tap on your buttons is another easy way to make your email design accessible for everyone. Small buttons can be difficult for people who struggle with mouse accuracy. A good baseline is to shoot for a minimum width and height of 72 pixels for buttons.

 

 

 

Images and animations in email

 

Visual sensitivity

When using animations, avoid using images that move too fast, or flashing images, both of which can be triggers for photo-sensitive seizures in some people or cause headaches in others. Additionally, readers with light sensitivity may choose dark mode as a device or app preference so be sure your email displays well in dark mode.

 

Alt text

Every image should have descriptive alt text for those who are unable to view the images. A brief description can help convey the image or the message of the image for the subscriber.

 

 

Have more questions? Submit a request