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

Transcript

1. Creating Accessible HTML
   Email Campaigns
   Jason Rodriguez
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. View Slide

7. View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

15. Technical Accessibility
    Accessible Design
    1
    2
    

    View Slide

16. Accessible Tables
    Use ARIA attributes to hide
    tables from screen readers.
    role=“presentation”
    cellspacing=“0” role=“presentation”>
    
    
    CONTENT
    
    
    
    

    View Slide

17. Semantic Markup
    This is a level 1 heading
    This is a level 2 heading
    This is a level 3 heading
    This is a paragraph of text. It
    has multiple sentences. As
    paragraphs do.
    This is emphasized text.
    This is bold text.
    Use proper markup to
    provide additional context
    for email content.
    

    View Slide

18. Alternative Text
    Context for missing images
    and screen readers.
    Use empty ALT attributes
    for decorative images.
    during our Spring Sale. Save today.”>
    
    

    View Slide

19. View Slide

20. Language
    Allows screen readers to
    switch language profiles.
    Provides proper accents
    and pronunciation.
    
    

    View Slide

21. True Text
    Favor HTML text over
    copy locked in images.
    

    View Slide

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

    View Slide

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

    View Slide

24. View Slide

25. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. View Slide

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

    View Slide

31. Layout
    Use simpler layouts
    Make emails responsive
    

    View Slide

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

    View Slide

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

    View Slide

34. 11.1 Seconds
    Average email attention span
    Source: Litmus
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

48. View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide