Home Blog Inclusive design, accessibility in email

Share this post

Inclusive design, toegankelijkheid in e-mail

Inclusive design, accessibility in email

Written by Wilbert Heinen / 14 April 2017 / Design / Technique

Our blog informs you of all the latest developments and trends in the field of email marketing and email design. After my previous article about interactivity in email, we will be discussing another (and perhaps more important) development: inclusive design in email. In other words: making email more accessible for everyone, including the elderly and people with a disability.

The web has been taking into account people with disability for a while now. This is called inclusive design. However, this is not yet a staple of email, unfortunately. The result is that roughly 25% of the Dutch population is impaired in reading emails. And that has to change.

I’m not calling inclusive design a trend on purpose, because trends tend to have a limited lifespan. This should not be temporary, however, it should become the standard. Making email accessible is not only good for people with a disability, but benefits everyone. No one profits from long sentences, paragraphs with bells and whistles, too much or too little contrast, or weird alignment.

The numbers

Accessibility in emails is mainly for the benefit of the circa 3.5 to 4 million people with disability in the Netherlands, with 1.7 million having sight limitations or dyslexia. Out of those, 320,000 to 350,000 are blind or visually impaired. One in 12 men and one in 200 women has some type of colour blindness. In addition, part of the population also suffers from dyslexia (estimates range from 1% to 5%).

This means it’s not a question of if your email database has people with some form of disability. It’s better to ask how many there are and why you’ve never taken them into account before.

Handicaps in Nederland

Figure 1: Handicaps in the Netherlands

This is how accessibility is achieved

Thankfully, it’s not hard or time-consuming to make your email more accessible. Taking into account how the text is displayed (contrast and use of colour) already makes a world of difference for people with (some form of) colour blindness or dyslexia. Adding role="presentation" to tables in your HTML makes it much easier for the screen reader and your recipient to read your email.

Making text more accessible

  • Limit the use of fonts with serif. For instance, only use these fonts for titles.

  • Avoid long paragraphs and keep sentences short and simple (no more than 70-80 characters per line).

  • Ensure sufficient contrast, but don’t go overboard. Black on white is too much. Dark on light grey is a better option.

  • Limit the use of cursive, bold and underlined text. Only use this when absolutely necessary, e.g. when underlining a hyperlink.

  • Outline your text to the left; don’t centre it or outline right.

  • Use a font size of at least 14 px and a line distance at least 1.5 times the font size.

Just by heeding these tips, you decrease the risk of a number of effects people with dyslexia may experience, including…

The River effect

The River effect is caused by too much white space in a text, something that mainly occurs when text is filled out.

Het River-effect in email

Figure 2: The River effect

The Blur effect

The Blur effect is caused by using too many words and overly long paragraphs.

Het Blur-effect in email

Figure 3: The Blur effect

The Wash-out effect

The Wash-out effect is caused by too much formatting on the text.

Washout-effect in email

Figure 4: The Wash-out effect

Contrast and use of colour

By taking into account contrast and use of colour in your email, you make reading your email considerably more accessible, especially for people with a type of colour-blindness. A common type is red-green colour-blindness. For these people, it is (almost) impossible to distinguish between red and green. And that can cause some confusion, as shown in the example of the Google logo below.

kleurenblindheid

Figure 5: Colours in colour-blindness

Screen reader optimisation

In the Netherlands, between 320,000 and 350,000 people are blind or visually impaired. For these people, ‘reading’ web pages and emails means relying on screen readers. Screen readers read out all relevant information on web pages and in emails. The way a web page or email is constructed determines to a large extent how well or poorly a screen reader can read out its contents.

Language

For this group of recipients it is important that the HTML of your email also takes into account accessibility. By adding the language code, the screen reader knows in which language to read the email. This is done by adding the ‘lang attribute’ to your HTML tag.

<html lang="nl" ...>

This lets the screen reader understand how to pronounce the words.

Character set

Define the character set, so the screen reader understands how to interpret special characters, for instance.

<meta charset="utf-8"/>

This is often replaced by the web clients own character set, but it is still important for an online version. UTF-8 is the standard, and supports the most characters.

Tables

In emails, not every table cell contains a value, but when a screen reader reads out an email, it will still look at every table cell. This can be prevented by adding the 'role=“presentation" attribute' to all tables. This is because elements with role=“presentation” are ignored by screen readers, resulting in only relevant content being read out.

<table ... role="presentation">

Headers and paragraphs

It used to be that use of headers (h1 through h6) and paragraphs (p) was discouraged in email HTML because of the risk of undesirable alignment such as in Hotmail. These days we encourage it. This is because they are important for screen readers to be able to understand the hierarchy of an email. Email clients that are unable to deal with this have either been replaced or have lost popularity. What’s more, undesirable alignment and styling can be overcome.

Titles’ on links

In your HTML, avoid the ‘title attribute’ on links. Screen readers can either interrupt reading out your content or don’t read the content of the ‘title attribute’ at all, making the descriptive text in your ‘read more’ link useless for people with a visual impairment. That is why it’s important to incorporate the most important information into the link itself and/or the link text.

Alts on images

In contrast, it is important to provide a description of the image you use in order to support your message. That is why you should use the ‘alt attribute’ on these images. For images that don’t contribute to the message, such as old-fashioned spacer images or images that are only there to add to the look, you can leave the ‘alt attribute’ empty.

How accessible is your email?

I hope this blog has roused your interest and that you’re looking forward to making your emails more accessible. Are you curious about how accessible your emails are? Fellow email geeks Maarten Lierop and Jordie van Rijn have not only written two very good articles about accessibility in email, but have also developed a useful tool that allows you to test your emails’ accessibility.

If you’re looking for more tips and information about accessibility in email, I keep a list of all kinds of interesting articles on this subject over at GitHub. Part of this blog was based on this article.

Scroll omhoog