Over 2 billion people worldwide have some form of visual impairment. Making your emails accessible isn't just good ethics—it's good business. Accessible emails reach more people and often perform better with everyone.
Why Email Accessibility Matters
- 2.2 billion people have vision impairments globally
- 15% of the world's population lives with some form of disability
- Legal requirements in many countries (ADA, WCAG compliance)
- Better engagement for all users, not just those with disabilities
The Essential Accessibility Checklist
1. Add Alt Text to All Images
Screen readers read alt text aloud. Without it, users hear "image" or nothing at all.
<!-- Bad -->
<img src="sale-banner.jpg" />
<!-- Good -->
<img src="sale-banner.jpg" alt="Summer Sale: 50% off all products through July 31" />
<!-- For decorative images -->
<img src="decorative-line.jpg" alt="" role="presentation" />Alt text tips:
- Describe the image's purpose, not just its appearance
- Include text that's part of the image
- Keep it under 125 characters when possible
- Use empty alt="" for purely decorative images
2. Use Semantic Structure
Proper heading hierarchy helps screen reader users navigate:
<!-- Good structure -->
<h1>Monthly Newsletter</h1>
<h2>This Month's Features</h2>
<p>Content here...</p>
<h2>Upcoming Events</h2>
<p>More content...</p>
<!-- Bad: Skipping levels -->
<h1>Newsletter</h1>
<h4>Section</h4> <!-- Skipped h2, h3 -->3. Add role="presentation" to Layout Tables
Email layout relies on tables, but screen readers try to read them as data tables. Fix this:
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td>This is layout, not data</td>
</tr>
</table>4. Ensure Sufficient Color Contrast
WCAG requires a contrast ratio of at least:
- 4.5:1 for normal text
- 3:1 for large text (18px+ or 14px+ bold)
<!-- Poor contrast -->
<p style="color: #999999; background: #ffffff;">Hard to read</p>
<!-- Good contrast -->
<p style="color: #333333; background: #ffffff;">Easy to read</p>5. Use Readable Font Sizes
Minimum recommended sizes:
- Body text: 14-16px minimum
- Small text: Never below 12px
- Line height: At least 1.5x font size
<p style="font-size: 16px; line-height: 1.5;">
Readable body text
</p>6. Write Descriptive Link Text
Screen readers can navigate by links. "Click here" doesn't help:
<!-- Bad -->
<a href="...">Click here</a> to view our products.
<!-- Good -->
<a href="...">View our summer product collection</a>
<!-- Also acceptable -->
View our <a href="...">summer product collection</a>.7. Add Language Attribute
Help screen readers pronounce content correctly:
<html lang="en">
...
<p lang="fr">Bonjour, comment allez-vous?</p>
</html>8. Don't Rely on Color Alone
Colorblind users may not see your color coding:
<!-- Bad: Color only -->
<span style="color: red;">Error</span>
<!-- Good: Color + text indicator -->
<span style="color: red;">⚠ Error: Please fix this issue</span>9. Provide Text Alternatives for Visual Content
If you're showing a chart or infographic:
<img src="sales-chart.png" alt="Q1 sales increased 25% from $1M to $1.25M" />
<!-- Or provide a data table alternative -->
<table role="presentation">
<tr>
<td>
<img src="sales-chart.png" alt="" role="presentation" />
<p><a href="...">View sales data in accessible format</a></p>
</td>
</tr>
</table>10. Make CTAs Clear and Large
Buttons should be easy to tap and understand:
<a href="..." style="
display: inline-block;
padding: 15px 30px;
font-size: 16px;
background: #7C3AED;
color: #ffffff;
text-decoration: none;
border-radius: 6px;
">
Shop Summer Collection
</a>Testing for Accessibility
Mailglass Lite validates for key accessibility issues:
- Missing alt text on images
- Layout tables missing role="presentation"
- Font sizes below 12px
- Generic link text like "click here"
- Missing language attribute
Screen Reader Testing
For thorough testing, try these free screen readers:
| Platform | Screen Reader | Cost |
|---|---|---|
| Windows | NVDA | Free |
| macOS | VoiceOver | Built-in |
| iOS | VoiceOver | Built-in |
| Android | TalkBack | Built-in |
Quick Accessibility Checklist
- ☐ All images have descriptive alt text
- ☐ Layout tables have role="presentation"
- ☐ Color contrast meets WCAG AA (4.5:1)
- ☐ Font sizes are 14px+ for body text
- ☐ Links have descriptive text (not "click here")
- ☐ HTML has lang attribute
- ☐ Content doesn't rely on color alone
- ☐ Headings follow logical order (h1 → h2 → h3)
- ☐ Buttons are large enough to tap (44x44px minimum)
- ☐ Line height is at least 1.5x font size
Key Takeaways
- Always add alt text to images
- Use role="presentation" on layout tables
- Ensure 4.5:1 contrast ratio minimum
- Write descriptive, actionable link text
- Test with actual screen readers when possible
Ready to make your emails more accessible? Try Mailglass Lite for free accessibility validation.