ItsBingMyBusiness

Developer Guides

Transactional email that works with a screen reader

Accessible email is not a separate template. It is mostly a set of decisions that also happen to improve deliverability, because filters and screen readers are both unimpressed by a message that is one large image.

Real text, not pictures of text

Text in an image cannot be read aloud, cannot be resized, cannot be selected and cannot be translated. It also looks to a filter like the oldest trick for evading content analysis.

Everything that matters — the code, the amount, the link, the deadline — should be real text. Images should be decorative or supplementary.

Alt text that says something

Every image needs an alt attribute. Decorative images get alt="", which tells a screen reader to skip them; omitting the attribute entirely makes some readers announce the filename instead.

For meaningful images, describe the function rather than the picture. For a logo, alt="Acme" — not alt="Acme logo PNG".

Alt text also shows when images are blocked, which for a meaningful share of recipients is always.

Structure, in the markup

Email HTML is often table-based for layout reasons, which means telling assistive technology that those tables are not data: role="presentation" on layout tables stops a screen reader announcing row and column counts for what is really a container.

Use real headings in order, real lists for lists, and lang on the html element so the correct pronunciation rules apply.

Link text

"Click here" read out of context means nothing — screen reader users frequently navigate by jumping between links, with no surrounding sentence.

Write the destination into the link: "Reset your password", "View your receipt". This is better for everyone and it also avoids the display-text-versus-href mismatch that filters score as phishing.

Contrast and size

Body text at 4.5:1 against its background, large text at 3:1. Light grey on white is the most common failure, and it fails for everyone reading on a phone outdoors, not only for people with low vision.

Body text at 16px or larger. Do not disable zoom; some clients honour that and it is never what the recipient wanted.

Dark mode

Several clients invert colours automatically, and the usual casualty is a logo with a white background sitting on a now-dark message, or black text that was left as the default and became unreadable.

Test in dark mode. Use transparent PNGs where you can, and set explicit colours rather than relying on defaults.

The plain-text part

A genuine text alternative with the same essential information is the most accessible version of any message, and some recipients read only that.

A text part that says "view this message in your browser" is worse than useless: it excludes those readers and it looks to a filter like evasion. Put the actual content in it, including the link in full.

Checking

Read the message with images disabled. Then read only the plain-text part. If the recipient can still do what the message asked, it is probably fine — and you have incidentally satisfied most of what content filters want as well.

Ready to send authenticated mail?

DKIM signing, SPF alignment and DMARC are set up the moment you verify a domain.

Get started