Guide
How to make your HTML emails accessible
Eight changes that make emails work for screen-reader users, people with low vision and anyone reading with images off.
Why email accessibility matters
People open email with screen readers, magnification, high-contrast settings and images switched off. If your message only makes sense visually, a meaningful share of your list never gets it. Accessible emails also tend to perform better for everyone: they load faster, survive image blocking and read well on small screens.
There's a legal angle too. Accessibility laws such as the Americans with Disabilities Act and the European Accessibility Act, which has applied since June 2025, can cover customer communications for many businesses. If that may apply to you, check with a legal adviser — and either way, the fixes below are the place to start.
1. Set the language
Screen readers use the lang attribute to choose a voice and pronunciation. Without it, English text may be read with a different language's rules. Put it on <html>, and on your main wrapper too, because some email clients strip the <html> tag.
<html lang="en" dir="ltr">
…
<body>
<div lang="en" dir="ltr" style="…">
<!-- the whole email -->
</div>
</body>2. Write alt text that says what the image says
When alt is missing, many screen readers read out the file name (“members dash weekend dash thirty dash off dot png”). When images are blocked, alt text is what sighted readers see in the empty box. Good alt text depends on what the image is for:
- Images with text in them — repeat the text:
alt="Members weekend: 30% off everything". - Linked images and image buttons — describe the destination or action:
alt="Shop the sale". An empty alt here leaves the link with no name at all. - Product photos — describe what matters for buying:
alt="Navy canvas tote bag". - Purely decorative images (dividers, spacers, background flourishes) — use an empty alt,
alt="", so screen readers skip them. - Logos — the brand name is enough:
alt="Acme".
Avoid alt text like “image”, “banner” or a file name — it tells people nothing. Keep it under about 125 characters; if an image needs more explanation, put that in the body text.
3. Mark layout tables as presentation
Email layouts use tables for structure, but screen readers announce tables as data (“table with 3 rows and 2 columns”) and read cell by cell. Adding role="presentation" to every layout table tells them to ignore the table and just read the content.
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">Leave it off genuine data tables, such as an order summary with column headings — those should use <th> cells.
4. Use real headings and paragraphs
Screen-reader users jump through emails by heading, just like web pages. A big bold <span> looks like a heading but isn't one. Use <h1> for the main message and <h2>/<h3> for sections, and reset their margins inline so they look the same in every client.
<h1 style="margin:0 0 12px; font-family:Arial, sans-serif; font-size:26px; line-height:32px; color:#18181b;">
This weekend only
</h1>
<p style="margin:0 0 16px; font-family:Arial, sans-serif; font-size:16px; line-height:24px; color:#3f3f46;">
Thanks for being a member…
</p>5. Make text easy to read
- Size: at least 14px for body text (16px is better) and 12px for fine print. Below that, text is hard to read on phones, and iOS Mail may enlarge it and break the layout.
- Line height: about 1.5× the font size for paragraphs.
- Contrast: aim for at least 4.5:1 between text and background (the WCAG AA level). Light grey footer text on white usually fails — check it with any free contrast checker.
- Alignment: left-align paragraphs. Centered or justified text is harder to follow over several lines.
6. Write links that make sense on their own
Screen-reader users often pull up a list of all the links in a message. “Click here”, “Read more” and “Learn more” are meaningless out of context. Describe the destination instead: “See how member pricing works”. In body copy, keep links underlined (or otherwise clearly distinct) so they don't rely on colour alone.
Make tap targets large enough to hit: social icons and small links should be at least 32px, ideally 44px, with some space between them. Icon-only links need alt text such as alt="Acme on Instagram".
7. Don't put the message only in images
An email that's one big image — or where the offer and the button are images — is blank when images are off and unreadable for screen readers unless every word is in the alt text. Keep headlines, offers, dates and calls to action in live HTML text, and use images to support them.
8. Add a title and a real preheader
A <title> (usually your subject line) is announced when the email is opened in a browser view and shown in the browser tab. The preheader — the short hidden text at the top of the body — is what screen readers and inbox previews read first, so make it a meaningful summary rather than “View in browser”.
What the checker can't test for you
Automated checks catch the mechanical problems, but a few things need a human:
- Colour contrast — not checked automatically yet; use a contrast checker on your text and button colours.
- Reading order — turn on a screen reader and listen to the email from top to bottom. On a Mac, VoiceOver starts with Cmd+F5; on Windows, NVDA is free.
- Images off — view a test send with images blocked and make sure the message still comes through.
Paste your email into the checker above to catch the rest — it flags missing language, missing and vague alt text, tiny fonts, vague and empty links, image-only emails and layout tables without role="presentation".