Email Accessibility: What Developers Actually Need to Do
Over 2 billion people worldwide have some form of visual impairment. Email accessibility isn't a nice-to-have — and most of the fixes take less than a minute each.
Why email accessibility matters
Email is often the primary communication channel between businesses and their users. Transactional emails — receipts, password resets, shipping notifications — contain information people need. If those emails are inaccessible, you're excluding a significant portion of your audience.
Unlike web pages, emails are consumed in environments you don't control. Users may have images disabled, use high-contrast mode, or rely on screen readers (VoiceOver, NVDA, JAWS). Your email needs to work in all these contexts.
The 8 rules that cover 90% of email accessibility
Set the lang attribute
Add lang="en" (or your language) to the <html> tag. Screen readers use this to select the correct pronunciation engine.
<html lang="en">
Use role="presentation" on layout tables
Screen readers announce <table> elements as data tables by default. Layout tables should be invisible to assistive technology.
<table role="presentation" cellpadding="0" cellspacing="0">
Write meaningful alt text for images
Describe the content, not the file. For decorative images, use alt="" (empty, not missing). A missing alt attribute causes screen readers to read the filename.
<img src="chart.png" alt="Q4 revenue increased 23% to $4.2M" />
Don't rely on images for text content
Image-only emails are invisible to screen readers and break when images are blocked (Outlook blocks images by default). Use HTML text for all critical content.
Maintain sufficient color contrast
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Dark grey (#666) on white (#fff) fails at 5.74:1 — just barely passing.
Use a minimum font size of 14px
Smaller text is difficult to read on mobile devices. Body text should be at least 14px, with 16px preferred. Links and buttons should have a tap target of at least 44x44px.
Write descriptive link text
Screen readers can navigate by links. "Click here" and "Read more" are meaningless out of context. Write links that describe the destination.
<!-- Bad --> <a href="/pricing">Click here</a> <!-- Good --> <a href="/pricing">View pricing plans</a>
Include preheader text
The preheader (preview text) is the first text screen readers encounter after the subject line. Use a hidden <span> at the top of your email body with a meaningful summary.
<span style="display: none; max-height: 0; overflow: hidden;"> Your order #1234 has shipped — expected delivery March 8. </span>
Semantic structure in email
Use semantic HTML where possible. Screen readers use heading hierarchy (h1–h6) to navigate content. A single <h1> for the email title, followed by <h2> for sections, gives readers a navigable document structure.
Use <p> for paragraphs, not <div> with line breaks. Use <ul>/<ol> for lists. These elements carry semantic meaning that screen readers convey to users.
Testing accessibility
Manual testing with a screen reader is the gold standard:
- macOS/iOS: VoiceOver (built-in, free)
- Windows: NVDA (free, open source) or JAWS (paid)
- Android: TalkBack (built-in)
Open your email HTML in a browser and navigate using only the screen reader. Check that: the content order makes sense, all images have descriptions, links are identifiable, and layout tables are invisible.
Emailens includes an accessibility check in every compatibility report — it flags missing alt text, low contrast, missing lang attributes, and layout tables without role="presentation".
Check your email's accessibility
Get an accessibility audit alongside CSS compatibility — alt text, contrast, semantic markup, and more.
Preview your emailFree plan — 30 previews/day