Connect with us

Email Accessibility for Ecommerce: Alt Text, Contrast and Type That Work for Every Reader

email marketing

Email Accessibility for Ecommerce: Alt Text, Contrast and Type That Work for Every Reader

Email Accessibility for Ecommerce: Alt Text, Contrast and Type That Work for Every Reader

Reading Time: 3 Minutes

Accessible email is often treated as a compliance task for large companies. For an ecommerce brand, it is simpler than that: it is about making sure every subscriber can read the offer, understand the product and tap the button. Some of your customers use screen readers. Many more read email on a small phone, in bright sunlight, with images blocked or with tired eyes at the end of the day. An accessible email works better for all of them.

None of the practices below require special tools, and most of them make your emails easier to read for everyone.

Write alt text that describes, not decorates

Alt text is what a screen reader announces when it reaches an image, and what many inboxes show when images are blocked. For product photos, describe what matters to the buyer: “Navy wool overshirt with two chest pockets,” not “image1” or a string of keywords. For a banner that contains the offer, the alt text should state the offer.

Purely decorative images, such as dividers or background shapes, should have empty alt text so screen readers skip them. That keeps the listening experience focused on what matters.

Keep important words in live text

If the headline, the discount, the deadline and the button are all part of one large image, the email says nothing to a screen reader and nothing to a subscriber with images off. Put those elements in real HTML text. You can still design a strong visual hero; just keep the words that carry the message outside the image.

Check color contrast

Low contrast is one of the most common problems in email design, especially light gray text on white or white text on pastel buttons. The Web Content Accessibility Guidelines (WCAG 2.1) set a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, which they define as at least 18 point, or 14 point bold. Free contrast checkers will tell you in seconds whether your brand colors pass. If your signature color fails for body text, use it for large headings and accents instead.

Use type sizes people can read on a phone

Many subscribers read email on their phones. Body text that looks elegant on a desktop monitor can be hard to read on a small screen. Keep body copy comfortably large, give lines enough spacing, and avoid long paragraphs set in light font weights. Left-aligned text is easier to follow than long centered blocks.

Make buttons easy to tap and easy to understand

Buttons should be large enough to tap with a thumb and spaced so readers do not hit the wrong one. The label should say what happens next: “Shop the gift guide” or “Get early access,” not “Click here.” Screen reader users often move from link to link, so each label should make sense on its own.

Structure the email like a page

Use real headings in a logical order, keep the reading order in the code the same as the visual order, and set the language of the email in the HTML. Layout tables should be marked so screen readers do not announce them as data tables. These are small details in the code, but they decide whether the email is read aloud in a sensible order.

Test in dark mode and with images off

Dark mode can invert colors in ways that hide logos or make text hard to read. Viewing the email with images turned off shows you exactly what a subscriber with blocked images sees. Both checks take a minute and catch problems that design files never show.

Build accessibility into the template

The easiest way to send accessible emails is to build these choices into your templates once: live text for key information, approved color pairs that pass contrast, readable type sizes, clear button labels, and alt text fields that must be filled in before a campaign can be scheduled. Then every campaign starts accessible instead of being fixed at the end, under deadline pressure.

Brands that would rather not build and maintain those templates themselves can hand production to a design partner. Nexmail designs ecommerce campaigns inside each brand’s locked guidelines and exports production-ready HTML for Klaviyo, Mailchimp, Omnisend and Constant Contact, built to render in Gmail, Outlook, Apple Mail and on mobile. Whoever builds your emails, make accessibility part of the brief, not an afterthought.

Continue Reading
You may also like...
Click to comment

Leave a Reply

Your email address will not be published.

More in email marketing

To Top