Email Accessibility
HTML email renders across a fragmented stack — Outlook on Windows uses the Word engine, Gmail strips style blocks, Apple Mail enforces dark-mode color inversion. Build with semantic tables for layout, real text over image-only designs, descriptive alt text, 4.5:1 contrast (in both light and dark), descriptive link text, and a declared language. Most marketing emails fail at least one of these.
Emails should be readable in any inbox and by screen readers — clear structure, real text, and enough color contrast.
HTML email is the most fragmented rendering target on the web. Outlook on Windows still uses the Microsoft Word engine — it ignores flexbox, grid, modern CSS selectors, background images on most elements, and many HTML5 semantics. Gmail strips <style> in some configurations and rewrites class names. Apple Mail (iOS and macOS) supports modern CSS well but enforces dark-mode color inversion that can wreck a low-contrast design. Treat email as a separate platform from the web — not a degraded version of it.
Use semantic tables, marked decorative. Layout tables remain the only system every client supports. Mark them with role="presentation" so assistive tech skips the table structure and reads content linearly. Reserve un-roled <table> markup for genuine tabular data (an invoice line-items grid, a comparison chart).
Real text always beats image text. When images are blocked — Outlook does this by default, and corporate firewalls, bandwidth-saving modes, and slow connections all strip them — image-only emails become blank rectangles. Real text is searchable, reflowable, readable by screen readers, and translatable. If you must use an image, the alt attribute should describe its purpose ("Receipt — total $84.20, ships May 28", not "receipt.png") and set style="display:block;border:0" to avoid Outlook's mystery gap and default blue image border.
Contrast applies in both color modes. The WCAG threshold (4.5:1 body, 3:1 large text) is the same as the web, but dark mode is the trap. Apple Mail and Outlook can invert your light palette to dark, sometimes only partially — body text inverts but a dark logo stays dark, leaving it invisible against the inverted background. Test both modes. Declare support with <meta name="color-scheme" content="light dark"> plus <meta name="supported-color-schemes" content="light dark">, then provide @media (prefers-color-scheme: dark) overrides where the client respects them.
Link text must stand alone. Click here, Read more, and View fail WCAG 2.4.4. Screen reader users skim by tabbing through links — context-free link text is unparseable. Write "View your order," "Reset your password," "Read the full report."
Set the language. <html lang="en"> (or your audience's locale) tells screen readers which voice to use. Without it, screen readers may read English content with the user's default voice — often unintelligible for non-English defaults. Wrap mid-message foreign-language strings in <span lang="fr">…</span>.
Headings still navigate. Use one <h1> for the message's primary purpose, <h2> for sections. Screen reader users jump by heading; a wall of <p> is a wall.
ARIA is unreliable in email. role="presentation" is widely honored; almost everything else is stripped or ignored. Fix structure with HTML, not ARIA attributes.
The preheader speaks first. That's the snippet the inbox shows after the subject. Hide it visually with off-screen styling if you don't want it in the body — but never leave it empty, or clients will pull garbage from the first few words of your HTML.
How to test
Start with the email's "view in browser" URL and run the Accessibility Site Scanner. It surfaces the issues that overlap with the web — contrast, alt text, link purpose, heading order, language — all of which apply identically inside an email body.
Then layer in email-specific testing:
- Litmus or Email on Acid render the same email across 70+ real clients (Outlook 2007 through New Outlook, Gmail web/iOS/Android, Apple Mail, Yahoo, dark-mode variants).
- Mailtrap sandboxes outbound mail for staging environments so test sends never reach real inboxes.
- Parcel previews the rendered HTML with screen-reader-friendly source view.
- Manual checks: disable images and re-read; tab through every link; toggle the OS to dark mode; resize narrow to mobile widths; have someone read it aloud and check whether the meaning still holds without the visuals.
Why this matters
Email is regulated content under the EAA, ADA Title III, and Section 508 — and it's the channel disabled users rely on for order receipts, password resets, shipping updates, and account notices. An inaccessible confirmation email can block a transaction the rest of your site got right. Litmus and Email on Acid's annual reports consistently find ~77% of marketing emails ship with at least one major accessibility issue, most often missing alt text or insufficient contrast.
How to detect
Take the email's "view in browser" URL (every major ESP exposes one) and run it through the Accessibility Site Scanner — it catches contrast, alt text, link purpose, heading order, and language issues that apply identically to email. Then preview real-client rendering in Litmus, Email on Acid, or Mailtrap to surface Outlook/Word-engine bugs, dark-mode inversion, and image-blocking fallbacks. Manually: disable images and re-read the message, tab through every link, and check the preheader.
How to fix
<!-- Semantic layout table + real text + descriptive alt + clear link -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0"
width="100%" lang="en">
<tr>
<td>
<h1 style="font-size:24px;color:#111;line-height:1.3;margin:0">
Order #4821 confirmed
</h1>
<p style="font-size:16px;color:#333;line-height:1.5">
Your order ships tomorrow.
<a href="https://shop.example/orders/4821"
style="color:#0055cc;text-decoration:underline">View your order</a>
</p>
<img src="receipt.png" width="480" height="200"
alt="Receipt — total $84.20, ships May 28"
style="display:block;border:0">
</td>
</tr>
</table>
<!-- Declare color-scheme support so dark mode is intentional, not inverted -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">