How to test accessibility of emails
Testing for accessibility in your emails doesn’t have to be a chore. Making accessible and inclusive emails will increase your target audience (1, 2, 3) and will have other unintended benefits. These other benefits are known as the Curb-Cut effect. When people first introduced curb cuts (i.e. sloped ramps) at intersections for wheel chair riders they discovered that many other people benefited too; i.e. people pushing strollers/shopping trolleys, people with deliveries and people with walkers all used these new curb cuts to help navigate their urban environments.
Over 4 million people in Australia live with some form of disability. That’s 1 in 5 people (1). Over my lifetime I’ve experienced a number of health issues that have impacted my abilities temporarily. I might not be living with an officially diagnosed disability today but I frequently use features such as the closed captions on YouTube and Audio Books when I feel like changing up how I consume information.
It’s easy to get overwhelmed when thinking about accessibility testing, there’s many different levels of accommodations to consider (7). Here is just a sample to consider when sending emails;
- Vision Impairment (Can people use screen readers on your email?)
- Hearing Impairment (does any linked video content have closed captions?)
- Mental health/Intellectual/Autism spectrum (Does your content overload people’s processing ability? Is it easy to read and follow?)
It’s no wonder people often put this type of testing in the too-hard basket. However if you start with testing with vision impairments in mind you should be able to get a good return on investment towards a more inclusive experience.
Screen Reader technology
Most vision impaired users will use some sort of screen reader technology to browse the web. Even I use this technology when I feel like listening to a news article online instead of reading. 2.3% of the US population have some sort of vision impairment (2). This statistic is likely to grow with an aging population. The growth of voice interfaces will also grow the use case for this technology. I prefer using iOS’s VoiceOver technology but there are many other tools out there; Windows comes with Narrator and Android has TalkBack, there’s also the paid software JAWS.
Using VoiceOver with Email
On my iPhone 6 running iOS 11.3.1, I can go into Setting > General > Accessibility > VoiceOver
I can switch it on here but this can be hard to switch off with VoiceOver if you aren’t used to interacting with mobile technology this way. To help with this, I enable accessibility shortcuts on my mobile device. When I press my home button 3 times, I can easily switch accessibility features on and off.
When I test emails using VoiceOver;
- First I’d navigate to the email I’d like to test
- Then enable VoiceOver using my home button shortcut
- Finally flick/scroll two fingers up the screen
This enables the screen reader to read everything on the screen from top to bottom and I can test if the flow makes sense. There are plenty of other guides out there for using VoiceOver (12). I suggest switching on a screen reader on your mobile device and getting familiar with the technology. As a test, can you figure out how to take a photo on your phone using screen reader technology?
Alternative text for images
Screen readers will read out the alternative text for images for vision impaired users who can’t see your images. Alt text is an optional field for HTML image tags. For example, using Campaign Monitor’s Email Builder I have included an alt text tag with my image to convey the message of the image for screen readers. Here is the HTML tag for the image;
<img src="darth_vader.jpg" alt="Meme; Come to the dark side ... we have cookies">
This is what this email looks like with images;
I used Firefox’s web developer tools to replace images with their alt text to see this next view of the same email;
It’s considered a web best practice to include alt text (15). You can also read more about the web accessibility initiative at w3.
Tips for Alt text
- Check you have alternative text for your images and that it makes sense
- Check that you have blank strings or no alt text options for decorative images so that screen reader don’t try to read the image or the file name
- Don’t include words like “image of” in your alt text because screen readers will announce it’s an image and then announce the alt text. You will get a double whammy “image. image of blah” from your screen reader, this is super annoying
- Use tools that display the alt text or replace images with their alt text to help test this
Test the plain text version of your emails
Plain Text emails are important, and even though people say they prefer image based emails the statistics show they are more engaged with plain text emails (17, 18, 19);
- Tech savvy users can default their email clients to use text only emails
- Plain text is more accessible (there’s no pesky images or HTML layout to contend with)
- It’s more private because image based tracking doesn’t work
- They are a good fall back option when people are concerned about bandwidth consumption, for example when traveling overseas
- Spam email will fall back to the text only version because email clients may think the images and attachments are dangerous
Most Email Service Providers (ESPs) should have how to guides for testing plain text emails. For example our guide is here. When I test for plain text emails, I use my own web hosting service that has a web-mail client that defaults to plain text. When I access these test emails they often look like this;
A screen reader is going to have an easier time with a plain text email compared to a mostly image based email.
Test your images for colour blindness
About 4.5% of the British population experience some form of colour blindness (3). To help test this I have a grey scale shortcut button set up on my iPhone. On a side note, setting up grey scale for your phone helps make it less addictive too (21).
Putting this into practice
By doing VoiceOver and grey scale testing on an email I sent out for a recent bugbash, I discovered a few issues with my email. First the yellow highlight that I used for the “consent2track v3” text didn’t have enough contrast under a greyscale view to make it stand out. Secondly I didn’t update the alternative text for the image, I had an old bug bashes alt text attached to the image 😢. If I had done this testing before sending out this email I would have caught these issues. Here are the two views of the email side by side;
Hopefully you now realize that testing for accessibility in your emails isn’t that hard. If a screen reader works with your email, you have a plain text fall back option and your email is still readable using grey scale you will be most of the way there in providing an awesome, inclusive experience with your emails.
References
- https://www.and.org.au/pages/disability-statistics.html
- https://nfb.org/blindness-statistics
- http://www.colourblindawareness.org/colour-blindness/
- https://ssir.org/articles/entry/the_curb_cut_effect
- https://commons.wikimedia.org/wiki/File:Pram_Ramp.jpg
- https://99percentinvisible.org/episode/curb-cuts/
- https://services.anu.edu.au/human-resources/respect-inclusion/different-types-of-disabilities
- https://www.apple.com/au/accessibility/iphone/vision/
- https://support.microsoft.com/en-au/help/22798/windows-10-narrator-get-started
- https://support.google.com/accessibility/android/answer/6283677?hl=en
- https://www.freedomscientific.com/products/blindness/jawsdocumentation
- https://www.imore.com/how-use-voiceover-iphone-and-ipad
- https://www.campaignmonitor.com/resources/guides/alt-text-in-email/
- https://addons.mozilla.org/en-US/firefox/addon/web-developer/
- https://support.siteimprove.com/hc/en-gb/articles/115000013031-Accessibility-Image-Alt-text-best-practices
- https://www.w3.org/WAI/
- https://litmus.com/blog/best-practices-for-plain-text-emails-a-look-at-why-theyre-important
- https://blog.hubspot.com/marketing/plain-text-vs-html-emails-data
- https://www.smartinsights.com/email-marketing/email-deliverability/plain-text-vs-html-emails-2/
- https://help.campaignmonitor.com/plain-text-versions-of-html-emails
- https://www.youtube.com/watch?v=NUMa0QkPzns
About the Author
Sam is a quality coach at Campaign Monitor, focusing on teaching software engineers how to be better bug hunters. She can be described as a motorbike riding & beer brewing girl geek.