$30 off During Our Annual Pro Sale. View Details »

Creating Accessible HTML Email Campaigns

January 17, 2019

Creating Accessible HTML Email Campaigns

Accessibility on the web is pretty well-trodden territory, even if not everyone strives to create accessible web sites. HTML marketing campaigns, on the other hand, are often ignored.

Even though both use the same underlying technology (HTML and CSS), email campaigns are largely inaccessible, leaving a sizable portion of the nearly 3 billion email users worldwide in the dark.

In this session, we'll chat about what you can do to create more accessible HTML email campaigns, both from a technical standpoint as well as a design and content-focused one.

We'll go over:

- How to properly code HTML email campaigns for accessibility
- Some quick wins for creating more accessible emails
- Design considerations for email
- How to go beyond accessibility and create inclusive email experiences
- Tools and resources for accessibility in email


January 17, 2019

More Decks by RodriguezCommaJ

Other Decks in Design


  1. Creating Accessible HTML Email Campaigns Jason Rodriguez

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

  3. Why email? What makes email worth caring about?

  4. 2.9 Billion Email Users Worldwide by 2019 Source: Radicati Group

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

  6. None
  7. None
  8. Why accessibility? Do I really need to ask this question?

  9. 285 Million Low Vision Users 39 million of which are

  10. 8% Color Blindness in Men 0.5% in women

  11. None
  12. 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
  13. 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
  14. How can we make accessible email campaigns? Tips for improving

  15. Technical Accessibility Accessible Design 1 2

  16. 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>
  17. 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.
  18. 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=“”>
  19. None
  20. Language Allows screen readers to switch language profiles. Provides proper

    accents and pronunciation. <html lang=“en”>
  21. True Text Favor HTML text over copy locked in images.

  22. True Text Keeps email readable when images are disabled.

  23. Contrast Follow WCAG guidelines for keeping text readable for low

    vision users. Bad Better Best
  24. None
  25. None
  26. Hierarchy Reinforce your semantic structure. Help users scan content. Most

    Important Least Important This doesn’t even make the cut
  27. Readability Font size and style Line length and spacing Alignment

  28. Readability Font size and style Line length and spacing Alignment

  29. None
  30. Usability Make links look like links Avoid link clusters Use

    bulletproof buttons This is a link This is a button
  31. Layout Use simpler layouts Make emails responsive

  32. Going Beyond Accessibility Some thoughts on creating more inclusive email

  33. 50 Milliseconds To make an impression Source: Taylor & Francis

  34. 11.1 Seconds Average email attention span Source: Litmus

  35. 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
  36. 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
  37. Simpler Text Shorter and more readable. Less jargon, more human.

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

  39. Diversity The world’s a big place and you have a

    lot of different subscribers. Your emails should reflect that fact.
  40. None
  41. None
  42. None
  43. None
  44. Consent Explicitly ask for permission to email people. Use double

    opt-in when needed.
  45. Silence, pre-ticked boxes or inactivity should not constitute consent. GDPR

  46. 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
  47. Respect Think of subscribers as people, not just entries in

    a database somewhere.
  48. None
  49. 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
  50. 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
  51. Cheers! Have some resources: rodriguezcommaj.com/speaking/refreshdetroit2019