100% found this document useful (1 vote)
141 views34 pages

Ultimate Guide To Email Accessibility

This document provides an overview of email accessibility, including why it matters, the current state of email accessibility, assistive technologies, and best practices for creating accessible email through copywriting, design, and code. Accessibility is important because email is widely used by a diverse population, including those with disabilities or impairments. Creating accessible emails allows marketers to reach a wider audience and provide a better experience for all subscribers.

Uploaded by

Hasby Prasetya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
141 views34 pages

Ultimate Guide To Email Accessibility

This document provides an overview of email accessibility, including why it matters, the current state of email accessibility, assistive technologies, and best practices for creating accessible email through copywriting, design, and code. Accessibility is important because email is widely used by a diverse population, including those with disabilities or impairments. Creating accessible emails allows marketers to reach a wider audience and provide a better experience for all subscribers.

Uploaded by

Hasby Prasetya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

The Ultimate

Guide to Email
Accessibility
The tools, tips, and
resources you need to
send email campaigns
for everyone
Table of Contents

1 Introduction.............................................................................................. 03

2 Who is Litmus?........................................................................................ 04

3 Key Takeaways........................................................................................ 05

4 Why does accessibility matter?......................................................... 06

5 The Current State of Email Accessibility......................................... 10

6 What are assistive technologies?....................................................... 13

7 Creating More Accessible Email........................................................ 16

Copywriting: Write copy everyone can understand...........................................................17

Email Design: Designing with accessibility in mind........................................................... 19

Email Code: How to make your email code more accessible....................................... 24

8 Getting Buy-In for Accessibility......................................................... 30

9 Wrapping Up............................................................................................ 33

   The Ultimate Guide to Email Accessibility 2 / 34


1 Introduction
The world is growing, changing, and aging, and the world’s email subscribers are coming along for
the ride. More people are accessing the internet and email on a wider variety of devices and types of
connections than ever before. And email subscribers themselves are more diverse than at any other
point in email’s 47-year history.

But what does all of this change mean for email marketers?

Apart from rethinking strategy


and tactics, it points to the need
for marketers to create more
accessible email campaigns
that can be used by anyone—
regardless of their ability.
This guide is a deep dive into
what accessibility means for
email professionals, with
tips and best practices
for writing, designing,
and developing more
inclusive email programs.

Creating accessible email is easy with Litmus


Accessibility checks in Litmus Checklist make it easy to test your email
against accessibility best practices, identify areas for improvement,
and make your emails more accessible to all of your subscribers.

Learn more about accessibility testing

   The Ultimate Guide to Email Accessibility 3 / 34


2 Who Is Litmus?
Litmus is passionate about email marketing research, because our mission is to help brands get access to
the knowledge and tools they need to send better email. Through our industry-leading blog, Litmus Live
conferences, ebooks, and webinars, we discuss best practices and explore trends to help your team stay
on the forefront of the industry.

We are also passionate about software that makes creating high-performing email easy. Marketers use
åthe Litmus Email Creative Platform alongside their existing email service provider to ensure a consistently
great brand experience for every subscriber, work more efficiently, accelerate campaign performance,
reduce errors, and stay out of the spam folder.

Email marketing is complex. But through hands-on advice and software you can trust, we enable your
team to do their best work—creating innovative, on-brand campaigns that engage and delight audiences.
With the Litmus Email Creative Platform, you’ll have the tools and insights you need to provide your
customers with an incredible email experience—and get the best results in return.

Keep up with the latest in email


Join the hundreds of thousands of email marketing pros who rely on
Litmus for expert advice and analysis. Sign up for our emails to get the
Litmus newsletter, notifications of new reports and executive summaries,
announcements of upcoming webinars and events, and more.

Subscribe to Litmus emails

   The Ultimate Guide to Email Accessibility 4 / 34


3 Key Takeaways
Accessibility is more than just improving the experience for a handful of subscribers. It’s about improving
the experience for everyone. And, honestly, it’s not that hard to create more accessible email campaigns.
Using a few relatively simple guidelines, you can start sending more accessible email campaigns in no time.

1. Creating accessible emails allows you to reach a wider audience than ever.

There are currently around 3 billion email users worldwide. None of those
users are the same, with different abilities and disabilities—both permanent and
temporary—and access to technology that informs how they experience email.
The best way to reach those users is by creating accessible emails that work
across all skill levels, abilities, devices, and cultures. Learn why accessibility
matters—and the business impact it has—on page 6.

2. Writing and visual design are key components of an accessible


email campaign.

You don’t have to be a coding expert to create more accessible emails.


By writing and designing simpler, more subscriber-friendly emails, you can open
up your content to a wider audience, all while providing a better, more valuable
experience for your subscribers. Understand how you can write and design
more inclusive emails on page 16.

3. Any email template can be made more accessible with a handful


of coding techniques.

Developing an accessible email doesn’t require fancy coding techniques.


Using simple, well-established principles and basic HTML, you can create
email campaigns that can be accessed from a variety of devices and assistive
technologies. Learn how to make your code more accessible on page 24.

   The Ultimate Guide to Email Accessibility 5 / 34


4 Why does accessibility matter?

Whether it’s permanent blindness or a broken arm, we are all only


temporarily able-bodied. Different levels of access to technology
and reliable data connections means not all email experiences are
created equal. Making your emails accessible means making them
better for everyone.

   The Ultimate Guide to Email Accessibility 6 / 34


Email is a massive technology. Despite frequent claims of its death, email continues to be one of the most
widely used communication channels in the world. According to one study by The Radicati Group, there
will be nearly 3 billion email users worldwide by the end of 2019. People are spending more time reading
email, too. Our recent State of Email Engagement Report showed that subscribers are spending an
average of 13.4 seconds in an email, up from 11.1 seconds in 2017.

That widespread usage means email is extraordinarily valuable for marketers. Our own research has
shown that email’s return on investment averages $42 for every dollar spent in 2019. That’s up from $38
in 2018, and has steadily increased year over year. It’s one of those stats that’s discussed ad infinitum in
the industry.

ROI by Industry
Brand in the travel, tourism, and hospitality industry report the highest email marketing returns.

60:1

50:1

Average

40:1

30:1

40:1 42:1 45:1 45:1 53:1

20:1

10:1

Software & Marketing, PR, Retail, ecommerce, Media, publishing, Travel, tourism,
technology & advertising & consumer goods events, sports, & & hospitality
agency or services entertainment

   The Ultimate Guide to Email Accessibility 7 / 34


Disabilities impact a large share of the world’s population

What’s less discussed are the challenges many subscribers have accessing the typical email campaign.
There is a large and growing population living with various disabilities—both permanent and temporary—
that make using email and interacting with companies difficult.

• The World Health Organization estimates there are around 1.3 billion people with visual
impairments, 36 million of which are considered blind.

• Color blindness affects approximately every 1 in 12 men (8%) and 1 in 200 women (0.5%).

• An estimated 15% of people have dyslexia. That means over 30 million adults in the
United States and about 6 million adults in the United Kingdom have trouble reading.

• Cognitive disabilities affect 4.8% of people in the United States.

• The world’s population is aging, with the older population—that’s people aged 60 or over—
growing faster than all younger age groups. The number of older persons is projected to
be 1.4 billion in 2030.

• Situational disabilities—like a broken arm or occupied hands—also contribute to people’s


ability to use email.

But it’s not just about the abilities of the human ac·ces·si·bil·i·ty
body. Likewise, a large portion of the world has /ək,sesə΄bilədē/
limited access to data connections and the latest
devices, creating additional challenges. Even in The easiest way to define
affluent countries, slow data connections and accessibility is the quality of being
older devices can cause poor experiences easily used or understood. In
for people that need to rely on the internet the context of email, we define
and email. accessibility as:

Accessibility is how we address When an email’s content is available


all of these challenges. to—and its functionality can be
operated by—anyone, regardless
of ability.

   The Ultimate Guide to Email Accessibility 8 / 34


Laws and legislation

Multiple governments and legislative acts have defined and redefined accessibility over the years.
The Americans with Disabilities Act of 1990 (or ADA) helped create more accessible public and private
facilities in the United States. In the UK, the Equality Act of 2010 laid similar groundwork. As technology
has taken over the world, guidelines like Section 508 and the Web Content Accessibility Guidelines
(WCAG) have been adopted to ensure that accessibility practices are implemented on the web, too.
For a lot of industries—like healthcare, higher education, government, and finance—adhering to these
laws and guidelines is critical.

Reaching more people helps drive business results

But email strategy, design, and development shouldn’t be driven solely by laws. By building accessibility
into our emails, we open our campaigns up to a large population of subscribers who wouldn’t otherwise
be able to access them. Beyond being a good, ethical thing to do, building accessible emails can help
drive business success.

The ROD Group estimates that the world’s disabled population controls over $1 trillion in annual
disposable income. If you don’t optimize your campaigns to make your emails accessible to everyone,
you’re leaving money on the table with every send.

It’s no longer acceptable to build inaccessible email campaigns. We have the tools, resources, and
technology to make emails available to people that rely on assistive technology or those contending
with limited access to technology and data. And, for those of us lucky enough to be only temporarily
able-bodied, a focus on accessibility can improve our user experience as well.

Optimizing for accessibility doesn’t just mean making


your emails accessible to people with disabilities—
it improves the email experience for everyone.

Tweet this

   The Ultimate Guide to Email Accessibility 9 / 34


5 The Current State of
Email Accessibility

When it comes to email accessibility, there’s a disconnect between


intention and action. 77% of brands say accessibility is a priority—
but only 8% rigidly follow accessibility best practices. There’s a
misconception that optimizing your emails for accessibility is hard.
The truth is, small changes can make a big impact in making your
emails more inclusive.

   The Ultimate Guide to Email Accessibility 10 / 34


Whether their motivation is ethical, legal, or financial, the majority of brands understand the importance
of email accessibility. 77% of brands say that making their emails more accessible is a priority; 46% even
claim it’s a high priority for their team.

But while the vast majority of brands claim that email accessibility is a priority, many struggle putting
accessibility best practices into action. Only 8% say they follow best practices for email accessibility
in all of their campaigns. 30% say they don’t optimize for accessibility yet.

77% of Brands Say Only 8% of Brands Rigidly Follow


Email Accessibility is a Priority Best Practices for Email Accessibility

How much of a priority is email Do you optimize your emails


accessibility at your brand? for accessibility?

8%

23% 29%

46%

63%
31%

High priority Yes, we follow accessibility best


practices for all our emails.

Low priority Somewhat. We follow some best practices


but there’s room for improvement.

Not a priority No, we currently don’t optimize


our emails for accessibility.

Survey of 414 email professionals on the Litmus Blog Survey of 310 email professionals on the Litmus Blog
between September 10, 2018, and October 19, 2018. between April 12, 2019, and May 6, 2019.

   The Ultimate Guide to Email Accessibility 11 / 34


The numbers show that when it comes to email accessibility, there’s a disconnect between intention and
action. Getting started with making your emails more accessible can feel like an impossible task, and many
marketers aren’t sure where to start.

The truth is, implementing key best practices isn’t all that hard. With the right tools, you can identify areas
for improvement and make small changes to your emails that have a big impact and make your emails
better for everyone. This report gives you the tools, tips, and advice you need.

Test your email accessibility today


Accessibility checks in Litmus Checklist make it easy to test your email
against accessibility best practices, identify areas for improvement,
and make your emails more accessible to all of your subscribers.

Start testing

   The Ultimate Guide to Email Accessibility 12 / 34


6 What are assistive
technologies?

Assistive technologies enable disabled people to use different


devices, the internet, and email—allowing them to experience
a fuller, richer life. More recently, assistive technologies have
jumped into the mainstream with the help of voice assistant-
enabled devices.

   The Ultimate Guide to Email Accessibility 13 / 34


Everyone needs help with something.
For a lot of us, that help comes in the form
of assistive technologies, or technology Common Screen Readers
designed to improve the functional
There are a variety of first- and third-party
capabilities of a person. A common example
screen reader applications in use today.
is eyeglasses. While some use glasses as
Most operating systems have screen
fashion accessories, millions of people
reader software built-in, but a large number
around the world rely on glasses to live
of people rely on additional tools to access
better lives.
content online and via email. Some of the

Online, assistive technologies come in a more popular screen readers include:

few varieties. One of the most common


and important assistive technologies is
JAWS from Freedom Scientific
the screen reader. Screen reader software
translates the interface and content seen
on screen into audio, allowing low-vision NVDA from NV Access

and blind users to use modern devices.


Window-Eyes from GW Micro, Inc.

VoiceOver on Apple devices

Narrator on Windows devices

TalkBack on Android devices

Screen readers are an extremely useful


assistive technology and are increasingly
important for email developers to
understand.

   The Ultimate Guide to Email Accessibility 14 / 34


For non-blind but low-vision users, zoom settings are often used to increase the size of text and other
visual elements on a screen. Likewise, dark and high contrast modes in many operating systems are
enabled to improve the contrast and clarity of content.

Some low-vision users also employ hardware screen enlargers that help magnify content on screen
without the use of software. For users with limited mobility and other physical disabilities, pointing devices
are used to enable better interactions with computers and mobile devices.

Screen reader software isn’t exclusive to people with disabilities. The recent proliferation of voice assistant
software—like Amazon Alexa, Apple’s Siri, and Google Assistant—mean that assistive technologies have
effectively gone mainstream. According to industry tracker Voicebot.ai, smart speaker users rose to 66.4
million in the U.S. alone in 2018, a 40% increase from 2017. And research firm Juniper predicts that voice
assistants will be used by 275 million people by 2023.

More people than ever are using voice assistants to get news, do their shopping, and, yes, even check
and reply to their emails. By creating more accessible emails, we empower subscribers to interact with
our content how they want, creating trust in the process.

What do your emails sound like?


Hear how your emails sound when read out loud by screen readers
with Litmus’ new accessibility tools in Litmus Checklist.

Hear your email

   The Ultimate Guide to Email Accessibility 15 / 34


7 Creating More
Accessible Email

There are a number of ways to create more accessible email


campaigns, whether it’s through copy, design, or the code behind
every email. In this section, we’ll look at the best ways to create
better email experiences for everyone.

   The Ultimate Guide to Email Accessibility 16 / 34


There’s a lot that goes into the typical email marketing campaign. From content planning to copywriting,
mockups to markup, and approvals to final send, all of these touchpoints create opportunities for making
more accessible emails.

It’s not only the code behind emails that affects accessibility—although that is important. A lot of the time,
revisiting copy and the visual design of an email can greatly improve the experience for subscribers.
Cognitive abilities, the average attention span, and physical disabilities all work together to inform the
kinds of decisions we need to make when crafting our emails.

While we’ll take a look at each part of the typical email campaign—copy, design, and code—it’s important
to understand how all three combine to help improve the lives of our subscribers.

Copywriting: Write copy everyone can understand

One of the easiest ways to improve the accessibility of your campaign is to revisit its copy. Ensuring your
copy is readable and easy to understand goes a long way in making your campaigns more accessible—
and a few easy tricks can help make it happen.

Keep your copy concise


Although it’s tempting to cram as much copy and content in an email as possible, there are a number
of reasons why shorter, more concise copy is desirable.

According to Litmus research, the average attention span in email is just 13.4 seconds. In a talk from
Litmus Live 2018, speaker Tom Tate looked at what that means for email copywriters. If the average adult
reader can read between 250 and 300 words per minute, then the ideal length of copy in an email is
just 50 words.

But it’s not just attention spans, either. Many people suffer from cognitive disabilities that make reading
difficult, especially with longer texts. Everything from traumatic brain injuries and dementia to dyslexia and
ADHD can affect a person’s ability to read. The W3 Working Group, which governs the WCAG guidelines
mentioned previously, says that reading difficulties exist in all walks of life and levels of education.

   The Ultimate Guide to Email Accessibility 17 / 34


They go so far as to spell it out:

“There are people with disabilities, including reading


disabilities, even among highly educated users with
specialized knowledge of the subject matter. It may be
possible to accommodate these users by making the
text more readable.”

WCAG Guidelines,
W3 Working Group

Use shorter sentences


Long, complex sentences can make your email copy more difficult to read. Short sentences are easier
to understand, allowing your audience to focus on the content rather than spending energy on unpacking
complicated sentence structures. Whenever possible, split longer sentences into two.

Limit your use of jargon and difficult words


What’s true for sentences is true for individual words, too: Shorter is better. Longer words are harder to
absorb and require more concentration from your readers. If you can, replace complex words with simpler,
shorter synonyms.

Readability testing made easy:


The Flesch Reading Ease test Readable.io’s free
tool lets you test your
Readability tests are an easy tool to find out how easy it will be for readability score
someone to read your text. The Flesch Reading Ease test is the for free and shows
most popular one. It’s based on the average length of sentences where you can
improve. Plus, tools
and words in your document and ranks copy on a scale from 0
like Grammarly or
to 100. The higher the number, the easier it is to read your email Yoast offer readability
copy. A score of 60-70 is considered plain English that’s easily scoring too.
understood by 13- to 15-year-old students. That’s the score you
should aim for with most marketing copy.

   The Ultimate Guide to Email Accessibility 18 / 34


Localize your content for global audiences
For marketers sending to global audiences, you should also focus on translating that copy into local
languages instead of relying on operating system or browser translation. There are coding techniques
we’ll look at that can help, but using a respected translation service and going beyond translation by
localizing copy using culturally appropriate language and content is a good idea.

Design: Designing with accessibility in mind

Once you have your content written, it’s time to design your email. Visual design is more than mere
decoration. It’s an important tool for creating accessible emails. Here are the best ways to ensure your
campaigns are designed with everyone in mind, regardless of ability.

Use real text


A lot of companies use all-image emails, designing them in programs like Photoshop, and dump them into
a basic HTML template. Although this allows for a high level of visual customization, favoring real text in
HTML has a number of benefits when it comes to accessibility.

Many email clients disable images for security reasons. When this happens, even those without disabilities
can’t read your email. Perhaps more importantly, even when images are enabled, assistive technologies
can’t take full advantage of your content. Screen readers can only access the underlying code of an email,
not the text in an image, and screen enlargers and zoom settings often result in blurry, unreadable emails.

Lorem Ipsum
Dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Image-based email Text-based email
DOLOR SIT AMET

Sed ut perspiciatis unde


omnis iste natus error sit
voluptatem accusantium
doloremque laudantium,
totam rem aperiam.

Totam rem aperiam,


eaque ipsa quae ab illo
inventore veritatis et
quasi architecto beatae
vitae dicta sunt explicabo.

The majority of your copy should be included in your email as live text inside of HTML elements. In the
coding section, we’ll look at how to properly do that, as well as how to make images more accessible, too.

   The Ultimate Guide to Email Accessibility 19 / 34


Create a strong hierarchy
Both cognitive and situational disabilities (like being in a
hurry or being distracted) make it hard for people to read and
understand long, uniform blocks of text. Hierarchy—or creating
visual differences that reinforce importance—helps those users
quickly consume content in email.

By using text size, color, and placement, you can create emails
that are easily scanned and read. Try creating bold, high-
contrast headlines above smaller portions of copy, and allow
for enough whitespace between sections to avoid content
bleeding together.

Strong visual hierarchy

Left-justify your email copy


Using both real text and hierarchy can aid readability, but there are subtler
ways to improve the readability of your emails, too. One way is by using
left-justified text for longer sections of copy.

Reading relies on visual cues to make sense of where we are on a page


or screen. One of the most important cues is the start of a new line, which
acts as an anchor for our eyes when jumping around an email. It’s helpful
to keep that anchor in the same place for every new line in longer bits
of copy, but many designers prefer the visual symmetry provided by
centered text. Using left-justified text is one of the best ways to keep
copy readable.

Long sections of
center-justified text

   The Ultimate Guide to Email Accessibility 20 / 34


The #1 simple trick that has a big impact on email
accessibility: If you have any copy that’s longer than
two lines, left-align that copy.

Tweet this

Justified text, which adjusts the spacing between words


to keep uniform lines of text, creates those anchors, but
comes with other problems. When using fully justified
text, rivers of white are often introduced which create Fully justified text
Lorem i psum dolor s it a met,
consectetur adipiscing e lit, sed

hurdles for people with cognitive disabilities. do e iusmod t empor i ncididunt u t


labore et dolore magna a liqua.

Use a minimum font size of 14px


You should ensure that your text is large enough for
people to easily read, regardless of what size screen
they are using. Some mobile devices, like iPhones, will automatically enlarge text that is less than 14px in
size. Keeping copy at least that big—preferably even larger—can help create better reading experiences.

Optimize your line spacing


Ensuring that there is enough space between lines of text, but not too much space, is a great way to
improve readability. When lines of copy are too close together, it’s hard to tell them apart. Conversely,
when they are too far apart, it’s hard to know where to look for the next line as they all look like short,
individual paragraphs. The World Wide Web Consortium even has clear guidelines around proper
line spacing, suggesting 1.5 to 2 is preferred to single spacing.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed consectetur adipiscing elit, sed consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut do eiusmod tempor incididunt ut do eiusmod tempor incididunt ut
labore et dolore magna aliqua. labore et dolore magna aliqua. labore et dolore magna aliqua.

Too close Just right Too far apart

   The Ultimate Guide to Email Accessibility 21 / 34


Keep contrast high
Contrast is the difference between two elements in an email. Most often, it’s the difference between the
color of copy and the background on which it sits. Too low of contrast and people with low-vision can have
an extraordinarily hard time reading an email.

Fortunately, there are well-established guidelines for proper contrast. The Web Content Accessibility
Guidelines clearly define how they determine appropriate contrast. The main rule is to make elements
distinguishable. In their words:

“Make it easier for users to see and hear content including


separating foreground from background.”

There are a variety of ways to do this, including using color, font weight, and font size. Regardless of which
method you use, make sure your elements contrast enough with other elements to ensure your emails are
accessible. Accessibility group WebAIM even has a free contrast checker online that can help identify any
contrast issues before your subscribers do.

Increase usability
When it comes to actually interacting with emails, you should ensure that all links and buttons—
anything considered a touch target—are usable.

When it comes to text links, this means making those links distinguishable from the surrounding text.
There is a reason the default for a link is underlined blue text. When overriding that styling, you should
do so sparingly. Underlines, especially, are helpful for denoting links in an email. There are approximately
300 million colorblind people in the world, so relying solely on color for link styling puts them in
a difficult position.

For calls-to-action and buttons, keep them large enough to be tapped by even the biggest,
shakiest thumbs or pointing devices. And make sure there is ample whitespace around those
targets so there aren’t accidental link taps and avoidable frustration for users.

   The Ultimate Guide to Email Accessibility 22 / 34


For both text links and buttons, including a hover state is another great way to create a better, more
accessible user experience. Targeting links in your CSS and using the :hover pseudo selector allows you
to apply different properties when a user hovers over those links. This can provide a clear indicator that
a piece of content can be clicked and is an often overlooked enhancement in email design. Anthony from
UX Movement sums it up nicely in his article, Why Your Links Need a Hover Effect:

“Whether your users are colorblind or not, everyone should be


able to spot and target links with ease. Adding a hover effect
to your links is a simple and effective way to meet their needs.
Links and text shouldn’t just look different. For the best user
experience, they should also behave differently.

Anthony T,
UX Movement

Keep your email layout simple


The layout of your email itself can affect accessibility.

Complex, multi-column layouts can lead to sensory overload for users. The more complex a layout,
the easier it is to get lost in an email, so simpler layouts are often preferred. Single column layouts
are especially effective at creating accessible campaigns—they streamline content and help reinforce
hierarchy, aiding scannability in the process.

Single column layout Multi-column layout

   The Ultimate Guide to Email Accessibility 23 / 34


Single column layouts are also generally easier to adjust across different screen sizes. As more of the
world comes online, more people are using smaller mobile devices to access the internet and email.
Regardless of which technique you’re using, keeping your emails responsive across different devices
is a great way to improve the subscriber experience.

Test your email in 90+ email clients


See how your email works across multiple desktop, web,
and mobile apps and devices with Litmus Email Previews.

Test your designs

Code: How to make your email code more accessible

While copywriting and visual design are important, improving the code behind your email campaigns is
one of the most powerful ways to create more accessible emails, especially for subscribers relying on
assistive technology like screen reader software.

Screen readers work by looking at the underlying code of an interface—or in our case, an email—and
translating it into audio that reads the interface out to the user. Optimizing our code is the best way to
make sure what is read out loud is actually usable.

Use accessible tables


Most email templates are built using HTML tables. HTML tables are still the most reliable way to structure
emails and have them display properly across the 90+ email clients in popular use. However, HTML tables
are actually meant to be used for tabular data, not layouts.

   The Ultimate Guide to Email Accessibility 24 / 34


The default for most screen readers is to read each individual table, table row, and table cell out loud to
the user. For emails that often rely on multiple nested tables, this means that subscribers have to wade
through a lot of markup garbage to get to the actual content. We can easily disable this behavior by
including an attribute on each table in our email’s HTML.

<table role="presentation" border="0" cellpadding="0" cellspacing="0"></table>

By including the role attribute with the value “presentation,” we effectively remove the table from the
screen reader’s model and prevent it from being read aloud. The screen reader then skips to the content
within, allowing the subscriber to focus on the content instead of manually skipping through useless
layout markup.

It should be noted that there are other ARIA roles that could be used instead of presentation.
Presentation is set to be deprecated in future versions of the ARIA spec, with the “none” role replacing it.
However, support for none is currently limited, so it’s up to you to decide which role works for your specific
audience. If you’re using tables to create bulletproof buttons, you may want to include the button role
to provide additional context for users that need it. Just like with alternative text on images, though, you
shouldn’t leave roles off of tables, as that will result in screen readers reading each individual table,
table row, and table cell to the user.

What do your emails sound like?


Hear how your emails sound when read out loud by screen readers
with Litmus’ new accessibility tools in Litmus Checklist.

Hear your email

   The Ultimate Guide to Email Accessibility 25 / 34


Use semantic HTML
Just like the table element means something specific to a screen reader, other HTML elements provide
additional context around content. This context, or semantic meaning, helps users navigate and consume
content more easily.

When coding your emails, you should strive to use proper semantic structure in your HTML document by
utilizing HTML elements for their intended purpose.

For example, take a typical product announcement email. It contains a headline, product image,
description of a product, customer quote, and call-to-action. Although it’s tempting to mark all of that
up using table cells, divs, or spans, there are better HTML elements to use.

• Headlines should use heading elements, which include h1, h2, h3, h4, h5, and h6 in HTML.
The h1 element is reserved for the most important headline or title of a document, with each
subsequent heading decreasing in importance.

• Other copy, like product descriptions, should be marked up using either a p (paragraph) tag or
a span. Multiple lines call for a paragraph, whereas standalone lines are usually spans of text.

• Customer quotes can use the blockquote element to provide additional context.
Additionally, you can use the cite element to denote the source of the quote.

• The button element, while semantically useful, isn’t well-supported across email clients. Therefore,
using an anchor tag (a) with the role=”button” is preferred for CTAs that are styled like buttons.

Mozilla currently lists 154 HTML elements, 31 of which are deprecated and probably shouldn’t be used.
That means there’s all kinds of semantic value we can add to our campaigns to make them more
accessible for subscribers.

Build on an accessible foundation


Want to build accessible emails but don’t know where to start?
Use our pre-built, heavily-tested starter templates to build
beautiful emails for everyone.

Find the perfect template today

   The Ultimate Guide to Email Accessibility 26 / 34


Always include alternative text for images
Earlier, we discussed how all-image emails create problems for users. Still, images are often required
in email campaigns. How can we ensure that images in our emails are still accessible?

The best way is to include alternative text—or alt text—with your images. Alternative text is a textual
equivalent for your images that describes them to subscribers who use assistive technology or have
images turned off. It provides critical missing context for users who would otherwise be left in the dark.

Alternative text is easy to include. All that’s needed is the addition of the alt attribute to the img tag
in your HTML.

<img alt="Save up to 50 percent during the summer sales event."


src="example.jpg" width="600" border="0">

When a screen reader encounters that image, it will read the alternative text out loud. As a bonus,
when images are disabled in most email clients, that alternative text will still be displayed. You can
even add inline CSS to the image to style alternative text.

<img alt="Save up to 50 percent during the summer sales event."


src="example.jpg" width="600" border="0" style="color: #006fee; font-family:
sans-serif; font-size: 32px; font-weight: bold; line-height: 48px;">

Images are used for multiple things in email. However, not all images require the same type of alternative
text. Generally speaking, images can be categorized as informative, active, or decorative.

• Informative images provide additional information to subscribers that is in addition to any other
copy surrounding them.

• Active images prompt a subscriber to take some action—they are additional calls-to-action
in an email.

• Decorative images are there solely for visual design and don’t impart any additional information
to subscribers.

   The Ultimate Guide to Email Accessibility 27 / 34


While it can be tempting to apply descriptive alt text to each type, that can actively work against the
goal of making an email accessible. For example, providing descriptions for decorative images adds
unnecessary information to the document when read aloud by screen readers, resulting in frustration
and, potentially, confusion for subscribers. The following guidelines will help you keep your images
and emails more accessible and usable.

1. Alt text for informative images should describe the information in that image and repeat the text
in the image if there is any. Avoid repeating information if the surrounding copy states the same
thing as the image.

2. Alt text for active images should describe the result of the intended action. Think of them like
buttons or text links.

3. Include an empty alt attribute (e.g. alt=””) for decorative images. Failing to do so will result in
most screen readers reading the entire image source URL, creating a confusing and frustrating
experience for users.

4. Avoid calling attention to the fact that it is an image. Don’t use language like, “This is a picture
of…” or “Here’s an image of…” This doesn’t add any value to the subscriber and only serves as a
reminder that they can’t see your images.

5. Don’t use alt text as a prompt for users to download or enable images, as not all users will have
this ability or benefit from it.

6. When in doubt, read your alternative text out loud along with the rest of the surrounding content.
If it sounds natural to you and provides the intended value, it’s good alt text.

Hear Your Email with Litmus


Hear exactly what your email sounds like to subscribers using screen
readers. Try the latest accessibility tools in Litmus Checklist today.

Learn more about Litmus Checklist

   The Ultimate Guide to Email Accessibility 28 / 34


Specify a language attribute
As email marketers continue to send to a global audience, it’s important to look at one final coding
technique to create more accessible emails: the HTML language attribute.

The language—or lang—attribute specifies what language a piece of content is. It is usually set at a global
level on the HTML tag:

<html lang="en">

However, it can also be applied directly to other elements. This is helpful when mixing different languages
in a single email. For example, while the global language of an email is set to English (en), the email could
include a message for Spanish speakers. In this case, the lang attribute can be set on the paragraph of
Spanish, like so:

<p lang="es">¿Hablas español? ¡Nosotros también!</p>

In both cases, the language attribute has one major benefit: It tells any assistive technology which
language profile to use for content. When a screen reader encounters the language attribute, it will switch
the language profile to match, which results in the use of correct pronunciation and accents, allowing for
a much better overall experience for subscribers. You wouldn’t want your email written in French to be
pronounced in American English, would you?

It’s important to note that the language attribute doesn’t translate content for you. You can’t wrap English
in a French language tag and expect a screen reader to start speaking French. If you need to translate and
localize content in an email, you need to do that as part of your content development process. However,
once translated, the lang attribute ensures that the localized content sounds natural to native speakers.

   The Ultimate Guide to Email Accessibility 29 / 34


8 Getting Buy-In
for Accessibility

While there are altruistic reasons why you should embrace


accessibility in email, many stakeholders won’t be swayed by
good intentions. Making the business case for accessibility—and
showing a process for implementing accessibility best practices—
can be the best way to get stakeholders and teammates onboard.

   The Ultimate Guide to Email Accessibility 30 / 34


As we’ve seen in earlier sections, email is an extremely
valuable channel. Email marketers average a return
on investment of 42:1, far higher than other marketing
channels. And more people than ever are spending
significant amounts of time in email, including a disabled
population that controls over $1 trillion in annual
disposable income.

Ignoring accessibility not only creates frustrating user


experiences, but excludes you from creating long-lasting
and valuable relationships with an important population
of people. And, when you include voice assistant users,
you’re leaving even more money on the table.

Why you should embrace accessibility


When it comes down to it, there are clear reasons every business should start building accessible
email campaigns:

1. Email is ranked as one of the most valuable marketing channels.

2. The disabled population controls significant disposable income.

3. The number of non-disabled users interacting with emails via voice is growing.

4. 
Industries like healthcare, government, higher education, and finance are subject to
accessibility legislation.

5. 77% of brands are making accessibility a priority. If you don’t, you’re falling behind.

It’s no longer an option to ignore accessibility. If you do, you’re effectively ignoring a huge user base
and the business they control.

   The Ultimate Guide to Email Accessibility 31 / 34


Steps for securing buy-in
Making the case for investing in accessibility can be difficult depending on your team structure and goals.
Having a clear plan in place and knowing what resources you need to execute that plan are key to getting
the buy-in needed to improve your emails for users. Here are our tips for getting your team onboard with
accessibility in email.

1. Present your case: Use the stats and research in this book to provide evidence for why your team
should focus on accessibility.

2. Audit your emails: Review your own email campaigns to identify opportunities for improvements.

3. Plan out improvements: Based on your audit, document which campaigns need improvements,
who will make those changes, how long those updates will take, and how those updates will
improve a user’s experience.

4. Gather your tools: Figure out what tools you need to make those updates. For building and
testing emails, Litmus Builder combined with the new accessibility checks in Litmus Checklist
will allow you to quickly create accessible emails and ensure they’re working as intended.
A variety of third-party tools and browser extensions are also available to help with the
development process.

5. Get additional resources: Not everyone has the resources to improve accessibility on their
own. If needed, work with third-party accessibility consultants or email developers, or reach
out directly to your ESP to see if they can help improve the accessibility of their email
templates and tools.

Keep in mind that accessibility is a spectrum, not a single solution. Although we should strive to implement
as many techniques as possible to improve the accessibility of an email campaign, that can be unrealistic
for a lot of teams.

Making even small improvements like adding ARIA roles to tables or left-aligning text can have massive
benefits for users. You don’t have to put every technique in this guide to work, but you should try to do
whatever you can to create better emails for all of your subscribers, regardless of their abilities.

   The Ultimate Guide to Email Accessibility 32 / 34


9 Wrapping up
Between copywriting, design, and code, there’s a lot that goes into creating accessible email campaigns.
Without prior experience, that work can be daunting. When you look at the potential impact—both on a
subscriber’s experience and your company’s bottom line—it’s clear that this work is worth doing.

An investment in accessibility is an investment in


improving people’s lives and your business as a result.

Tweet this

And, with Litmus’ new accessibility tools in Litmus Checklist, ensuring accessibility has never been easier.
Get valuable insights into your email’s structure, language settings, image accessibility, readability,
and even hear how your email sounds to screen reader users.

Get started today with a free 7-day trial of Litmus and join over 600,000 email professionals who rely
on Litmus to send better, more accessible email campaigns, faster.

 
About the Author

Jason Rodriguez is the Community Evangelist at Litmus. He is the author of three books on email
marketing, design, and development and frequently speaks at industry events. At Litmus, he helps
customers and the email community send better, more effective email campaigns.

 
About the Designer

Andrea Smith is a freelance designer and artist in Bluffton, SC with a passion for good software, travel, and rescue
pups. With nearly 15 years of professional design and digital marketing experience, Andrea is an award-
winning creative professional, recognized for strengths in strategic thinking and design thought leadership.

   The Ultimate Guide to Email Accessibility 33 / 34


Expand your reach with Litmus Accessibility Checks
Maximize the impact of every email with content that is accessible to all subscribers.

To review

Your email is missing a “meta content-type” attribute.

Specifying the content type is important for screen readers as it allows them to accurately identify special characters. If you’re not
sure which content type to use, we recommend inserting UTF in the <head></head> section of your emailby adding this code:

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

Passed Audits

Heading Hierarchy: Your email headings are well structured. This will help screen readers easily navigate your content.

Left Justification Check: Your email has no instances of justified or centered text! This is easier to read.

Language Type Check: Your email is tagged with the language of [Insert Dynamic Content].

Table Roles Check: Your email’s table roles are all set to “presentation”. This is easier for screen readers to navigate.

Align your brand with truly


Screen Reader NVDA Preview 0:02 / 0:50

inclusive practices.

• Instantly ensure subscribers of all


abilities can interpret your message
and connect with your brand.

• Get an automatic, comprehensive


view of accessibility test results right
Only with Litmus! Listen to how visually impaired subscribers will hear
inside Litmus Checklist, without
extra steps.
your email.

• Preview an audio recording of how a screen reader will relay your email content.
• Check important HTML tags and text
alignment required to create a great
• View a transcript of your audio file to pinpoint any areas that need adjustment.
email experience for subscribers
with visual or cognitive impairments. • Check important HTML elements like table roles, content type, ALT-text, and
language tags that affect how your email is transcribed.
• Receive guided advice on how to
resolve accessibility issues before • Review the heading hierarchy to ensure screen readers can efficiently navigate
you send. your email.

Get started today! Email [email protected] and our team will take care of you.

You might also like