How do I write alt text that actually helps?

Alt text is the text a screen reader reads out in place of an image, and what a browser shows when an image fails to load. WCAG 1.1.1 (level A) asks that non-text content has a text alternative that serves the equivalent purpose.¹ The key word is purpose: good alt text gives a customer who cannot see the image the same information, or lets them do the same thing, as a customer who can.

It is also one of the most common problems on the web. WebAIM's 2026 scan of the top million home pages found images with missing alternative text on 53.1% of them.³ The US Department of Justice lists missing text alternatives among the barriers that keep blind people from understanding images, charts and illustrations.⁴

Start with the image's job

W3C's alt decision tree asks a few questions in turn: does the image contain text, is it in a link or button, does it add meaning, or is it decoration?² Each answer leads to a different kind of alt text.

Product photos: describe what a buyer needs

A sighted customer looks at a product photo to answer questions: what colour is it, what is it made of, how big is it, what comes in the box. Alt text should answer the same questions where the photo does. Some practical rules:

• Be specific. "Blue mug" is less useful than "Hand-thrown stoneware mug in speckled cobalt blue with a wide handle".
• Describe the difference between photos. If a product has five photos, say what each one shows: "back view", "detail of the zip", "worn with jeans by a model".
• Use the name you sell it under. If the colour option is called "Sage", say "sage green" so the photo and the variant picker match.
• Do not repeat the product title word for word on every photo. The customer has just heard the title in the heading. Add what the photo shows.
• Leave out "image of" or "photo of". Screen readers already announce that it is an image.

Links and buttons: describe the action, not the picture

When an image is the only content of a link or button, its alt text becomes the link or button's name. A cart icon with alt text "shopping bag icon" tells a screen reader user what the picture looks like, not what happens when they press it. Use "Cart" or "Open cart, 2 items" instead. W3C's decision tree puts it simply: for a functional image, describe the destination or the action.² The same applies to logos that link to your home page: "Acme Outdoor, home" is more useful than "Acme logo".

Decorative images: empty, not missing

Background textures, dividers and stock photos that add mood but no information should be implemented so assistive technology can ignore them.¹ For an img element that means alt="", with nothing between the quotes. That is different from leaving the attribute out: without any alt attribute, some screen readers read out the file name instead, such as "IMG underscore 4471 dot jpeg".⁷

The same goes for images whose information is already in the text next to them. If a product card shows a photo with the product name directly under it, and both are in the same link, an empty alt on the photo avoids hearing the name twice.

Where to add alt text

Shopify

In Shopify admin, go to Products, open a product, select a media item and choose Add alt text. Shopify allows up to 512 characters and recommends 125 or fewer, and alt text can also be uploaded in bulk with a product CSV.⁵ Shopify's media editor may suggest alt text where none is filled in; read each suggestion before you accept it.⁵ Banners and other images placed in theme sections are separate from product media: add their alt text in the theme editor by selecting the section and editing the image.⁸

WordPress and WooCommerce

In the WordPress Media Library, open an image and fill in the Alt Text field in the attachment details; WordPress describes it as used for accessibility.⁶ WooCommerce product and gallery images are chosen from or uploaded to the Media Library, so the same field applies.⁹ The Caption, Title and Description fields are different and are not read as alt text.

Check what you have

1. Run an automated check. It will find images with no alt attribute and linked images with no name. Jralo's free check lists each problem it finds and how many pages it affects.
2. Look at the alt text that is there. A tool cannot tell whether "DSC_0042" or "product" is a useful description; you can.
3. Turn on a screen reader and listen to one product page from top to bottom. Duplicated or meaningless descriptions stand out quickly.
4. Fix templates once and content item by item. A logo or icon button with no name is usually a theme fix; product photo descriptions are content you add in the admin.

Alt text is one of the few accessibility fixes that is usually a content job rather than a code change, which makes it a good place to start. For a wider first pass, see how to check your website in 15 minutes.