Step 1: Begin with an accessible basis
On the coronary heart of all of our emails is a basis of HTML, CSS, and actual textual content that helps maintain all of our campaigns accessible. Whereas a number of manufacturers go for all-image emails, we desire utilizing as a lot textual content as doable—styled with CSS to maintain it on model—so that folks utilizing assistive know-how like display screen readers have precise content material to eat.
Our retro Litmus Weekly isn’t any totally different. Whereas it’s closely styled, all of that occurs with CSS as an alternative of Photoshop.
When you dig into the code, you’ll see a bunch of HTML, CSS, and semantic markup that gives not solely human- and machine-readable content material, however context for what that content material really means. You’ll additionally see an entire bunch of HTML tables, too, which may be complicated for folks utilizing display screen readers. Figuring out this, we apply an ARIA position to each desk ingredient to forestall it from being learn as a desk.
<desk position=”presentation”></desk>
The presentation position does precisely what it seems like: it tells any assistive know-how that the ingredient is used for presentation solely, so don’t hassle doing something with it. It’s what prevents display screen readers from studying out each particular person desk row and cell to customers, which is a really jarring expertise.
Talking of hiding issues from display screen readers, we use the same ARIA function for these 90s-inspired bullets, too. As a substitute of utilizing an ARIA position, although, we embrace the “aria-hidden” attribute on the button photographs:
<img src=” alt=”” width=”15″ peak=”15″ aria-hidden=”true” />
Because the bullets are purely ornamental, we’re eradicating them consistent with the ARIA spec, which goals to enhance the expertise for assistive know-how customers by eliminating redundant or extraneous content material.
The significance of e-mail accessibility
One in 4 adults within the United States (U.S.) and European Union have a incapacity, and globally, it’s one in six. But, accessibility challenges in digital areas like e-mail are sometimes ignored.
These disabilities embody imaginative and prescient impairments, shade blindness, dyslexia, cognitive disabilities, age-related impairments, situational challenges (like a damaged arm), and extra.
In case your emails aren’t accessible, you’re lacking out on a big viewers—and leaving important income on the desk, with an estimated $1 trillion in annual disposable revenue.
In search of instruments to assist with e-mail accessibility? Litmus’ built-in accessibility instruments assist guarantee your emails may be learn and skilled by all.
Right here’s the way it works:
↳ Supply: From compliance to connection: Why companies should embrace e-mail accessibility
These embrace:
Visible impairment filters that test how your e-mail shows for subscribers with visible impairments throughout 4 shade imaginative and prescient deficiency filters.Automated accessibility checks throughout 40+ accessibility areas—plus steering on any found points.NVDA display screen reader previews that assist over 80 languages, serving to display screen readers precisely transcribe your message.
Get an outline of those options on our Assist web site.
Unlock infinite income
Let’s check out how a lot email-driven income you can be leaving on the desk.
Calculate ROI
Step 2: Add alt textual content to GIFs, photographs, and animations
A retro e-mail publication isn’t full with out some ridiculous animated GIFs and reversion photographs, which you’ll see all through—from the dialing modem GIF up high to the customer counter down beneath.
To maintain the entire photographs accessible, we included different textual content (alt textual content) to explain them to folks utilizing assistive know-how. For instance, the “dialing progress” GIF describes what that picture is: ‘Dialing progress’ with a picture of a pc connecting to a rotating globe with animated dots.
And that assortment of awkward yearbook pictures from the Litmus crew? The alt textual content reads “composite of headshots from the 90s of the Litmus advertising division.”
Alt textual content is without doubt one of the finest methods to extend the accessibility of your emails, each for sighted and non-sighted customers. Even when somebody can see these photographs, there’s no assure that they’ll be displayed within the inbox. Alt textual content helps your message get by it doesn’t matter what.
Step 3: Make progressive enhancements when doable
Progressive enhancement means designing for the fundamentals first—guaranteeing emails perform nicely on older shoppers, desktops, and browsers—then including options for enhanced experiences the place supported.
An excellent instance on this Litmus Weekly—and one in every of my favourite tips on this subject—is the usage of one of many best HTML tags of all time: marquee!
You most likely seen the scrolling date beneath the animated Litmus Weekly emblem. Whereas a number of people thought it was simply one other GIF, it’s really reside animated textual content.
First launched in older variations of Microsoft’s Web Explorer, marquee means that you can scroll and transfer textual content round your doc. It’s previous, it’s deprecated, nevertheless it positive is gorgeous. And, because it’s animating the reside textual content included within the HTML, it’s inherently accessible to assistive know-how.
That being mentioned, the motion could possibly be distracting to some customers, so use parts like marquee (or some other animation) cautiously.
Accessibility doesn’t should be boring
We had a lot enjoyable creating our retro Litmus Weekly. Extra importantly, we’re thrilled that we didn’t should sacrifice e-mail accessibility for design, even when bringing again ridiculous design traits from many years previous. Accessible emails can work nicely and look good (or horrible, relying in your tastes).
Need to make your emails extra accessible? Our Final Information to E-mail Accessibility goes over every little thing you should find out about accessibility—from copy to code.
Accessibility made easy
Creating accessible emails is now not optionally available—it’s required. Study accessibility’s influence on manufacturers from two trade consultants.
Watch now
Initially written and printed by Jason Rodriguez on April 8, 2021.
