Alt text for email and ecommerce: how to write it and why it is read first

Alt text does three jobs at once: it is what a screen reader announces, what a browser or inbox shows when an image will not load, and what image search reads. Those are different audiences with, fortunately, almost identical needs — a plain description of what the picture actually is.

It fails most visibly in email, where a meaningful share of recipients see the alt text before they see anything else, and where most shops have written nothing at all.

How to write it

1. Describe the image, not the page. "Black leather ankle boot, side view" — not "boots for sale".
2. Keep it under about 125 characters. Longer is truncated by some screen readers and looks wrong in a blocked-image inbox.
3. Do not start with "image of" or "photo of". The screen reader already said it was an image.
4. Include text that appears in the image, because the image is not searchable and a blocked image renders none of it.
5. Write for somebody who cannot see it, which is the entire test and resolves most edge cases on its own.

Product images specifically

For a product with several images, vary them by what each one shows:

• "Oud Royale 50 ml bottle, front"
• "Oud Royale 50 ml, cap removed, showing the atomiser"
• "Oud Royale beside a 100 ml bottle for scale"
• "Close-up of the textured glass base"

That takes a minute per product and it is the difference between image search understanding your catalogue and ignoring it.

When it should be empty

Purely decorative images — spacers, dividers, background flourishes, an icon beside text that already says the same thing — should carry an empty alt attribute, alt="".

Empty is not the same as missing. An empty alt tells a screen reader to skip the image; a missing alt attribute causes some readers to announce the filename instead, which is how people end up hearing "underscore dash banner two final v3 dot jpg".

Email, where it matters most

Outlook and several other clients block images by default until the recipient allows them. Until that happens, your beautiful hero image is a grey box containing whatever you wrote in the alt attribute.

1. Write alt text for every image in a campaign, including the logo.
2. Style it. Alt text inherits colour and font styling in most clients — setting these on the img tag means the blocked state still looks deliberate.
3. Never build an email as one image. It is unreadable when blocked, unreadable by a screen reader, and a strong spam signal besides.
4. Keep the essential message in real text, with images supporting it. If the email makes no sense with images off, it will make no sense to a meaningful share of recipients.

Checking it

• Turn images off in your own email client and read a campaign. This takes thirty seconds and is the single most informative test on this list.
• Tab through a product page with a screen reader once a quarter. Not for compliance theatre — you will find things that are broken for everybody.
• Audit for missing and duplicate alt attributes across the catalogue. Both are mechanical to find and mechanical to fix.
• Remember the accessibility obligation is real. The European Accessibility Act applies to many ecommerce services, and alt text is among the most basic expectations.