Email accessibility is often overlooked since so much focus is put on web accessibility, which ironically, is where most of of the knowledge of email accessibility comes from.
“8.8% of the population over the age of 18 in the US report trouble seeing” – Lethbridge-Cejku, Rose, & Vickerie, 2006
After years of providing feedback about accessible emails and working with web accessibility, I’ve found these guidelines are generally what email creators need to create more accessible email.
Images with text needs alternative
While it may be easy to make an image with a perfect font and presentation, images that are important to the message you are sending will need to have a text alternative associated with them.
“Simply… don’t use images with text. Rely on text to convey the email’s message.”
Also, you can hide decorative images using an empty alt attribute…
<image src="http://some.edu/image.jpg" alt=""/>
…which allows recipients using screen readers to skip images that are not critical to the message in the email.
You shouldn’t rely on just color. With color-blindness and low-vision, color choices can make it difficult to read content.
You should pay attention to background but also how how other items relate to each other. For example, if you provide a link in a paragraph, the link should not only standout from the background but it should also stand out from the text along side it.
Another common mistake is to set the entire background color for an email. This will remain when recipients forward or reply to your email and can clash with their signatures, defaults fonts and any other content they add.
If you want to change the background, be sure to change it on an element in the email, not the email itself. If this is confusing, you may want to take some time to learn some HTML or contact a web designer for assistance.
12 point or larger is recommended when setting the initial font but an often overlooked feature of HTML email is relative font sizes.
Rather than setting the pixel/point size of your fonts, try using ’em’ or percentages. When you are able to use these methods of sizing fonts, recipients of your email can adjust the size as they need to.
Outlook and other email clients provide ways of adding structure to your text content. These features should be used to ensure the proper elements are used and provide meaning to the content such as headings and lists.
For example, bullets are occasionally represented as:
• Item one in the list<br/>
• Item two in the list<br/>
Basically this is a bullet graphic followed by a sentence which has less meaning to a screen reader users.
When the email client tools are used, it should result in:
<li>Item one in the list</li>
<li>Item two in the list</li>
The second example is a list item in an unordered list which gives accessibility tools like screen readers more context for the content.
Other good examples include Paragraphs, Quotes, Strong/bold etc, and all of which can take a specific form that is more easily recognized by accessibility tools and other email clients.
Don’t ‘click here’
Linked text should describe the content they link to. For example, ‘click here’ is less meaningful ‘the next step in the process’ or a ‘pdf of the most important information’ as linked text.
I’ve found that the easiest way to accomplish this is to write out your content and then look for the nouns of what you want linked. Sometimes this requires a little re-writing but the benefits are far greater with a little effort and you will look like a pro at writing web content.
One of the most important features of an email should be an easily identifiable sender. Recipients that experience difficulties with your email or have questions should be able to easily contact the person responsible for the content.
Including multiple ways of contacting the sender such as address or phone number is also helpful.
This is especially helpful if you are not the person responsible for the content and your sending it ‘on-behalf of’ another person/dept/etc.
Rather than relying on linked text alone, provide the full URL following the text so that if the recipients email client converts the email to text, which can be especially true for mobile devices, the link is still available.
Also, many email clients are friendly enough to identify URLs in text and automatically link them for their users.
Here are some great resources I’ve found that will help you create more accessible and functional email for all your recipients:
- How-to for using Outlook to create accessible email
- A general tutorial on email accessibility from a leading email marketing service
- A set of guidelines governing website accessibility as well as HTML email and should be used when developing content for both.
- Michigan State offered a guide for improving accessibility with Microsoft Publisher
- San Jose’s guidance for working with Microsoft products.
My goal with this post is not a static document of what accessible email is but what it will be and can become. This is meant to be a living guide to more accessible email so please feel free to provide feedback and other resources and I will try and update as frequently as possible.