Readability is key

Accessibility is Readability

Paul Airy @ Litmus Live 2019

READABILITY IS THE QUALITY OF BEING EASY OR ENJOYABLE TO READ.

The Cambridge English Dictionary

Write copy everyone can understand

• Keep your copy concise
• Use shorter sentences - break long paragraphs
• Limit the use of jargon and difficult words

THE IDEAL LINE LENGTH IS 50-70 CHARACTERS

Baymard Institute

Choose your colours wisely

An email design should have a minimum contrast ratio of 4.5:1 to meet level AA standards outlined by the Web Content Accessibility Guidelines (WCAG) 2.0.

In Litmus, there is a "colour blindness" simulated preview - remember to use it.

Ultimately, don't rely just on colours

Colour is good for structuring content, highlighting links etc. - but remember that if the user is colour blind you have to use other visual cues as well.

No more tables?

Traditionally emails are coded using <table> based HTML. This allows the design to be easily translated into code and rendered across devices and email providers.

• Tables are still needed to build the email structure, but it is possible to reduce their use drastically.
• Wherever possible, you can use <divs> wrapped by Outlook ghost tables.

Use the right code

• Set character encoding in your meta tags.
• Set the Title of the email - so that it provides context to users.
• Use the lang attribute (e.g. lang="en")
• Use semantic code: <h1>.....<h6>, <p>, <ul>,<ol>, <li> etc. to structure your message.
• Use role="presentation" or role="button" wherever applicable.
• Call to action buttons or links should clearly describe the action itself not just say "click here"
• Don't set titles on links, as screen readers will read both the title and link text. If the link text is not appropriate for a screen reader add aria-label
• Hide non relevant content with aria-hidden="true"
• Always add alt tags to images

Image Alt Tags

Images are disabled by default in many email clients (notably Outlook desktop and Yahoo).

• It is essential to use descriptive text where images are relevant to the email content.
• Where the image is just for decoration, make sure to add an empty alt tag (alt="").
• The alt text itself should be styled to look as close as possible to the image.

If you don't pay attention, your email could look like this:

But if you apply all the above, it could look like this (note the icon is just for decoration so has no alt tag):

Resources to test your email:

Bookmark these: