Accessible email newsletters for small businesses: alt text, real text, links and contrast

Your newsletter is often the most-read thing your business publishes, and it lands in places you don't control: phone mail apps, screen readers, dark mode, magnified screens and inboxes that block images by default. An email built as one big image says nothing to a screen reader and shows up blank when images are off. Most fixes take a few minutes inside your email tool's editor. Here's what to check before you hit send.

1. Put the message in real text, not one big image

A flyer designed in Canva and dropped in as a single image can't be read aloud, zoomed cleanly, searched or translated, and many inboxes hide images until the reader allows them. Keep the headline, offer, dates and prices in live text, and use images to support the text, not to carry it. (WCAG 1.4.5)

2. Alt text on every image that matters

Most email editors have an alt text field on each image block. Describe what the image tells the reader, and leave decorative images (dividers, background shapes) with empty alt text so they are skipped. If an image contains words, the alt text should include those words. (WCAG 1.1.1)

<img src="fall-menu.jpg" alt="Pumpkin spice latte and apple cider donut on a wooden table">
<img src="divider.png" alt="">
<!-- example values -->

See our alt text examples.

3. Links and buttons that say where they go

Screen-reader users often jump from link to link. "Click here", "Learn more" and "Shop now" repeated five times tell them nothing. Name the destination or action, and make buttons real text links styled as buttons rather than images of buttons. (WCAG 2.4.4)

<a href="https://example.com/fall-menu" style="background:#1d4ed8;color:#ffffff;padding:12px 20px;display:inline-block;text-decoration:none;border-radius:6px;">See the full fall menu</a>
<!-- example values; white on #1d4ed8 has a contrast ratio above 4.5:1 -->

4. Headings and a sensible reading order

Use your editor's heading styles for section titles instead of big bold paragraph text, so screen-reader users can skim. Multi-column layouts collapse to one column on phones; check that the order still makes sense when read top to bottom. (WCAG 1.3.1, WCAG 1.3.2)

5. Contrast, font size and dark mode

Body text needs a contrast ratio of at least 4.5:1 against its background (light grey on white usually fails). Use a body size of around 14 to 16px and left-aligned paragraphs. Many readers use dark mode, which can invert colours: test a send to your own phone in dark mode and check that logos with transparent backgrounds and coloured text are still readable. (WCAG 1.4.3)

See our colour contrast guide.

6. Don't rely on colour alone

"Items in red are sold out" doesn't work for readers who can't tell red from black. Say it in words ("Sold out") as well. (WCAG 1.4.1)

7. Set the language, subject and preview text

Write a subject line that says what the email is about, and fill in the preview (preheader) text so it isn't a stray "View in browser" line. If you edit the HTML template, set the language on the html tag so screen readers use the right voice. (WCAG 3.1.1)

<html lang="en">
<table role="presentation" width="100%">...</table>
<!-- role="presentation" stops layout tables being read as data tables -->

8. Video, GIFs and the plain-text version

Emails can't play video, so link to a captioned video with a descriptive link ("Watch the 2-minute studio tour, captioned"). Avoid fast-flashing GIFs, and keep animations short. Most email tools also create a plain-text version; open it and check it reads sensibly, because some readers prefer it. See our video captions guide. (WCAG 2.3.1)

9. The sign-up form and the unsubscribe link

The newsletter sign-up form on your website needs a visible label on the email field, a clear error message and a pop-up that closes with the keyboard. The unsubscribe link in the email should be easy to find, readable and not tiny grey text. See pop-ups and chat widgets and accessible forms.

Common mistakes

• The whole email is one image designed in another app.
• No alt text, or alt text like "image1.png".
• Several "Click here" or "Shop now" links in one email.
• Light grey text on white, or text placed over photos.
• Logos that disappear in dark mode.
• Sale details shown only in colour.
• Unsubscribe in tiny low-contrast text.
• Expecting an overlay widget on your website to fix emails (it can't, and overlays don't make websites compliant either; see overlays vs real fixes).

A 10-minute check before you send

1. Send a test to yourself and open it with images turned off. Can you still understand the offer?
2. Open it on your phone in dark mode. Is everything readable?
3. Read only the link and button text. Does each one say where it goes?
4. Check every image block for alt text.
5. Run the text and button colours through a contrast checker.
6. Open the plain-text version and read it top to bottom.

What a scan can and can't check here

Our scan checks web pages, not emails, so it won't open your newsletters. It does check the public pages your emails link to and your sign-up form, for problems such as missing alt text, unlabelled fields and buttons, low contrast and missing page language. It finds only part of the barriers on a page; judging alt text quality, reading order and dark mode still takes a person.

Related: nonprofit and church websites, link text and buttons, alt text examples.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Landscaping, lawn care and pest control website accessibility: quote forms, service areas, plans and photos
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.