Accessible email for small business: newsletters and signatures

Who reads your email without seeing it

Two kinds of reader meet your newsletter without its pictures. One uses a screen reader, which reads the email aloud from its code. The other has images turned off, which Mailchimp's own help says many email programs do by default. Both get the same thing: your text, your alt text, and nothing else.

WCAG was written for web content, and an HTML email is web content in a small window, so this guide uses its criteria as the yardstick. The habits are the ones that make a web page work, scaled down to a newsletter and a signature, and they cost nothing but attention.

Real text, not pictures of text

The most common fault in small-business email is the whole message designed as one picture: a flyer exported from a design app and dropped into the template. With images off it is a blank box; to a screen reader it is one alt text, if it has one. WCAG's 1.4.5 Images of Text (Level AA) asks for real text wherever the technology can show it, unless the image can be customised or the look is essential; a logo counts as essential.

Mailchimp's help gives the same advice: keep the important information in the main text, not in an image. Use the picture for the flowers, the dish, the finished kitchen, and write the offer, the date and the button beneath it.

<img src="autumn-sale.jpg" width="600" alt="Autumn sale">

<img src="autumn-bouquet.jpg" width="600"
     alt="Bouquet of orange dahlias and dried wheat in a clay vase">
<h2>20% off every autumn bouquet</h2>
<p>Order by 31 October for delivery the same week.</p>

Alt text on every image

Alt text is what a listener hears in place of the picture, and what an images-off reader sees in the empty box. Write what the image adds to the message: for a product, what it is; for your logo, the business name; for a photo of the team at a market stall, who and where if it matters to the story. Our alt text examples go through each kind, and the alt text check tests a line before you paste it.

What the platforms document

• Mailchimp. Click the image block, then type the alt text in the field in the side panel (in the legacy builder, the Alt link in the editing pane, then Update). Mailchimp warns that a title on a linked image displays instead of the alt text, and that some email programs will not show alt text for a linked image or alt text wider than the image.
• Outlook for Microsoft 365. Right-click the picture and choose View Alt Text, or Picture Format then Alt Text; on a Mac, Edit Alt Text. A border or flourish gets Mark as decorative. Where Office writes alt text for you, Microsoft asks you to review and edit it.
• Any other tool. Look for an alt or alternative text field on each image. If there is none, make sure everything the image says is also in the text beside it.

Headings, short paragraphs and links that say where they go

A screen reader user skims an email the way they skim a page: heading to heading, link to link. So mark each section with a real heading, not a bigger bold line (Mailchimp's help says the same), keep paragraphs to two or three sentences, and give every link words that say where it goes. Under 2.4.4 Link Purpose, a link's purpose has to be clear from its text or the sentence around it; "Click here" repeated three times is clear from neither. A button should be a real link styled as a button, never a picture of one.

<h2 style="font-size:22px;margin:0 0 8px">Workshop: autumn wreaths</h2>
<p style="margin:0 0 16px">Saturday 7 November, 10am, at the shop.
Twelve places, all materials included.</p>
<a href="https://example.com/wreath-workshop"
   style="background:#1E3A2F;color:#FFFFFF;padding:12px 20px;
          text-decoration:none;display:inline-block">
  Book a place at the wreath workshop</a>

Contrast and size

The rule is the web's: 1.4.3 asks for a contrast ratio of at least 4.5:1 for text, and 3:1 for large-scale text, which is at least 18 point, or 14 point bold. The footer is where emails fail it most, in pale grey address lines and unsubscribe links. The button above, white on #1E3A2F, measures 12.34:1 (WCAG formula, our calculation); check your own pairs in the contrast check.

WCAG sets no minimum font size. What it asks, in 1.4.4 Resize Text, is that text can be enlarged to 200 percent without losing content. In email that means sizes in the code rather than text baked into pictures, and a size you can read on a phone at arm's length without zooming. Our page on fonts and sizes sorts the rules from the myths.

Layout tables, language and the plain-text part

Most email templates are still built from tables, because older email programs ignore modern layout code. WCAG does not forbid layout tables, but a screen reader will announce a plain table as a table, with rows and columns, unless told otherwise. role="presentation" on each layout table, nested ones included, tells it the table is only there for layout. W3C's failure technique F46 adds the other half: no th, no caption and no summary in a table used for layout. A real data table, such as an order receipt, keeps its headers.

Two more lines matter. lang on the html tag tells a screen reader which language to read in (3.1.1 Language of Page), and a title tag names the message.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>October news from Fern & Field</title>
</head>
<body>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr><td>
      <img src="logo.png" width="160" alt="Fern & Field">
      <h1>October news from Fern & Field</h1>
      <p>…</p>
    </td></tr>
  </table>
</body>
</html>

Finally, the plain-text part. An email can carry two versions of the same message, an HTML one and a plain-text one (the MIME standard calls this multipart/alternative), and the reader's program picks. Mailchimp generates the plain-text version for you and lets you edit it, and its help notes that many people who use screen readers prefer plain text. Open it before you send: an automatic version of an image-heavy email can come out nearly empty.

Signatures without image-only content

The signature goes out on every message, so a fault there repeats hundreds of times a week. The usual one is a signature made as a single picture: name, title, phone and address drawn in a design app. With images off, the reader cannot call you back; a screen reader hears nothing, or a file name. Write the details as text and keep the picture for the logo, with the business name as its alt text. Social icons need alt text naming the network, or plain text links instead.

<p style="margin:0">Dana Ruiz, Owner<br>
Fern & Field Florist<br>
<a href="tel:+15555550142">555-555-0142</a><br>
<a href="https://example.com">example.com</a></p>
<img src="fern-field-logo.png" width="120" alt="Fern & Field">