Make your emails accessible to all recipients with alt text, semantic HTML, color contrast, and screen reader best practices
Accessible emails reach more people. Over 1 billion people worldwide live with some form of disability, and many of them use assistive technologies like screen readers, magnifiers, and keyboard navigation to read email. Building accessible emails isn’t just good practice — it improves engagement for everyone, because the same techniques that help assistive technology users also make emails clearer and more readable on all devices.
Screen readers rely on HTML structure to help users navigate content. Without proper structure, an email becomes a flat wall of text that’s difficult to scan.
Use <h1> through <h4> to create a logical content hierarchy. Never use font size or bold styling alone to indicate headings — screen readers won’t recognize them.
Email HTML relies on tables for layout. Add role="presentation" to every table that’s used for layout (not data). This tells screen readers to ignore the table structure.
Images are one of the most common accessibility barriers in email. Many email clients block images by default, and screen readers can only convey image content through alt text.
Every image needs an alt attribute that describes its content or purpose.
Copy
<!-- Informational image: describe what it shows --><img src="https://cdn.example.com/chart-q4-revenue.png" alt="Q4 revenue chart showing 23% growth from $1.2M to $1.47M" width="560" height="300" style="display: block; max-width: 100%; height: auto;"/><!-- Actionable image: describe the action --><a href="https://example.com/dashboard"> <img src="https://cdn.example.com/dashboard-button.png" alt="Go to your dashboard" width="200" height="44" style="display: block;" /></a><!-- Decorative image: use empty alt --><img src="https://cdn.example.com/divider-line.png" alt="" width="560" height="2" style="display: block;"/>
A decorative image (borders, spacers, visual flourishes) should have alt="" — not a missing alt attribute. An empty alt tells screen readers to skip the image. A missing alt causes screen readers to announce the filename, which is confusing.
Discount codes, CTAs, dates, and important instructions must exist as live text, not just in images. If images are blocked, the recipient should still understand the email.
Copy
<!-- Bad: CTA only in an image --><img src="https://cdn.example.com/get-started-button.png" alt="Get started" /><!-- Good: bulletproof button with live text --><table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center" style="background-color: #6366F1; border-radius: 6px;"> <a href="https://example.com/start" style="display: inline-block; padding: 14px 32px; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: bold;"> Get Started </a> </td> </tr></table>
Color should never be the only way to convey information. Always pair color with text labels, icons, or patterns.
Copy
<!-- Bad: status conveyed only by color --><span style="color: red;">●</span> Failed<span style="color: green;">●</span> Delivered<!-- Good: status conveyed by color AND text --><span style="color: #dc2626;">✕ Failed</span><span style="color: #16a34a;">✓ Delivered</span>
Body text should be at least 14px, and 16px is preferred. Smaller text is difficult to read on mobile devices and for users with low vision.
Copy
<p style="font-size: 16px; line-height: 1.5; color: #4a4a68;"> Body text at 16px with 1.5 line height for comfortable reading.</p><p style="font-size: 12px; color: #9ca3af;"> Footer text can be smaller (12px minimum) but maintain adequate contrast.</p>
Always include fallback fonts. Users with custom system fonts or accessibility settings should see readable text regardless.
Copy
<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;"> This font stack covers all major operating systems with clean, readable defaults.</p>
Always include a plain text version of your email alongside the HTML version. Some recipients prefer plain text, and some email clients don’t render HTML at all.When using the Lettr API, include both html and text fields:
Copy
await fetch('https://app.lettr.com/api/emails', { method: 'POST', headers: { 'Authorization': 'Bearer your-api-key', 'Content-Type': 'application/json' }, body: JSON.stringify({ from: 'updates@mail.example.com', to: 'recipient@example.com', subject: 'Your order has shipped', html: '<h1>Order #1234 shipped</h1><p>Your package is on its way.</p>', text: 'Order #1234 shipped\n\nYour package is on its way.\n\nTrack your package: https://example.com/track/1234' })});
The plain text version doesn’t need to mirror the HTML exactly. Focus on conveying the same information and include full URLs (not hyperlinked text) so recipients can copy and paste them.
Omitting the alt attribute entirely causes screen readers to announce the image filename (e.g., “IMG_20240115_hero_v3_final.png”), which is confusing and unhelpful. Always add an alt attribute — even if it’s empty for decorative images.
Low contrast text on colored backgrounds
Light gray text on a white background or white text on a light-colored button may look subtle and elegant, but it fails contrast requirements and is unreadable for many users. Check every text/background combination.
Using 'Click here' as link text
Screen reader users often navigate by tabbing through links. A list of “click here” links provides no context about where each link goes. Use descriptive text like “View your invoice” or “Update payment method”.
Tiny font sizes in footers
No plain text fallback
Sending HTML-only emails excludes recipients using text-only email clients or those who prefer plain text for accessibility reasons. Always include a text version.
