Creating Accessible HTML Email Campaigns

Creating Accessible HTML Email Campaigns Jason Rodriguez

Jason Rodriguez Community & Product Evangelist, Litmus rodriguezcommaj.com/newsletter @rodriguezcommaj

Why email? What makes email worth caring about?

2.9 Billion Email Users Worldwide by 2019 Source: Radicati Group

3800% ROI $38 for every $1 spent Source: DMA

Why accessibility? Do I really need to ask this question?

285 Million Low Vision Users 39 million of which are
blind

8% Color Blindness in Men 0.5% in women

What is accessibility? A site or email’s content is available
to - and it’s functionality can be operated by, anyone - regardless of ability. Tactics & Functionality

What is inclusion? Design that embraces the full range of
human diversity, with respect to ability, language, culture, gender, age, and other forms of human difference. Strategy & Content

How can we make accessible email campaigns? Tips for improving
accessibility

Technical Accessibility Accessible Design 1 2

Accessible Tables Use ARIA attributes to hide tables from screen
readers. role=“presentation” <table border=“0” cellpadding=“0” cellspacing=“0” role=“presentation”> <tr> <td> CONTENT </td> </tr> </table>

Semantic Markup <h1>This is a level 1 heading</h1> <h2>This is
a level 2 heading</h2> <h3>This is a level 3 heading</h3> <p>This is a paragraph of text. It has multiple sentences. As paragraphs do.</p> <em>This is emphasized text.</em> <strong>This is bold text.</strong> Use proper markup to provide additional context for email content.

Alternative Text Context for missing images and screen readers. Use
empty ALT attributes for decorative images. <img src=“sale.jpg” alt=“Save 20% during our Spring Sale. Save today.”> <img src=“icon.png” alt=“”>

Language Allows screen readers to switch language profiles. Provides proper
accents and pronunciation. <html lang=“en”>

True Text Favor HTML text over copy locked in images.

True Text Keeps email readable when images are disabled.

Contrast Follow WCAG guidelines for keeping text readable for low
vision users. Bad Better Best

Hierarchy Reinforce your semantic structure. Help users scan content. Most
Important Least Important This doesn’t even make the cut

Readability Font size and style Line length and spacing Alignment

Usability Make links look like links Avoid link clusters Use
bulletproof buttons This is a link This is a button

Layout Use simpler layouts Make emails responsive

Going Beyond Accessibility Some thoughts on creating more inclusive email
experiences

50 Milliseconds To make an impression Source: Taylor & Francis
Online

11.1 Seconds Average email attention span Source: Litmus

The average adult reader can read 250 to 300 words
per minute. If the average reading time for an email is 11 seconds, then the ideal length of an email is around 50 words. Tom Tate, AWeber

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. The W3C Working Group

Simpler Text Shorter and more readable. Less jargon, more human.

Localization Translate for specific audiences, but localize to include those
audiences.

Diversity The world’s a big place and you have a
lot of different subscribers. Your emails should reflect that fact.

Consent Explicitly ask for permission to email people. Use double
opt-in when needed.

Silence, pre-ticked boxes or inactivity should not constitute consent. GDPR

The data subject shall have the right to withdraw his
or her consent at any time. (…) It shall be as easy to withdraw as to give consent. GDPR

Respect Think of subscribers as people, not just entries in
a database somewhere.

The reality is that when brands operate with empathy and
use it to fuel every decision, action, message, product, service and experience, they are both more agile and more successful. Ad Age

Some creators treat accessibility as a barrier to innovation because
it requires foresight and time and testing. That kind of thinking is an excuse for avoiding good work. Think about it this way: accessibility provides options, and options lead to innovation. Accessibility isn’t a barrier — it’s what removes them. It frees us from one path and gives us many. Mischa Andrews

Cheers! Have some resources: rodriguezcommaj.com/speaking/refreshdetroit2019

Creating Accessible HTML Email Campaigns

Creating Accessible HTML Email Campaigns

More Decks by RodriguezCommaJ

Other Decks in Design

Featured

Transcript