Making emails accessible
By Lis Angle
Email is the most personal bulk communication medium, but any attempts to customise your content will look clunky if the message template is inaccessible.
When creating HTML emails, you need to follow the W3C guidelines for accessible websites as closely as possible. Email won’t allow external stylesheets, so you’ll need to embed inline styles, but most principles apply equally to websites and emails.
Here are our top tips for creating accessible HTML emails:
- Don’t use absolute font sizes. Use percentages and relative sizing so that the user can easily adjust the text size on their screen.
- Use logical headings, marking up your top level heading with a H1 tag, and subheadings beneath it as H2 (and sub-subheadings as H3 if you have them). Don’t use structural mark-up for aesthetic purposes, or fiddle with fonts to create titles that should be structural headings.
- Structure your content logically too: have one idea per paragraph. To make it easy to follow, particularly when it’s read aloud, use the simplest language that will convey your meaning.
- Make your newsletter’s top heading (H1) the same as the email subject line.
- Make sure link text is meaningful. Users of assistive devices will often summarise a page by its links.
- Provide alternative text for all images. This has benefits beyond accessibility because many standard email clients will block images by default as a security measure.
You should accompany your HTML email with a plain text version, so that users can choose which version they prefer. Plain text is not inherently accessible – you need to create it with some care. The Text Email Newsletter standard suggests that you, for example, should include a contents section at the start and should not use visual formatting such as italics to convey tone or information. It also suggests numbering each story item and warns against using lines of symbols such as asterisks to divide up sections. If you do that, screenreaders will annoyingly read every symbol out loud.
Screenreader users might prefer HTML over plain text, so they can more easily search for headings and links thanks to the additional markup. As with all accessible interfaces, the secret is to provide enough redundancy for users to access information how it is most convenient for them.
Not only are accessible emails easier for users of assistive devices, but they will also degrade more gracefully on mobile platforms. As more and more people surf using BlackBerrys and smartphones, an accessible email template will help ensure your message gets across.
Subscribe to newsletter
Receive Foviance customer experience, usability and analytics articles monthly, direct to your inbox.