***Today’s blog is a guest post by our friends at Rebel – enjoy!
Over the last couple of years there has been increased talk about accessibility in email campaigns. Mark Robbins of Rebel will tell us more and share his perspective on how brands should be thinking about accessibility in their campaigns.
At REBEL we are passionate about accessibility in email. We’ve put a lot of time into research and testing, and as a result we have given talks around the world on the subject, and advise ESP’s and email clients on how best to work with email accessibility. And most importantly we put accessibility at the core of our REBEL Lite API and all our email code.
What is Accessibility?
Accessibility is about making sure your email can be used by people of all abilities and disabilities.
This could include people with disabilities that affect their reading, their ability to click a small object, or ability to distinguish colours. It could be people who use assistive technology in place of a traditional, mouse, keyboard, monitor setup. Or those using mobile devices, or those with slow network connections.
And it’s not just about people with permanent disabilities – someone with a broken arm or simply someone holding a cup of tea would also temporarily or situationally have that same disability.
Firstly it’s about inclusivity, we shouldn’t discriminate against our audience so only some of them can consume the content. It’s not ethical and it’s just bad business to reduce your audience like that.
Secondly there are legal issues. Depending on where you are in the world the laws will vary but several companies have faced large fines for limiting accessibility.
A lot of people have put off accessibility work because it can be a large and complex subject. However a few small, simple changes can have a huge affect and are a great foundation to build from. I also enjoy a creative challenge! Getting an email to render well across a number of email clients is very satisfying, and accessibility is just an extension of that.
If you’ve ever built an HTML email I’m sure you’ve built the structure with <table> elements. This works well for layout however it’s not great for accessibility. Screen readers will read it like a table of data, which can make it very hard to understand the content.
There are 2 fixes needed for this, firstly add role=”presentation” to each layout table you use. This tells screen readers that this table if for presentational purpose not for data.
Unfortunately some email clients will remove that attribute so if you want to get full accessibility support you also need to wrap each table in conditional comments so it’s only seen by MSO clients.
<!--[if mso]> <table role="presentation" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <![endif]--> <div> content </div> <!--[if mso]> </td> </tr> </table> <![endif]-->
Semantic code is often overlooked in email because there are often issues with margins. But it can really enhance the experience for screen reader users, allowing them to build up a mental picture of the layout and hierarchy of the email.
A sighted user can quickly scan an email to find any sections with relevant content. Screen reader users can browse landmarks to do the same thing, the most common ones are <h> tags.
To use <p> and <h> tags in your email code, simply define a margin inline on each element and that will override any defaults added by email clients. For a list it’s a little different. If you add a margin to a <ul> or <ol> then the formatting will break in MSO clients. However if you wrap the <ul> or <ol> in a <div> and apply the margin there, it won’t break.
I see a lot of miss use of alt text in emails. Here are some of the most common mistakes;
- Alt text aimed at images off. “Please click to download images” this is done when people are thinking about emails loading with images disabled rather than thinking about visually impaired users. As a visually impaired user that text isn’t helpful and could be seen as quite offensive.
- Repeating the text. “20% off” “20% off” if the text is already next to the image there’s no need to repeat it.
- “Image of” there’s no need to say this is an image, the screen reader will tell the user that.
- Unnecessary alt text “diagonal line” it may be describing the image but is that information of any use to the user?
- Dynamic images. They can provide a great enhancement to a campaign but alt text for them is tricky. For a countdown timer you can simply use the end time/date of the countdown. Often you need to use a default fallback for dynamic images, it’s best to target you alt text to work with that image.
If you do decide to leave alt text blank, then remember to include and empty alt=”” attribute otherwise a screen reader will read the image file name.
The best way of testing accessibility is to use the same assistive technology that your users might be using. There are a number of products available on the market. To get started I recommend using the built in options on your own devices these can be found as follows;
- Android: Settings > Accessibility
- iOS: Settings > General > Accessibility
- Mac: System preferences > Accessibility
- Windows 10: Settings > Ease of Access
- Windows 7&8: Control Panel > Ease of Access
There are also a number of useful browser plugins that I’d recommend:
- AXE – useful plug in for checking code, can also be built directly into your workflow
- Wave – looks over your code and flags issues and give ideas for solutions.
- Funkify – Simulates a number of disabilities, by blurring your screen, shaking your mouse cursor and more.
As I said in the beginning, even a small change can have a big impact. Accessibility in email has only been a part of the conversation for the last couple of years, but it’s not going away.
I predict that accessibility will soon become a standard part of testing; does it work in Gmail, does it work in Outlook, does it work with screen readers, is there enough contrast for the colourblind, is it laid out well enough for those with dyslexia, etc. The list goes on. In this article I’ve only scratched the surface of accessibility, so start making changes today and start making a difference.