How to make the world’s worst (or best?) email accessible

5 min read

Chances are good that you saw our recent Litmus Weekly newsletter—either in your own inbox or shared around online. Chances are also good that you either got a good laugh out of the retro design or shuddered remembering having to build similar emails way back in the day.

This isn’t your ordinary email newsletter.

Litmus Weekly is your way to stay in the email loop. It’s like having a new email bestie who gets you. Not like your IRL friends who keep joking you’re a spammer (unless you are, in which case, we’re swiping left).

Sign up for Litmus Weekly →

 

In honor of April Fool’s Day and the upcoming 50th anniversary of email, we dug through our collective past and revived some of the classic tropes in email marketing history—scrolling text, gaudy graphics, a hit counter, and everyone’s favorite: Comic Sans. Depending on who you ask, it’s either the world’s worst email or its best.

One thing we didn’t revive, though, is an inaccessible experience for our subscribers. Our email team—Jaina, Lily, and Carin—are committed to creating accessible emails, regardless of how they’re styled. So, how did we keep the world’s worst (or best?) email accessible?

An accessible foundation

At the heart of all of our emails is a foundation of HTML, CSS, and real text that helps keep all of our campaigns accessible. While a lot of brands opt for all-image emails, we prefer using as much text as possible—styled with CSS to keep it on brand—so that people using assistive technology like screen readers have actual content to consume.

Our retro Litmus Weekly is no different. While it’s heavily styled, all of that happens with CSS instead of Photoshop.

If you dig into the code, you’ll see a bunch of HTML, CSS, and semantic markup that provides not only human- and machine-readable content, but context for what that content actually means. You’ll also see a whole bunch of HTML tables, too, which can be confusing for people using screen readers. Knowing this, we apply an ARIA role to every table element to prevent it from being read as a table.

<table role=”presentation”></table>

The presentation role does exactly what it sounds like: It tells any assistive technology that the element is used for presentation only, so don’t bother doing anything with it. It’s what prevents screen readers from reading out every individual table row and cell to users, which is a very jarring experience.

Speaking of hiding things from screen readers, we use a similar ARIA feature for those 90s-inspired bullets, too. Instead of using an ARIA role, though, we include the “aria-hidden” attribute on the button images:

<img src="https://campaigns.litmus.com/_email/2021/April/04012021_Litmus_Weekly_retro/bullet-red.png" alt="" width="15" height="15" aria-hidden="true" />

Since the bullets are purely decoration, we’re taking them out, according to the ARIA spec:


…is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.


Glorious GIFs, images, and animations

A retro email newsletter isn’t complete without some ridiculous animated GIFs and throwback images, which you can see throughout—from the dialing modem GIF up top to the visitor counter down below. To keep all of the images accessible, we included alternative text to describe them to people using assistive technology. For example, the “dialing progress” GIF describes what that image is:


‘Dialing progress’ with an image of a computer connecting to a rotating globe with animated dots


And that collection of awkward yearbook photos from the Litmus crew?


composite of headshots from the 90s of the Litmus marketing department


Alternative text is one of the best ways to increase the accessibility of your emails, both for sighted and non-sighted users. Even if someone can see those images, there’s no guarantee that they’ll be displayed in the inbox. Alternative text helps your message get through no matter what.

Marvelous marquees

One of my favorite tricks in this Litmus Weekly is the use of one of the greatest HTML tags of all time: marquee! You probably noticed the scrolling date underneath the animated Litmus Weekly logo. While a lot of folks thought it was just another GIF, it’s actually live animated text.

GIF showing an HTML marquee animation

First introduced in really old versions of Microsoft’s Internet Explorer, marquee allows you to scroll and move text around your document. It’s old, it’s deprecated, but it sure is beautiful. And, since it’s animating the live text included in the HTML, it’s inherently accessible to assistive technology.

That being said, the movement could be distracting to some users, so use elements like marquee (or any other animation) cautiously.

Accessibility doesn’t have to be boring

We had so much fun creating our retro Litmus Weekly. More importantly, we’re thrilled that we didn’t have to sacrifice email accessibility for design, even when bringing back ridiculous design trends from decades past. Accessible emails can work well and look good (or terrible, depending on your tastes).

Want to make your emails more accessible? Our Ultimate Guide to Email Accessibility goes over everything you need to know about accessibility—from copy to code.

Download your free copy today →

Jason Rodriguez

Jason Rodriguez was the Community & Product Evangelist at Litmus