4 Tips for Testing HTML Emails for Accessibility

Written by Alexa | Sep 6, 2022

Testing emails for accessibility can be challenging. While numerous tools are available for HTML accessibility testing, emails aren’t always viewed in web browsers — and different email clients may display your content in very different ways.

With that said, 1 in 4 U.S. adults live with some form of disability. You can’t afford to ignore those users when creating your campaigns. Before sending your emails, you should perform a few simple checks to make sure you’re providing your readers with a consistent experience.

1. Check your emails for responsive design

The Web Content Accessibility Guidelines (WCAG) are the most widely cited standards for digital accessibility. The guidelines are intended to apply to all types of online content — not just HTML web pages — and following WCAG can help you create more effective campaigns.

WCAG requires content to reflow, another term for responsive design. To test whether your emails reflow, follow these steps:

Open your email in a web browser.
Zoom in using the keyboard command Ctrl +.
Magnify your content to 200% or more.

Does everything make sense? Are the text and images presented in the correct order? Are you forced to scroll horizontally to read all the text?

If not, your email isn’t responsive: It cannot be displayed with different viewports while providing users with a pleasant experience. This often occurs because emails use the HTML table element to control the visual appearance of the content.

Strictly speaking, this isn’t what the element is meant to do. The <table> tag is intended to — you guessed it — present tables of data in rows or columns. If your email has several columns, the presentation may suffer when the user’s viewport changes.

Some quick tips for making your emails more responsive:

Wherever possible, stick with a single-column layout.
Use a widely available font and keep your text to a reasonable size (13-pt or 14-pt for most fonts).
Limit the number of hyperlinks and other interactive elements.
Use responsive (or “fluid") images.
Use CSS, not HTML, to change your email’s visual appearance.

Finally, remember that some people use screen readers and other assistive technology when reading emails. If your emails use HTML tables, use the WAI-ARIA presentation role to prevent screen readers from announcing the “table" element.

2. View your email with images disabled

If your messages rely heavily on images, make sure that they’re also understandable when presented without visual content.

Adding text alternatives (also called alt tags or alt text) for images will ensure that screen reader users can still read your emails — and since some email clients disable images by default, you’ll substantially improve the experience for a wide range of readers.

You can get perspective on how alt tags affect accessibility by opening one of your emails and disabling images. Imagine that you’re listening to the image descriptions. If you’d prefer not to trust your imagination, you can use a screen reader like ChromeVox or NVDA to view the email.

Questions to keep in mind:

How does your experience change?
Do your image descriptions make sense?
Can you understand why the images were included in the email?

3. Read only your headings and subject lines

This is a great practice for email marketing in general, because it simulates the experience of a large portion of your audience. Most people won’t read every line of text — even if you’ve spent hours perfecting every word.

Subject lines and subheadings also play an important role in accessibility. People who use screen readers and other assistive tech may skip to subheadings to better understand the contents of your email.

Some quick tips to keep in mind:

Headings should be descriptive and accurate. For example, “Learn More" isn’t descriptive. “Learn More About Our New T-Shirts" is much more useful (provided that you’re promoting your new t-shirts).
Don’t write long-winded subject lines or headings. Concise content will help your readers scan the email — and may also boost your conversion rates.
Make sure your headings use proper HTML markup. Use subheading tags in sequential order.

4. Test for low-contrast text

WCAG Success Criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large-scale text. Contrast ratio refers to the difference in luminance (or light) between text and its background.

When text falls outside of WCAG’s thresholds, it may be unreadable for people with color vision deficiencies (CVD) and other vision disabilities.

You can test color-pairs by using our free Color Contrast Accessibility Validator. More quick tips to help you use color and images thoughtfully:

Avoid pairing reds and greens, which may impact people with CVD.
Avoid using images of text. Images of text can’t be read by screen readers. While you can supply appropriate alt text for these elements, the better option is to write text, then style it with CSS.
Never use color alone to convey meaning. For example, don’t write “click the red button" above your call-to-action.
Avoid using flashing graphics, which can trigger photosensitivity.

Design your emails with accessibility in mind

Fixing accessibility issues can be difficult. Planning for accessibility is much easier (and often much less expensive).

Designers, writers, and marketers should consider the best practices of inclusive design when creating campaigns. Make sure every member of your team understands the importance of accessibility.

By thinking about the needs, preferences, and expectations of your readers from the beginning of your drafting process, you can create much more effective campaigns. For more guidance, send us a message to connect with a subject matter expert.

View full post