April 17, 2018

Inspecting Email Accessibility in Firefox

Over the past two years or so, I’ve been getting more interested in HTML email accessibility. It’s something I regrettably dismissed at one time and have been working to remedy ever since, even writing about the topic last year over on CSS-Tricks. There’s still a ton of work to be done for HTML email accessibility, but I recently saw something that could make developing accessible emails easier.

Mozilla’s accessibility evangelist, Marco Zehe, just published a post on Firefox’s new Accessibility Inspector, which is currently available in Firefox Nightly. Although the Accessibility Inspector isn’t a replacement for more robust testing using tools like screen readers or everything but the kitchen sink, it does provide an amazing outline of your web page (or email, in this case). By inspecting an element or the whole email, you can dig into the document outline (which is what screen readers use to navigate and expose content) and reveal all of the properties associated with the different elements in your document.

inspecting an email with the firefox accessibility inspector

Depending on your email, this can be a very revealing exercise. I strive for simplicity in my own newsletters, which allows me to ditch HTML tables and create a cleaner, more semantic document. But I realize that’s not always an option for some brands. Many are still left designing with tables, which—when not accounted for—can result in some horribly inaccessible HTML emails. Sorry, DSW, but I’m using you as an example here.

inspecting an email with the firefox accessibility inspector

See all those tables, rows, and cells? That’s not good for anyone. The Firefox Accessibility Inspector is the best tool I’ve seen yet to quickly reveal the structure of a document in an accessibility context and could lead to some useful insights that would help make HTML email campaigns better for everyone.

Still, it’s a bit lacking (it’s early days, after all). That’s why I like combining it with two add-ons for Firefox that provide slightly more robust testing.

The first is the WAVE Accessibility Extension, which allows you to quickly test and highlight problems with your document. Clicking on the WAVE icon pops open a sidebar that runs the WAVE evaluation and gives you a summary of any errors, alerts, and features found in your document, with options to dig deeper when needed. My favorite WAVE feature, though, is the “No Styles” option, which strips CSS from your document. While missing CSS is a rare occurrence in email these days, it is useful for seeing your document structure and further highlighting your use of semantic, accessible elements. The “Contrast” checker is really useful, too, grading your color choices based on WCAG guidelines.

inspecting an email with the WAVE evaluation tool

Looks like I have some work to do before my next send.

My other tool of choice is the Total11y: Accessibility Toolkit add-on. This one adds the Khan Academy’s amazing tota11y.js file to your page, which lets you easily inspect and check accessibility features. The killer tool here is the experimental “Screen Reader Wand”, which allows you to hover over text and see what most screen readers will read out loud to low-vision users.

inspecting an email with the tota11y add-on

It’s a much more elegant interface, but lacks the depth of the WAVE add-on. That’s why I like combining both, adding in Firefox’s new Accessibility Inspector to fully round out the environment.

Have any more tools that are vital to your HTML email accessibility testing workflow? Email me and let me know.