June 22, 2018

What WCAG 2.1 Means for Email Marketers

accessibility meets email marketing

Back in 2012, the International Standards Organization (ISO) adopted WCAG 2.0 as the digital gold standard for accessibility. WCAG 2.0 provided a set of guidelines for ensuring that digital content was accessible to as wide a range of users as possible.

While meeting WCAG 2.0 is still an excellent goal to strive for, a lot has changed in digital technology since 2012. As of June 5, 2018, a new version of WCAG has been launched as the recommended guidelines for building products and content for digital platforms. WCAG 2.1 builds on version 2.0 by adding 17 new criteria, bringing the total criteria (all the considerations you should be thinking about when developing digital products) up to 78.

Although WCAG 2.1 is mostly related to mobile and web applications and sites, HTML email marketers and developers need to understand the guidelines that WCAG provides. Email is digital content and, like everything else we all release, we should take every precaution to ensure that it’s usable by as many people as possible—regardless of their ability.

Here’s what email marketers and developers should know about WCAG 2.1, with a few thoughts on how to take the new criteria into account in your own email campaigns.

What’s New in WCAG 2.1

The 17 new criteria are largely categorized around three themes:

  • Cognitive disabilities
  • Low vision users
  • Mobile users

These three task forces tackle different accessibility issues, and the new criteria address those issues in a modern way. Here’s a quick listing of what’s been added in the 2.1 recommendation.

  1. Orientation guidelines: So that digital applications support both landscape and portrait orientations.
  2. Identity input purpose: To help those with cognitive disabilities better understand input fields.
  3. Reflow guidelines: To prevent horizontal scrolling, which increases effort for low vision users on average 40-100 times.
  4. Non-text contrast guidelines: To increase the contrast of important images and UI controls.
  5. Text spacing guidelines: to make paragraph, letter, and word spacing, and line height, user adjustable for low vision users.
  6. Content on hover or focus guidelines: To reveal content hidden behind hover or focus states for low vision users.
  7. Pointer gestures: To aid disabled users who might not be able to complete complex hand gestures.
  8. Pointer cancellation guidelines: to prevent accidental activation of a function from a single pointer event.
  9. Character key shortcuts: To prevent speech-to-text users from inadvertently triggering functionality based on a shortcut.
  10. Label in name guidelines: To help speech-to-text users interact with content based on visual labels.
  11. Motion actuation guidelines: To prevent disabled users from having to perform difficult or impossible actions based on device motion.
  12. Status message guidelines: To make it easier to detect and understand status and alert messages.
  13. Identify purpose guidelines: To help prevent confusion around elements.
  14. Timeouts: To prevent data loss due to user inactivity.
  15. Animations from interactions guidelines: To prevent problematic side effects for users with vestibular disorders.
  16. Target size guidelines: To help make interactive elements usable for all users.
  17. Concurrent input mechanisms guidelines: To allow users to use multiple input mechanisms for easier use.

There is a lot that goes into each of those new criteria, and differing levels of acceptance for implementing them, both of which you can learn more about in the official WCAG 2.1 specification.

What You Should Consider in Your Campaigns

I know, I know… that sounds like a lot to take in. Not everything applies to HTML email campaigns (hell, most of it doesn’t), but there are still a few key takeaways for email marketers. Here’s what you should keep in mind when building your next campaign.

Make Emails Responsive

There are a few criteria related to making content accessible across different screen sizes. In particular, the criteria on orientation and reflow are directly applicable to email campaigns. Emails should be usable regardless of device orientation and when viewed on a screen of 320px, horizontal scrolling should not be required. This isn’t just important for disabled users, it’s important for all users.

If you’re not already, start using responsive coding techniques to allow your emails to flow and resize across screen sizes. These techniques typically combine any of the following to achieve responsiveness:

  • Fluid instead of fixed tables
  • CSS media queries for changing styles based on screen size
  • Fluid images across screen sizes
  • Text resizing based on screen size
  • Content choreography to simplify layouts on smaller screens

Even though Gmail updated their rendering engine to support more traditional responsive techniques, the most robust method is still the “hybrid” or “spongy” approach, which you can read more about here.

You’ll also want to watch out for using fixed heights for elements that contain text. With the new text spacing guidelines, you need to make sure that text content isn’t cut off and hidden when resized. It’s almost always a bad idea to use fixed heights on anything but images anyways (and I’d argue about doing it then, too), so just fix that stuff now so you never have to worry about it in the future.

Consider Contrast and Size

Although text contrast has been a long-standing accessibility guideline, the new criteria specifies contrast rules for non-text elements like user interface components and graphics. Keep an eye on the contrast of button text and, if you’re using images or graphics like charts and info graphics, make sure the colors used have a high enough contrast ratio (3:1) for people with low vision.

Additionally, make sure your interaction targets are appropriately sized. Most people are using the 44px-by-44px rule already but, if you aren’t, now’s the time to fix that. There are a number of caveats to the new criteria, but keeping click and touch targets big with a decent amount of white space around them is a good guideline to follow.

Watch Those Animations

More and more emails are using interactive elements which include animations triggered by users, whether it’s in the form of hamburger menus, carousels, or in-email games and purchase experiences. It’s worth keeping an eye on those animations to prevent users with vestibular orders from experiencing problems. Keeping animations minimal and subtle is a good rule of thumb.

As many as 35% of adults over 40 years old have dealt with vestibular problems. If you’ve ever experienced vestibular issues, then you understand the chaos they can cause. If you haven’t, use a little empathy.

A Few Resources on Accessibility

As the Web Content Accessibility Guidelines grow, they can be difficult to keep track of or fully understand. Here are a few links to resources both for WCAG 2.1 and keeping tabs on the changing accessibility landscape.