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 preserve all of our campaigns accessible. Whereas a whole lot of manufacturers go for all-image emails, we choose 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 is not any completely different. Whereas it’s closely styled, all of that occurs with CSS as a substitute of Photoshop.
Should 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 truly means. You’ll additionally see an entire bunch of HTML tables, too, which might be complicated for individuals utilizing display screen readers. Realizing this, we apply an ARIA role to each desk factor to forestall it from being learn as a desk.
The presentation role does precisely what it seems like: it tells any assistive know-how that the factor 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 an analogous ARIA function for these 90s-inspired bullets, too. As an alternative of utilizing an ARIA function, although, we embody the “aria-hidden” attribute on the button photos:
Because the bullets are purely ornamental, we’re eradicating them in keeping 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 neglected.
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 vital income on the desk, with an estimated $1 trillion in annual disposable income.
In search of instruments to assist with e mail accessibility? Litmus’ built-in accessibility tools assist guarantee your emails might be learn and skilled by all.
Right here’s the way it works:
↳ Supply: From compliance to connection: Why businesses must embrace email accessibility
These embody:
- Visible impairment filters that examine how your e mail shows for subscribers with visible impairments throughout 4 shade imaginative and prescient deficiency filters.
- Computerized 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 summary of those options on our Help site.
Unlock countless income
Let’s check out how a lot email-driven income you may be leaving on the desk.
Step 2: Add alt textual content to GIFs, photos, and animations
A retro e mail publication isn’t full with out some ridiculous animated GIFs and reversion photos, which you’ll be able to see all through—from the dialing modem GIF up prime to the customer counter down under.
To maintain the entire photos accessible, we included various textual content (alt textual content) to explain them to individuals 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 images from the Litmus crew? The alt textual content reads “composite of headshots from the 90s of the Litmus advertising division.”
Alt textual content is likely one of the greatest methods to extend the accessibility of your emails, each for sighted and non-sighted customers. Even when somebody can see these photos, there’s no guarantee that they’ll be displayed in the inbox. Alt textual content helps your message get by means of it doesn’t matter what.
Step 3: Make progressive enhancements when doable
Progressive enhancement means designing for the fundamentals first—guaranteeing emails operate effectively on older purchasers, desktops, and browsers—then including options for enhanced experiences the place supported.
An ideal instance on this Litmus Weekly—and one among my favourite tips on this subject—is using one of many best HTML tags of all time: marquee!
You in all probability seen the scrolling date beneath the animated Litmus Weekly brand. Whereas a whole lot of people thought it was simply one other GIF, it’s truly stay animated textual content.
First launched in older variations of Microsoft’s Web Explorer, marquee permits you to scroll and transfer textual content round your doc. It’s outdated, it’s deprecated, but it surely certain is gorgeous. And, because it’s animating the stay textual content included within the HTML, it’s inherently accessible to assistive know-how.
That being mentioned, the motion may very well be distracting to some customers, so use components like marquee (or every other animation) cautiously.
Accessibility doesn’t must be boring
We had a lot enjoyable creating our retro Litmus Weekly. Extra importantly, we’re thrilled that we didn’t must sacrifice email accessibility for design, even when bringing again ridiculous design tendencies from a long time previous. Accessible emails can work effectively and look good (or horrible, relying in your tastes).
Need to make your emails extra accessible? Our Ultimate Guide to Email Accessibility goes over the whole lot you’ll want to learn about accessibility—from copy to code.
Accessibility made easy
Creating accessible emails is not elective—it’s required. Find out about accessibility’s influence on manufacturers from two business consultants.
Initially written and revealed by Jason Rodriguez on April 8, 2021.
Source link
