HTML Email Accessibility: A Developer Guide
Build emails that work for everyone, including users with disabilities.
Approximately 15% of the world's population lives with some form of disability. Many use assistive technologies like screen readers to access email. Accessible email design is both ethical and practical since it often improves the experience for everyone.
Email accessibility presents unique challenges. The table-based layouts necessary for cross-client compatibility can confuse screen readers. This guide covers techniques that make emails work for all users.
Semantic Structure
Use Role Attributes
Tables used for layout should be marked with role="presentation" to tell screen readers they are not data tables:
<table role="presentation" width="100%">
<tr>
<td>
Layout content here
</td>
</tr>
</table>Without this attribute, screen readers announce table navigation ("row 1, column 1") which is confusing for layout tables.
Proper Heading Hierarchy
Use heading elements (h1, h2, h3) in logical order:
<h1 style="font-size: 24px; margin: 0;">Welcome to Our Service</h1>
<p>Introduction paragraph...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">What's New</h2>
<p>Feature description...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">Getting Started</h2>
<p>Instructions...</p>Screen reader users navigate by headings. Proper hierarchy helps them understand document structure and jump to relevant sections.
Use Semantic Elements
Where supported, use semantic HTML:
- <p> for paragraphs
- <ul>/<ol> for lists
- <strong> for important text
- <em> for emphasis
Images and Alt Text
Meaningful Alt Text
Every image needs appropriate alt text:
<!-- Informative image: describe the content -->
<img src="product.jpg" alt="Blue running shoes with white soles" />
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="" />
<!-- Image with text: include the text -->
<img src="sale-banner.jpg" alt="50% off all items this weekend" />Guidelines:
- Describe what the image shows, not that it is an image
- Keep alt text concise (under 125 characters)
- For decorative images, use alt="" (empty, not omitted)
- If an image contains text, include that text in alt
Do Not Rely on Images Alone
Some users have images disabled. Important information should be in text, not just images. If you use an image button, include a text link fallback.
Color and Contrast
Sufficient Contrast Ratios
WCAG 2.1 requires minimum contrast ratios:
- Normal text: 4.5:1 contrast ratio
- Large text (18px+ or 14px+ bold): 3:1 ratio
<!-- Good contrast -->
<p style="color: #333333; background-color: #ffffff;">
High contrast text
</p>
<!-- Poor contrast (avoid) -->
<p style="color: #999999; background-color: #ffffff;">
Low contrast text
</p>Use contrast checking tools like WebAIM's contrast checker to verify.
Do Not Use Color Alone
Color should not be the only way to convey information:
<!-- Bad: color only -->
<span style="color: red;">Error</span>
<!-- Good: color plus icon/text -->
<span style="color: red;">⚠ Error: Invalid email address</span>Links and Buttons
Descriptive Link Text
Link text should describe the destination:
<!-- Bad -->
<a href="...">Click here</a>
<!-- Good -->
<a href="...">View your order details</a>
<!-- Good -->
<a href="...">Download the 2026 report (PDF, 2MB)</a>Screen reader users often navigate by links. "Click here" repeated multiple times is useless. Descriptive text helps users understand where each link goes.
Focus Indicators
Links and buttons should have visible focus states for keyboard users. While email clients handle this inconsistently, you can try:
<a href="..." style="outline: 2px solid #007bff;">
Link text
</a>Language and Reading
Declare Language
Specify the document language:
<html lang="en">Screen readers use this to select the correct pronunciation. For content in other languages, use the lang attribute on specific elements:
<p>The French word <span lang="fr">bonjour</span> means hello.</p>Readable Font Sizes
Minimum 14px for body text, preferably 16px. Line height of 1.4-1.6 improves readability:
<p style="font-size: 16px; line-height: 1.5;">
Body text that is easy to read
</p>Testing Accessibility
Screen Reader Testing
Test with actual screen readers if possible:
- VoiceOver (macOS/iOS): Built-in, activate with Cmd+F5
- NVDA (Windows): Free, widely used
- JAWS (Windows): Industry standard, paid
Listen to how your email is announced. Is the structure clear? Are images described? Are links meaningful?
Automated Testing
Tools like Litmus and Email on Acid include accessibility checkers. They catch common issues like missing alt text and contrast problems.
Email Builders and Accessibility
Good email builders handle some accessibility automatically. Sequenzy and similar platforms add role="presentation" to layout tables, prompt for alt text on images, and generate semantic HTML.
Frameworks like MJML produce accessible output by default. The components are designed with screen readers in mind.
Accessibility Checklist
Before sending:
- All layout tables have role="presentation"
- All meaningful images have descriptive alt text
- Decorative images have empty alt=""
- Headings are in logical order (h1, h2, h3)
- Color contrast meets WCAG requirements
- Links have descriptive text
- Language is declared
- Font size is at least 14px
The Bottom Line
Accessible email is not difficult when you understand the basics. Use semantic structure, provide alt text, ensure contrast, and write descriptive links. These practices benefit all users, not just those with disabilities.
If you are using an email builder or framework, check that it follows accessibility best practices. Good tools make accessibility easier. Sequenzy and other modern platforms include accessibility features by default.