Accessibility in Email

The image-only newsletter

The worst and most common pattern. A designer produces an attractive layout, exports it as one picture, and it goes out as a single image.

What happens then: screen readers announce nothing. Many mail clients block images by default, so a large share of recipients see an empty message. Text cannot be resized or selected. Dark mode does nothing useful. And there is no text for a preview to show.

It is the email equivalent of publishing your price list as a scan, and it fails commercially before it fails on accessibility.

The fix is the same: real text, with images used as illustration rather than as the delivery mechanism.

The basics that carry over

• Alternative text on every image, which does double duty since it is what recipients see when images are blocked.
• Real headings rather than text made large, so structure exists.
• Sufficient contrast, which decorative email palettes frequently fail.
• Link text that means something, since read more repeated six times is a useless list.
• A single-column layout, which reads correctly in every client and on every screen.
• Text large enough to read, which for email means larger than feels necessary on a desktop.

The alternative text point deserves emphasis because it pays for itself immediately. Images blocked by default is the normal state for a meaningful share of recipients, and alternative text is what those people read instead.

Reading order

Where email is harder than the web.

Multi-column layouts built with tables read in a source order that may bear no relation to the visual arrangement. A two-column row can be announced as both left cells then both right cells, which turns coherent content into nonsense.

Single column avoids the problem entirely and reads correctly everywhere. It is also what most recipients see anyway, since a phone collapses columns.

Where tables are used for layout, marking them so assistive technology treats them as presentation rather than data prevents a screen reader announcing a grid of rows and columns that carry no meaning.

The subject line and preview

Read before anything else and frequently neglected.

The subject should say what the message is about rather than being clever, which serves screen reader users scanning a list and everybody else scanning an inbox.

The preview text, the snippet shown after the subject, is worth setting deliberately. Left alone it shows whatever text comes first, which is frequently view in browser or an image placeholder.

An image-only email has no preview text at all, which is one more reason it underperforms.

Dark mode

An increasingly common problem with a simple cause.

Mail clients invert colours differently and unpredictably. A logo on a white background can end up on black, black text can be inverted to white against a background that did not change, and carefully chosen colours can become unreadable.

Practical mitigations: use transparent images where a logo needs to sit on any background, avoid pure white and pure black which invert most aggressively, and test in dark mode rather than assuming.

Testing matters because the behaviour differs by client and there is no way to predict it from the design alone.

The plain text version

Worth sending properly rather than as an afterthought.

Some recipients read plain text by preference or necessity. An auto-generated version stripped from the formatted one is frequently unreadable, with link addresses inline and no structure.

Writing it deliberately takes a few minutes and produces something that reads.

It also helps deliverability, since a message with a genuine text alternative looks more like ordinary correspondence than a message that is only markup and images.

Testing

1. Turn images off and read what remains.
2. Read it on a phone, which is where most of it will be read.
3. Switch to dark mode and look again.
4. Read the link text alone as a list.
5. Check the preview text in an inbox rather than in the editor.

The first test is the one that catches the image-only problem, and it takes ten seconds.

The alternative text discipline this depends on is the same as on the web, set out in alt text that is actually useful.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.