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.
Accessible email design requires five fundamental practices: declare <html lang="en">, add role="presentation" to all layout tables, provide descriptive alt text (or alt="" for decorative images), maintain a 4.5:1 text color contrast ratio, and always package a clean multipart/alternative plain-text version for screen readers and braille displays.
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".
Frequently Asked Questions
Why do HTML email layout tables require role='presentation'?
Screen readers announce HTML <table> elements as structured data tables by default (reading row/column cell coordinates aloud). Adding role='presentation' or role='none' instructs assistive technologies to treat the table purely as visual styling and read contents sequentially.
What is the minimum WCAG contrast ratio for email text?
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for regular body text and 3:1 for large text (18pt+ or 14pt bold). Senders should also test both light and inverted dark mode renderings.
Should decorative images in emails have an alt attribute?
Yes. Decorative images must have an empty alt attribute (alt=''). If you omit the alt attribute entirely, screen readers will vocalize the raw image URL or filename.
Why is setting the lang attribute essential on the <html> tag?
Setting <html lang='en'> enables screen reader software to select the correct phonetic pronunciation engine and dictionary for the message language.
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
- •W3C: W3C Web Content Accessibility Guidelines (WCAG) 2.1
- •Email Markup Consortium: Email Markup Consortium: Accessibility & Usability in HTML Email
- •Litmus: Litmus: The Ultimate Guide to Email Accessibility
- •Accessible360: Accessible360: Assistive Screen Reader Behavior in Mail Clients
Reviewed by Philippe KAM · Last updated: Mar 4, 2026
Building next-generation email preview and QA infrastructure for developers. Focused on reverse-engineering rendering engines across Outlook (Word MSO & New Outlook), Gmail, and Apple Mail to eliminate email rendering bugs before dispatch.