role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible

eROI · PERFORMANCE IS ART · eROI.COM
5 Pro Tips for Making Your Email
More Accessible
Heidi Olsen @swisswebmiss

2
WHO IS SHE?
Hallo! I’m Heidi.
■ Senior Developer @ eROI
■ Cat Lover
■ World Traveler
■ Fun Professional
■ #EmailGeek
I live in Portland, Oregon
(its cool, but not
Amsterdam cool)

3
WHAT IS AN eROI?
We craft compelling digital experiences
for email, web, and social.

Web Email
6
WEB VS. EMAIL DEVELOPMENT
<style>
body {
background: #7bceeb
url("https://eroi.com/image.jpg")
no-repeat top center;
}
</style>
<body>

</body>

Web Email
7
WEB VS. EMAIL DEVELOPMENT
<style>
body {
background: #7bceeb
url("https://eroi.com/image.jpg")
no-repeat top center;
}
</style>
<body>
</body>
<div style="background-color:#7bceeb;">

<table align=”center” width="100%"
cellpadding="0" cellspacing="0" border="0"
role=”presentation”>
<tr>
<td valign="top" align="left"
background="https://eroi.com/image.jpg"
style=”background:url(https://eroi.com/imag
es.jpg no-repeat top center;”>
</td></tr></table></div>

8
WEB VS. EMAIL QA
Web
11 variations
Email

9
WEB VS. EMAIL QA
Web
11 variations
Email
60+ variations

10
INNOVATION OPPORTUNITIES
Taco Bell Breakfast
We created a scrolling
experience in email, something
that has never been done
before. Accomplished with CSS
positioning and graceful
fallbacks, the email was a huge
hit for subscribers and the
email marketing community.

11
API INTEGRATION
Random Riffs
A Mad Libs style email acquisition
campaign made possible through
API calls and triggered send
definitions.

5 PRO TIPS FOR ACCESSIBLE EMAIL
Let’s get started...
See? Not so bad.
¯_(ツ)_/¯

13
<table role=”presentation”>
1. Know Your Role

14
2. Code When You Can

15
2. Code When You Can
<div><a href="http://site.com"
style="background-color:#FFFF00;border:1px solid
#000000;border-radius:5px;color:#000000;display:inline-b
lock;font-family:sans-serif;font-size:13px;font-weight:b
old;line-height:50px;text-align:center;text-decoration:n
one;width:200px;-webkit-text-size-adjust:none;mso-hide:a
ll;">CLICK FOR DEALZ!</a></div>
Bulletproof Buttons via Campaign
Monitor: https://buttons.cm/

16
3. Don’t Be Too Flashy

17
<!DOCTYPE html>
// Add relevant ‘lang’ attribute
<html lang="nl" xml:lang="nl">
<head>
// Define a charset for special characters
<meta charset=”utf-8" />
// Enable zoom
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// Use headings and paragraph tags with an inline reset
<h1 style=”padding:0;margin:0;mso-line-height-rule:exactly;”></h1>
<p style=”padding:0;margin:0;mso-line-height-rule:exactly;”></p>
4. Be Semantic

18
5. Send Multipart Emails (MIME)

19
CLOSING THOUGHTS
Bonus Tip: Switch Perspectives
TESTING TOOLS:
■ Accessible Email HTML Tester:
http://www.accessible-email.org/
■ Litmus Email Preview Tool:
https://litmus.com/
SCREEN READERS FOR EMAIL:
■ Chrome with VoiceOver on Mac
■ Chrome with ChromeVox on Chromebooks
■ Firefox with NVDA or JAWS on Windows
■ Window-Eyes for Windows OS

20
FURTHER RESOURCES
COMMUNITY:
■ Use #EmailGeeks + #a11y on Twitter
■ EmailGeeks Slack Channel:
https://email.geeks.chat/
BLOGS:
■ Inclusive Design:
https://www.e-village.nl/blogitem/inclusive-design-in-email
■ 10 Tips on Accessibility in Email:
http://eroi.com/ideas/10-tips-on-accessible-email/
■ Git Directory of Accessible Email Documentation by William Heinen:
https://github.com/wilbertheinen/accessible-email-documentation
Keep working towards being inclusive.

role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible

Similar to role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible (20)

More from eROI

More from eROI (6)

Recently uploaded

Recently uploaded (20)

role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible