Top tips for improving accessibility in your email newsletters; delivered to UNC Communications Council meeting Dec. 13, 2017.

1. ACCESSIBILITY IN EMAIL
M A K I N G Y O U R N E W S L E T T E R S R E A D A B L E B Y A L L
P H I L D A Q U I L A
I T S D I G I T A L S E R V I C E S
p d a q u i l a @ u n c . e d u

3. 1. Color contrast
Web Content Accessibility Guidelines:
4.5 to 1 for small type
3 to 1 for larger type

4. Color contrast
Carolina Blue (retired)
webaim.org/resources/contrastchecker

5. Color contrast
Carolina Blue (2017)
webaim.org/resources/contrastchecker

6. Color contrast
identity.unc.edu/colors

7. 2. Meaningful links
Banish Read more and Click here
Make links descriptive
of destination
Underline all links
READ THIS
CLICK THIS

8. Meaningful links
✖ Click here to contact our staff.
✓ To learn more, please contact our staff.
✖ You can read more about our program.
✓ Read more about our program.

9. 3. Heading levels
I. Introduction to topic
II. Theory 1
A. Solution 1
1. Detail 1
2. Detail 2
B. Solution 2
1. Detail 1
2. Detail 2
3. Detail 3
I.
A.
1.
h1
h2
h3
➞

10. Heading levels
Adds structure for screen readers
<h1>Title</h1>
<h2>Section</h2>
<h2>Section</h2>
<h3>Sub-section</h3>
<h2>Section</h2>

11. Heading levels
MailPoet

12. 4. Alternative text
Campaign Master
Essential for screen readers
Essential for sighted users who disable images

13. Alternative text FLATTENED GRAPHICS
AS SENT
alt=“This is your last
chance to save”
NEW & IMPROVED
alt=“Extended ‘til
midnight. Last chance to
save your green.
20% off site-wide.
Use promo code GREEN20
at checkout.
Button SHOP NOW.”

14. BONUS TIP
Include a link to open newsletter
in browser

15. SUMMARY
4 tips to improve email accessibility
1. Intelligent color scheme
2. Meaningful link text
3. Heading levels for structure
4. Alt text for images
pdaquila@unc.edu