Email accessibility in action
Accessibility in emails is getting more and more press in the past few years, which is a good thing. But I still stumble on a lot of poorly accessible emails. While giving email coding training and conferences, I found out that showing, and not just telling, the difference an accessible email makes can be a great incentive for people to make more accessible emails. So here are four tips to improve emails accessibility, illustrated with videos.
1. Always have an alt attribute
The alt attribute of the <img> element is required since HTML 4. This means that every single image on your emails must have an alt attribute, even if you leave it empty (alt="").
Otherwise, screen readers like VoiceOver might read out loud the full name of the image file. Here’s an example email from LEGO (and here’s the code).
A lot of images in this email don’t have alt attributes. For example, here’s the code for one of the images in the header of the email.
<img src="…/n_sah_h2.gif" height="33" width="191" style="display:block;border:0;" />Because of the lack of alt attribute, VoiceOver will read out loud the name of the file (n_sah_h2.gif). (VoiceOver is #TeamJif, by the way.) This is not very helpful. Imagine how bad it is if your image’s name is thirty-two randomly generated characters.
Fortunately, this can be fixed by adding the alt attribute, empty or containing the corresponding text. Here’s a video from the previous example, fixed.
Be careful with empty alt, though. If an image has an emptyalt with a link around it, VoiceOver might read the last part of the URL out loud.
Here’s an email from Spotify shared by Alex Kelly (and here’s the code).
Even though this email is mostly personalized text, it was fully generated with images. The whole email is also clickable. But every image has an empty alt attribute. A good way to prevent this behavior is to add the proper alternative text.
2. Use relevant alternative text
Having an alt attribute is an important first step. But now let’s make sure it is relevant.
Here’s an email from Deliveroo shared by Email Chic Geek (and here’s the code).
“600px WIDE IMAGE”. That’s the alternative text for the main image from this email, that includes both the photograph and the title text. That’s not helpful at all. Here’s the same email, with a proper alternative text set.
Another more worrying example was shared last year in this email by American Eagle Outfitters (and here’s its code).
Every alternative text in this email is Turn your images on. Shop AEO. This is absolutely wrong. The people who need alternative text the most don’t have the opportunity to turn their sight on.
A general good rule of thumb is to include in the alt attribute the text that might be included in your image. If there’s no text, it’s up to you to decide if the image conveys an important meaning and whether you should describe or not.
3. Use role=”presentation” on tables
HTML tables are not made for presentation. This is a big lesson learnt on the Web in the early 2000s. This is not different for emails. Except that in emails, you have to use tables in order to be able to use certain styles (like width or padding) in Outlook.
In VoiceOver, each row and each cell of a <table> will be read out loud. Here’s an email from Jacadi (and here’s the code).
In order to prevent that, you can use a role="presentation" attribute on every layout tables. Here’s the previous example, fixed with this attribute on the main table.
VoiceOver has special cases where it will be clever enough to not enounciate a row or column if a table only has one row or one cell. But just to be sure, it is a good practice to add role="presentation" to all of your layout tables.
4. Use a lang attribute
Not everyone speaks the same language as you do. Thus, not everyone’s computer is set up in the same language as yours. Without any indication of what language the current content is in, a screen reader like VoiceOver will usually use its language set up by default.
Which means that if, like me, you have your computer and Voice Over set up by default in french, a web page or an email in english with no lang indication will be read with a french voice. If you ever wondered what a french robot reading english sounds like, here’s your chance.
Here’s an email from Mailchimp (and here’s the code).
Adding a lang="en" attribute on the <html> tag is enough to make this email more accessible. Voice Over is now able to pick up the right language (assuming it’s installed on your computer). Here’s the result.
These four tips do not guarantee your emails will be 100% accessible. But I believe that they’re easy first steps that every email developer should get right.
To quote email developer Paul Airy in its Accessibility in Action conference at Litmus Live last year:
Any implementation of accessibility, however small, is a success.
Here’s to a successful new year!