ClickDimensions' Email Editors provide the tools and features necessary for users to create ADA (Americans with Disabilities Act) compliant content. How and if ClickDimensions customers want to implement accessibility into their content to make the content accessible for screen-access technology users in order to be ADA Compliant is up to them.
This article focuses on best practices for designing emails to better accommodate the vision-impaired and those relying on screen reading devices, including audio prompts (such as synthesized speech) and keyboard-only access.
Goals
- learn why you should take accessibility into consideration when designing emails
- learn a number of ways you can design your emails to be more accessible
Why Send Accessible Emails?
With 285 million people worldwide being considered to be visually impaired, blindness and other forms of vision impairment are more common than many would think. Additionally, 4.5% of the population are color blind, which can be a major impediment when color is used to convey meaning or action in messages, both in email and on the web.
Basic Requirements for Accessible Email Campaigns
To meet basic accessibility requirements, an email message must:
- Include a descriptive subject for the email
- Use high-contrast colors for the text and background
- Use heading elements in your template
- Maintain a logical reading order
- Provide text alternatives for images
- Use meaningful hyperlink text
- Make sure your HTML is well formatted
Include a descriptive subject for the email
The subject line is the first text recipients will read, or have read to them by a screen reader. To determine whether an email message is relevant to the recipient's needs, the subject should be meaningful, descriptive, and concise.
Use high-contrast colors for the text and background
People with low-vision or color deficiencies can be less sensitive to luminosity or color contrasts when viewing text and images in an email message. To improve legibility, it’s important to incorporate sufficient contrast between text and the background of an email message.
NOTE: This is a good idea to implement in all of your emails because some spam filters consider low contrast between text and background colors to be a red flag since it may suggest that the sender is trying to hide some content, like an unsubscribe link, from the recipient.
Tools like Color Oracle can be used to simulate a variety of color deficiencies and ensure you are providing enough contrast for all email recipients to understand your email content.
Use heading elements in your template
HTML heading elements – like <h1>, <h2> etc – are important to ensuring hierarchy is conveyed to screen reader users, who may not be able to see them. Simply styling text to stand out by changing the size or color is not sufficient when creating a content hierarchy for assistive devices.
Although not all ClickDimensions email template editors allow users to access the template HTML to input these tags, they do feature text styling tools that will allows users to apply heading styles to their text.
Maintain a logical reading order
HTML email newsletters and templates are commonly coded using tables, as these are a reliable way to create layouts that work across desktop, webmail and mobile email clients.
If not planned and built thoughtfully, people who rely on keyboard-only access might not receive the content in the order intended. Screen readers, for example, read aloud tabular content from left-to-right and from top-to-bottom.
For example, in the image below where the table is consists of two columns and two rows comprising a body and sidebar for a template, the text would be read aloud in the order of the first body cell > first sidebar cell > second body cell > second sidebar cell, rather than reading the entirety of the body text, then reading the sidebar text.
To ensure the content is read in the correct order, a better layout would be a table of two columns and one row, as shown in the following example:
Maintaining a single-column layout on all screens – regardless of size – reduces the likelihood of content being parsed and read aloud by screen readers in either an incorrect order, or in a way in which the context of the content is unclear.
Provide text alternatives for images
All informative images should include an appropriate text alternative (alt text) that conveys the meaning, or purpose of the image. Purely decorative images – such as ‘spacer’ images for preserving layouts – should carry an empty or null alt attribute (alt=””) to inform screen readers that the image is decorative and should be ignored.
For example, a company logo is an informative image and should feature a text alternative. In HTML email code, this can be done using the alt HTML attribute, to convey its meaning to screen reader users:
<img src="https://www.clickdimensions.com/assets/uploads/logo.png" alt="ClickDimensions company logo" />
ClickDimensions email template editors provide the opportunity to add alt text to images through their respective image properties settings.
NOTE: Including alt text is also a good idea because the alt text will be displayed if your recipient's email client cannot show the relevant image, ensuring the recipient has an idea of what they should be seeing.
Use meaningful hyperlink text
It is important to clearly convey the purpose of links using the link text. This text informs the reader as to what will display when the link is followed and are often used for document navigation purposes by screen reading devices.
It is recommended that generic text such as “click here” or “read more” be avoided, as these will offer little meaning, especially when read out of context by a screen reader. Instead, we recommend links in code like:
<a href="http://mycompany.com/examplelink">read our recommendations for better links<a>.
Make sure your HTML is well formatted
Superfluous and malformed code in your template can cause display issues in email clients and produce unexpected results in accessibility devices. Tools like HTML Tidy Online and Dirty Markup can be used to remove empty and unclosed tags, as well as spot common code validation issues.
Since the Drag and Drop and NEW Drag and Drop editors automatically generate the HTML for templates, this is mostly a point to consider when making a Freestyle template or when using the HTML block in a NEW Drag and Drop template.