How to design accessible email newsletters

This guideline will build on our accessibility thinking and show you our principles for designing accessible email newsletters that can be used by everyone

Contributors

Published on 26 Jan 2017

Why design accessible email newsletters?

Everyone is different and there are many variations of impairment. At the BBC we need to make our content accessible to all, whether they are internal or external users.

In the UK, around 18% of the population are impaired in some way. Approximately 1/3 are temporarily impaired due to illness, injury or situation. And situational impairments can affect anyone at any time. For example someone in bright sunlight may have the same requirement as someone who experiences visual disturbances with migraines or someone who is colour blind.

In order to make your newsletter content accessible to all, you need to consider a wide range and combination of vision, hearing, motor, cognitive and technical abilities. Put the reader first and put yourself in their shoes. More information about designing for accessibility can be found in the How to design for accessibility guideline.

Key considerations

Consider the following key points to make sure your newsletter content is accessible for everyone.

Logical reading order

Keep the reading order logical, to enable screen readers to read the text aloud and in order. A logical reading order helps all users to pull out key information quicker.

Heading tags

Heading tags form a structure for a newsletter or a webpage and help screen readers establish a hierarchy of information. When headers are not present within a newsletter the sense of structure is lost and screen readers have no headers to read out to the user.

Headers are recognised by screen readers by scanning through the code to find ‘h1’ and ‘h2’ elements

Font type and size

Consider the font size for visually impaired users. Anything below 14pts in a browser can be difficult to read. Choose fonts that are evenly spaced and not too condensed.

It is important not to rely on the appearance of the font to convey the meaning and not to use fancy fonts like script fonts or more decorative typefaces. Keep the use of different fonts and type styles (regular, bold, italic or capitals) to a minimum.

Colour

Consider how different users perceive colours and choose a colour scheme accordingly. Its important to remember that users with colour blindness will see things differently.

Avoid having the text and background in similar colours. Always remember the basic colour arrangement, dark text on light backgrounds and light text on dark backgrounds. To find out more about colour contrast rules, visit the BBC mobile accessibility guidelines for colour contrast.

Example of low contrast and high contrast of text against a background colourExample of low contrast and high contrast of text against a background colour

Alternative text for images

Add alternative text (or alt attributes) to imagery to enable screen reader users to gain a full experience from the newsletter. Alt attributes are important because they enable screen readers to describe the editorial intent of the use of the image to a visually impaired user. Without the alt attribute the user will only be told that there is an image, but with no description or context of the image. Use empty alt attributes for any decorative and non-editorial images.

Think about how relevant the text description is. Learn to apply alt attributes to images and to recognise if alt attributes have been used.

Example showing an image without an alt attribute and a correct example of an image displaying an alt attribute.Example showing an image without an alt attribute and a correct example of an image displaying an alt attribute.

Meaningful link text

Think about how relevant the language of the link text is. Avoid generic link text such as ‘click here’ and ‘more’ in favour of more descriptive alternatives. Consider that not all users can distinguish between colours so make links obvious and the placement of them logical.

Example of using relevant language and not solely relying on colourExample of using relevant language and not solely relying on colour

Neat and concise code

If coding an email, keep code neat and concise to help the users of screen readers recognise hierarchy and structure. Make sure any forms or tables that are included are coded in an accessible way for a screen reader to read. More information for developers can be found in the BBC HTML Accessibility guide.

Responsive design

A newsletter may look fine on a desktop, but it also needs to work well on a mobile device too. Responsive design is able to give form and structure for digital content, which helps all accessibility types.

Most newsletter services have this function built in. It is worth checking your newsletter on a phone before sending it out.

Example of testing your newsletter across devicesExample of testing your newsletter across devices

Text only option (multi part MIME format – Multipurpose Internet Mail Extensions)

Make sure your email newsletter has a text only option so colleagues can decide which format they prefer using.

Keep the formatting ragged

Left aligned ‘ragged’ text is easier for many people to follow. Make sure that line lengths are not too long, approx. 50-70 characters per line.

Tips for accessibility

Plan

It is a good idea to plan out your newsletter to see how it will be laid out in sections. Using headers will also help to strengthen the layout. This will improve the screen reader’s ability to structure the content.

Keep it simple

Try not to complicate your newsletter, for example frequently changing the layout, using metaphors and using too many different colours.

Keep it short

Get straight to the point and do not over elaborate on a topic, as it maybe to difficult for people to keep track and they may lose interest. Instead give a link to a full article.

Review

Remember to go through the key points in this guide to see if your newsletter meets the requirements to make it accessible.

Further information