Screen reader optimisation
In the Netherlands, between 320,000 and 350,000 people are blind or visually impaired. For these people, ‘reading’ web pages and emails means relying on screen readers. Screen readers read out all relevant information on web pages and in emails. The way a web page or email is constructed determines to a large extent how well or poorly a screen reader can read out its contents.
For this group of recipients it is important that the HTML of your email also takes into account accessibility. By adding the language code, the screen reader knows in which language to read the email. This is done by adding the ‘lang attribute’ to your HTML tag.
<html lang="nl" ...>
This lets the screen reader understand how to pronounce the words.
Define the character set, so the screen reader understands how to interpret special characters, for instance.
This is often replaced by the web clients own character set, but it is still important for an online version. UTF-8 is the standard, and supports the most characters.
In emails, not every table cell contains a value, but when a screen reader reads out an email, it will still look at every table cell. This can be prevented by adding the 'role=“presentation" attribute' to all tables. This is because elements with role=“presentation” are ignored by screen readers, resulting in only relevant content being read out.
<table ... role="presentation">
Headers and paragraphs
It used to be that use of headers (h1 through h6) and paragraphs (p) was discouraged in email HTML because of the risk of undesirable alignment such as in Hotmail. These days we encourage it. This is because they are important for screen readers to be able to understand the hierarchy of an email. Email clients that are unable to deal with this have either been replaced or have lost popularity. What’s more, undesirable alignment and styling can be overcome.
Titles’ on links
In your HTML, avoid the ‘title attribute’ on links. Screen readers can either interrupt reading out your content or don’t read the content of the ‘title attribute’ at all, making the descriptive text in your ‘read more’ link useless for people with a visual impairment. That is why it’s important to incorporate the most important information into the link itself and/or the link text.
Alts on images
In contrast, it is important to provide a description of the image you use in order to support your message. That is why you should use the ‘alt attribute’ on these images. For images that don’t contribute to the message, such as old-fashioned spacer images or images that are only there to add to the look, you can leave the ‘alt attribute’ empty.
How accessible is your email?
I hope this blog has roused your interest and that you’re looking forward to making your emails more accessible. Are you curious about how accessible your emails are? Fellow email geeks Maarten Lierop and Jordie van Rijn have not only written two very good articles about accessibility in email, but have also developed a useful tool that allows you to test your emails’ accessibility.
If you’re looking for more tips and information about accessibility in email, I keep a list of all kinds of interesting articles on this subject over at GitHub. Part of this blog was based on this article.