In the last couple of years, organizations have been working to make their websites as accessible as possible. This is not only fair for those millions of people with a disability but has also allowed content to be more easily consumed by all users on all devices and in all browsers. Now that website accessibility is standard for most website designs and redesigns and plans for maintaining their compliance are in place, it is natural to wonder if other digital platforms – such as email – are also subject to the current WCAG standards. The short answer? Yes.
Per Litmus, Gmail has more market share than any other email client. Since Gmail is a browser-based email client, all requirements described in WCAG 2.1 apply to emails read in Gmail. Further, since 37% of emails are read directly in a web browser and 77% of emails are on mobile/tablet screens, an email that has not been crafted to be accessible to as many people and devices as possible is unlikely to generate as many conversions. So, while it happens to be a legal imperative to make our content accessible, it also makes business sense to make emails WCAG 2.1 conformant.
How do we make emails conformant?
Color Contrast
If your website is already WCAG conformant, then simply stick to the same colors that are being used on your conformant website. Just as importantly, use the colors in the same way. A blue on your website was picked to match your brand but also so that it would have enough color contrast to be seen by as many people as possible. The key isn't just the particular blue picked, but what colors it is used with. Your blue could conform on white but it does not conform with your complimentary shade of red or on a gray background for example.
Marketers looking to stand out in a crowded inbox and ensure that their brand is immediately recognizable may create sections of the brand-blue and might include red text on the blue. On the website, the blue is conformant as is the red so it is assumed that this will work. But on the website, those colors are always on white and are never used together. When used together in the email however, the blue and red do not conform so to ensure your email can be accessible to as many people as possible, use these colors in the same way they are used on your site. This design consistency is also incidentally recommended to optimize integrated marketing user experience.
Content Structure
The content on your website should be structured logically, or semantically. Visually, you might notice this structure because an H1 is a certain size, color and text weight and your paragraph text is likely less prominent than those heading styles. This structure is crucial for letting someone easily consume content. For example, one can quickly determine that the context of this paragraph is "Content Structure" without having to read the entire paragraph. As such, if a web page or email is not structured semantically, the screen reader used to read the email can't as easily consume the content they want and the user will likely abandon the entire email.
Name Your Links Well
Screen reader users often navigate via links and if they do, they often only hear: "Read More", "Learn More"
or "Click Here". Read more about what? Why click here? Many content creators are becoming comfortable adding an aria-label to elements in order to add extra content specifically for screen readers but labelling this way should be considered a crutch, not a solution. The solution? Name all links so that they are meaningful on their own.
- "Read more about how we support our communities".
- "Learn more about our sale items."
- "Click here for locations."
Alt Tags for Images
Assuming you already have a conformant site, you know the importance of alt tags. Images are almost always included in emails and like websites they must always include an alt tag. If the image contains text and/or conveys meaning, the alt text must describe the meaning, not describe the image. If the image is decorative – like stock photography which is almost always decorative - you must include the alt but make it blank; this is an indicator to the screen reader that it can just skip mentioning the image because it conveys no information. Some examples:
-
Bad Alt: alt="Image of woman drinking coffee using smartphone"
-
Alt for a Decorative Image of a Woman Using a Smartphone: alt=""
-
Useful Alt for an Image with Text: alt="Introductory mortgage rate of 3.5 percent"
Properly Format Tables for Accessibility
Tables are commonly used for laying out content in an email but unless they are properly created in HTML, screen readers will have a difficult time reading them. Though they may look good, they may sound terrible on a screen reader. For layout tables, this is easily fixed by specifying that the table has role="presentation." This tells the screen reader to read the content from top to bottom, left to right. And if the table is a data table, ensure that you include headers to give context to the table information.
Consider Dyslexia
It’s important when designing and developing emails to left-align large bodies of text to help those with dyslexia consume the content. About 22 million Americans struggle with some symptoms of dyslexia so be mindful that your email content should be as accessible and impactful as possible.
If your company or institution uses email marketing as part of your communication strategy, be sure to consider email accessibility when designing and developing your email templates. Contact ZAG Interactive to discuss your email marketing or digital conformance needs.
Disclaimer: This article has been prepared by ZAG Interactive to provide information of interest to our readers. It is not intended to provide legal advice. Please consult your own legal or compliance team for specific questions and concerns.