October 13 2022

Website Accessibility Impact on Email Design & Content

email accessibilityWCAG 3.0, the long-awaited update of guidelines for near universal website accessibility, finally appears ready to debut in 2023. Devised to complement the earlier Worldwide Content Accessibility Guidelines (WCAG) 2.0 and its updated companion WCAG 2.2, WCAG 3.0 spells out the design, content and testing parameters for those who create content and administer corporate, nonprofit and social-media websites. In the working draft of WCAG 3.0, published in December 2021, email components are referenced too including colored and contrasted headings and fields, non-text formatting, readability, and more.

Importance of WCAG compliance

A strong business case can be made as to the benefits of full web accessibility for effectively promoting – and converting -- products, services and messaging to the widest, most diverse audience of existing and potential customers possible. Also, the mounting enforcement of Americans With Disabilities Act rules regarding digital accessibility adds more urgency to adoption and compliance. With WCAG 3.0 on the horizon, it’s well worth reviewing what does – and doesn’t – make for truly accessible emails.

Content Structure

As with web pages, the content on your emails 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 labeling 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 website, 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 vital 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 43.5 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.

  • Email Marketing
  • Legal Watch
  • Website Compliance

posted by
Dan Seagull
Dan Seagull
Sr. QA & Certified Accessibility Analyst

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
WCAG 2.2: Website ADA Updates You Need to Know