Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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
  2. 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
  3. 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>
  4. 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.
  5. 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=“”>
  6. Language Allows screen readers to switch language profiles. Provides proper

    accents and pronunciation. <html lang=“en”>
  7. Hierarchy Reinforce your semantic structure. Help users scan content. Most

    Important Least Important This doesn’t even make the cut
  8. Usability Make links look like links Avoid link clusters Use

    bulletproof buttons This is a link This is a button
  9. 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
  10. 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
  11. Diversity The world’s a big place and you have a

    lot of different subscribers. Your emails should reflect that fact.
  12. 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
  13. 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
  14. 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