Want to make the most of your emails? Make sure they’re accessible to all your users.
One could argue that disabilities lie not in individuals, but in their environments. Kate Holmes, director of inclusive design at Microsoft, explains how the design of the elements within a playground dictate who can play and who cannot. Something as simple as the height of a swing can in fact create a sense of disability in some kids – those who are not tall enough, for example.
Take a more considerate and flexible design decision, however, and the barrier disappears.
To interpret the term in its broadest sense, we all experience varying degrees of “disability” at some point in our lives: when we use a phone in overly bright light, when we try to open a door while pushing a pram, when we break an arm or suffer from RSI or leave our reading glasses at home… In designing your environments and tools to be accessible, you’re helping everyone.
As email marketers or designers, we have the same level of responsibility when we create our emails. It is in our power to decide who gets to read them and who is left behind. Nor is this solely a matter of social responsibility: the potential financial gains or using inclusive design are not to be ignored.
A huge market
The “disability market” (for want of a better term!) is estimated to be worth 1 trillion US dollars per year, and the current global population classified as disabled is estimated at 1.3 billion – for reference, that’s approximately the same number as the population of China.
With those figures in mind, it’s hard to understand why some businesses still see accessibility as a nice-to-have instead of an absolute requirement. The EU’s Accessibility Act tells us that the financial benefits of an accessible service are usually greater than the cost involved in practicing inclusive design, too.
In order to get the best ROI, studies have shown that implementing accessibility from the start is much better than patching a system as an afterthought. When it comes to email creation, we should take accessibility into account early on, during the planning phase.
If your message can be read by a wider audience, that means there are more people that could click through via your CTA and buy that product, learn about your services, or engage with you as a brand.
I’ve broken down accessibility best practice according to the content affected, so you can more easily use this list for reference as you compile your next email:
General and layout
- Can your email be made linear?
Users of screen readers get a linear version of your content regardless (a bit like the options you might see when using automated telephone systems). To check how your email looks when read in this way, disable the CSS styles.
- Put content in one column only.
Multiple columns are tricky for people using screen magnifiers, and add cognitive load for most of us at the best of times.
- Make your email responsive. The more ways people can access your email, the better! Also, many people choose to use their phones for certain tasks (such as reading email) because it’s easier to have the device read it aloud; on IOS, for instance, all you need to do is swipe three fingers down the screen.
- Include a web version. Many users have their browsers set up in a specific way which suits them. This may include custom CSS styles, bigger text, extensions to invert colors or to navigate using the keyboard alone. As a result, they might prefer to open emails in their browsers.
- Include a text-only version. Another way of providing flexibility. Starting your campaign creation with the text-only version will force you to think twice about the organization and structure of your content, and the value that images and other visual elements add to it (or not).
- Add the attribute “role=presentation” to the HTML code of tables used for layout which, as we know, are ubiquitous in email design.
- Keep language simple and to the point. If you’re targeting a broad consumer audience, you should aim for text that would be intelligible to the average 12 year old; that equivalent to a SMOG index of 8 or even lower. Before you recoil in horror, bear in mind that we all perform better with simpler texts. If your target audience is comprised of professionals, you can aim at a SMOG of 12 – the score of this article. Plenty of tools are available to help you check the readability of your messaging.
- Use a large font and left-align text. It will be easier to read for everyone, but is vital for people with cognitive issues. The British Dyslexia Association has produced a simple guide to designing content for people with dyslexia, ADHD, and similar difficulties.
- Break text down into short paragraphs and use headlines and lists where appropriate. Headlines are especially important, as screen readers gather them in order to provide users with a navigable table of contents.
- Links should be descriptive, so you may need to rethink “read more” or “click here”. Users of screen readers rely on links and their descriptions a lot more than other users.
- Increase the tappable area of links and buttons. For touch interfaces, the minimum height and width should be 10mm – roughly the size of the average pinky finger.
- When adding alt attributes, it sometimes helps to think of them as side notes to the main text. E.g. “chart showing variation in sales” is unhelpful to those who can’t see the chart, whereas “data from sales over the last 3 months show an average increase of 10% during the period” would be far more appropriate.
- Provide alternative content if necessary. You could provide a table with the same data shown in a chart, for example.
- Try to keep the images light. Users may be on a slower connection or restricted by data contracts, yet most of us still expect an email or web page to load in under two seconds.
- Put all fields in one column where possible. Users of screen magnifiers have trouble understanding and navigating multi-column layouts.
- Always use labels for form fields and always include important information in the label (e.g. whether the field is required or not).
- Forms should be as short and simple as possible. Nobody likes form-filling, but for users of assistive technology, the task will be much more tedious.
- Do not rely on color for meaning. Links should be differentiated by something other than color alone. Charts need to be readable in black and white; to test this, take a screenshot of your chart and turn it to greyscale – can you still understand it?
- Name your colors, particularly when they represent an important part of the information provided. You might like to include the color of a product in its title, e.g. “Men’s classic bicycle frame in dark red.”
- Try not to combine red and green. These two are the most troublesome for people with color blindess, a group which represents 4.5% of the UK’s population. Use tools like Color Oracle to check the interpretability of your design.
- Ensure good contrast between foreground (usually text) and background. Remember: colors can be hard to differentiate in bright light, and they can vary a lot from screen to screen.
You may feel overwhelmed at this stage, but rest assured that most of the points listed above are very easy to implement, and add no time at all to your design process if considered from the start.
As we have seen, accessibility is far from being a minority concern, and prioritizing it in your campaign creation results in a host of benefits. By practicing inclusive design you are improving the lives of all our users, and giving them fair access to what your brand has to offer.
I would like to thank Tom Dixon, front end developer and former email developer here at Adestra, for his invaluable feedback on many of the technical points within this article.