Tips for Accessible Email Design

June 17, 2026

Accessible email is not a separate version you build for a minority. It is the version that survives contact with reality: images blocked, dark mode on, screen zoomed, read aloud in a car, opened on a five-year-old phone.

This is a longer companion to signature accessibility, covering full campaign and transactional email design.

Structure before styling

Set lang on the html element so screen readers use the right pronunciation. Give every email a real <title>. Use one <h1> and then descend in order — h2, h3 — without skipping levels for visual reasons. A screen reader user navigates by heading; a broken hierarchy is a broken map.

Mark all layout tables with role="presentation". Reserve real table semantics for actual data, like an order summary, and give those tables proper header cells.

Reading order is not visual order

Assistive technology reads the source, not the layout. A two-column design where the image column comes first in the HTML will read as “image, image, image” before any text. Build multi-column sections so the source order matches the order a person would read them aloud.

Type: bigger than you want it to be

Body copy: 16px. Not 14px. Not 15px “because our brand is refined.”
Headings: 22px and up.
Legal and footer text: 12px absolute minimum.
Line height: 1.5 for body text.
Line length: aim for 50–75 characters. Above that, readers lose their place returning to the next line.

Left-align body copy. Justified text creates uneven word spacing that is measurably harder for people with dyslexia, and centred paragraphs force the eye to hunt for each line start.

Contrast, and the dark mode complication

Target 4.5:1 for normal text and 3:1 for large text. Then check the same email in dark mode, because many clients invert colours automatically and the results are frequently worse than the original.

Two specific traps: dark text on a transparent PNG becomes invisible when the background inverts, and brand colours that pass contrast on white often fail on the near-black that dark mode substitutes. Test both, and prefer solid backgrounds behind text over transparency.

Quick check: screenshot your email, desaturate it to greyscale, and look again. If the call to action stops standing out, you are relying on colour alone.

Images: assume they will not load

A meaningful share of recipients have images off by default. Design so the email works without them.

Never put critical information — a discount code, a deadline, a call to action — inside an image only.
Write alt text that carries the message, not the description. For a hero image announcing a sale, “30% off all templates until Friday” is better than “woman looking at laptop”.
Give decorative images empty alt text so they are skipped.
Set explicit width and height so the layout does not collapse when images are blocked.
Add background colours behind images so alt text remains readable when it appears.

Buttons and links

Build calls to action as HTML-and-CSS buttons rather than images, so they scale, respond to zoom, and remain visible when images are off. Give them a minimum tap target of 44 × 44 pixels — smaller targets are genuinely difficult for anyone with limited fine motor control, and irritating for everyone else.

Write link text that describes the destination. In a screen reader’s link list, “Read more”, “Read more”, “Read more” is useless; “Read the accessibility guide” is not.

Motion

Animated GIFs can trigger discomfort for people with vestibular disorders and, at high flash rates, seizures. Keep animation under five seconds, avoid rapid flashing entirely, and make sure the first frame carries the essential message — several clients display only that frame.

Preheader text

The preheader is announced early by screen readers and shown in the inbox preview by most clients. Write it deliberately as a continuation of the subject line rather than letting it default to “View this email in your browser.”

Plain text still matters

Send a genuine plain-text alternative — not an automatic strip of the HTML, which typically produces a wall of raw URLs. A hand-written plain-text version takes ten minutes and serves screen readers, low-bandwidth connections, and clients that reject HTML.

Testing routine

Turn images off. Is the message intact?
Zoom to 200%. Does anything overlap or get cut off?
Switch to dark mode. Is any text now invisible?
Tab through with a keyboard. Is the focus visible and the order sensible?
Run a screen reader over it. Does the reading order make sense out loud?
Desaturate to greyscale. Does the call to action still stand out?

Six checks. Run them on your template once, fix what breaks, and every campaign built on that template inherits the result.