Email Accessibility Guidelines
Follow these WCAG 2.2-based guidelines to create email campaigns that are accessible to everyone, including users with disabilities.
Text & Structure
Language Attributes
Always specify the primary language of your email content to help screen readers pronounce text correctly.
Language Declaration
<html>
<body>
<p>Welcome to our newsletter!</p>
</body>
</html>lang attributes for any text that differs from the main language.Heading Structure
Use proper heading hierarchy to create a logical document structure. Never skip heading levels just for visual appearance.
Proper Heading Hierarchy
<h1>Newsletter Title</h1>
<h3>Article Title</h3>
<p>Article content...</p>
<h3>Another Article</h3>Typography & Spacing
- • Use minimum 14-16px font size for body text
- • Maintain line-height of at least 1.4 for readability
- • Ensure adequate paragraph spacing
- • Use relative units (em, rem) when possible
Accessible Typography
<p style="font-size: 12px; line-height: 1.2;">
Tiny text that's hard to read with poor spacing.
</p>Images & Media
Alternative Text
Provide meaningful alternative text for images that convey information. Be concise but descriptive.
Meaningful Alt Text
<img src="product.jpg" alt="image">
<img src="chart.png" alt="chart">Decorative Images
Images that don't add information should use empty alt attributes to prevent screen readers from announcing them.
Decorative Images
<img src="decorative-border.png" alt="decorative border">
<img src="spacer.gif" alt="spacer">Motion & Animation
Avoid auto-playing animations that last longer than 5 seconds. Always provide controls to pause motion.
Accessible Animation
<img src="spinning-logo.gif" alt="Company logo">
<div style="animation: blink 1s infinite;">SALE!</div>Color & Contrast
Contrast Ratios
Ensure sufficient contrast between text and background colors for readability.
WCAG Requirements
- • Normal text: 4.5:1 minimum
- • Large text (18px+): 3:1 minimum
- • Non-text elements: 3:1 minimum
- • Enhanced (AAA): 7:1 / 4.5:1
Testing Tools
- • WebAIM Contrast Checker
- • Colour Contrast Analyser
- • Browser DevTools
- • Stark (design tools)
Sufficient Contrast
<p style="color: #999999; background: #FFFFFF;">
Low contrast text (2.8:1 ratio)
</p>Color as Information
Never rely solely on color to convey important information. Always provide additional indicators.
Color + Text Indicators
<span style="color: red;">$29.99</span>
<span style="color: green;">In Stock</span>
<span style="color: red;">Out of Stock</span>Tables & Layout
Data Tables
Use proper table markup with headers for tabular data. Include captions when helpful.
Accessible Data Table
<table>
<tr>
<td>Product</td>
<td>Price</td>
</tr>
<tr>
<td>Sweater</td>
<td>$49.99</td>
</tr>
</table>Layout Tables
While CSS is preferred, if you must use tables for layout, include role="presentation" and ensure linear reading order.
Layout Table (if necessary)
<table>
<tr>
<td>Logo</td>
<td>Navigation</td>
</tr>
</table>Dark Mode & Email Clients
Client Compatibility
Different email clients have varying support for accessibility features. Test across major clients and provide fallbacks.
| Feature | Outlook | Gmail | Apple Mail | Thunderbird |
|---|---|---|---|---|
| Alt Text | ✅ Full | ✅ Full | ✅ Full | ✅ Full |
| Dark Mode | 🟨 Partial | ✅ Full | ✅ Full | ✅ Full |
| CSS Support | 🟨 Limited | 🟨 Partial | ✅ Good | ✅ Good |
Safe Font Stacks
Use web-safe fonts with proper fallbacks to ensure readability across all email clients and operating systems.
Safe Font Stacks
<p style="font-family: 'Custom Font';">
Email content
</p>Quick Checklist
Essential Items
- ☐ Language attribute on HTML element
- ☐ Proper heading hierarchy (h1 → h2 → h3)
- ☐ Meaningful alt text for informative images
- ☐ Empty alt="" for decorative images
- ☐ Minimum 4.5:1 contrast for normal text
- ☐ Descriptive link text
Enhanced Items
- ☐ Focus indicators on interactive elements
- ☐ Adequate touch target sizes (44×44px)
- ☐ Table headers for data tables
- ☐ No reliance on color alone
- ☐ Safe font stacks with fallbacks
- ☐ Linear reading order