Posted on 12/10/2019 in Accessibility
Yes. Just as websites need to be accessible, the emails we send out need to be accessible as well. While we do not have a specific email accessibility guideline to adhere to, it can be assumed to fall under the umbrella of the Web Content Accessibility Guidelines (WCAG), along with a few best practices.
Use High Color Contrast
Using appropriate color contrast is important for all users, not just those with visual disabilities. It affects those with color-blindness or even those taking in the outdoors on a bright sunny day. Improper color contrast can make it difficult for your users to perceive your content. Ensure there is enough contrast between foreground and background colors, as well as contrast between your body text and link text colors.
To check color contrast, I recommend tools below, both of which I use on a regular basis:
Choose Native Over Custom Fonts
There is much debate about which fonts are best suited for the web, specifically with “fonts designed especially for on-screen viewing”. Custom fonts are nice, but they may present varying levels of accessibility issues. In general, you should follow a few best practices when selecting a font family. Choose one that:
- is basic and simple
- has even spacing
- Is not too condensed
- uses native or standards fonts (usually available on end user device)
A page with properly structured headings (<h1> - <h6>) provides well organized information to screen reader users, allowing them to scan through your email more easily. Headings should be constructed similar to how table of contents are without skipping any levels. They should not be used based on their size or design appearance.
Here is a more detailed explanation of how to construct your emails with hierarchical accessible headings.
It is generally recommended to left-align your body text, rather than center or justify it. Centered text can make it harder to find the beginning of each line for some users. Justified text presents inconsistent spacing between words which can also make it hard to follow.
For fonts, use a size of at least 14px. Anything less can make it tough for people to read. Personally, I recommend going with a larger minimum of 16px, but 14px is definitely the smallest size you should consider. Additionally, set your line height to a minimum of 1.5.
Use meaningful link text. “Click here” and “Learn more” link text, by themselves, do not accurately describe the purpose of the link alone. “Click here to sign up for our newsletter” or “Learn more about our wins in accessibility” are link text examples that clearly define the link’s purpose is.
Avoid hiding context or information within images. Text embedded in an image cannot be interpreted by users with visual issues, or Google for that matter. If this cannot be avoided, take care in making sure there is a textual representation of the information in the image as well (i.e. - image alternate text or adjacent text). Having a textual representation is 100% accessible.
If you are not already sending out a plain-text alternative version along with your emails, you really should be. Email platforms allow you to send a plain-text version of your email along with your HTML version. These versions are text-only and without any design treatment. So why send plain-text?
- Sending your HTML email along with a plain-text version helps to avoid spam filters
- Some people prefer the plain-text version
- Message clarity - it requires you to represent your visual elements (i.e. links, images) in a textual manner
- It’s accessible
Getting your audience to act on your email is hard enough. Think of how much harder that might be for someone with a disability or temporary impairment. Take care in removing usage barriers from your email. It will only increase your chances of getting that already hard to earn conversion.
Not sure if your site meets proper accessibility standards?
Contact us today for an accessibility audit to find out
Don't Risk a Lawsuit
These days, web designers have a lot of new technology they can build into websites. There are endless widgets, buttons, pop-ups, and graphics to [...]