Alternative text for images
A screen reader cannot see your product photo. It reads whatever you wrote in the alt attribute, and when you wrote nothing it reads the file name. Good alt text is short, specific and written for the task.
By Sergio Gualda Last reviewed:
What fails
Image accessibility fails in four ways, and they need different fixes.
No alt attribute at all. The screen reader falls back to the file name, so a person hears “IMG underscore 4 0 3 2 dot jpg”. This is the easiest failure to find and the easiest to fix.
Alt text that says nothing. alt="image", alt="photo", alt="banner", or the product name repeated on every one of six gallery photos. The attribute is there, so a quick check passes, but the person learns nothing.
Image links and buttons with no name. A logo that links home, a magnifying glass that opens search, a cart icon. If the image is the only content of a link or button, its alt text is the name of that control. Without it, the screen reader announces “link” or “button” and nothing else.
Text inside images. A promotional banner where the offer, the dates and the conditions are part of the picture. Unless the same text is in the alt or on the page, it does not exist for a screen reader, and it cannot be zoomed, translated or found by search.
How to test it
Ten minutes on your key pages.
- Open a product page and a landing page in Chrome.
- Right-click an image and choose Inspect. Look for
alt=in the highlighted<img>. - Ask, for each image: if I could only hear this text, would I lose anything that matters?
- Check every link or button that is just an icon or a logo. Its alt (or
aria-label) should say what it does: “Home”, “Search”, “Cart, 2 items”. - Find any banner with words in it, and check those words are also on the page.
An automated analysis finds every image without an alt attribute and every image link without a name across a page in seconds. Whether the text that is there is useful is a question about meaning, which the audit report flags for you to review.
How to write it
Describe what the image is there for, not everything in it. The same photo needs different alt text on different pages.
<!-- Product page: the person is choosing a product -->
<img src="boot.jpg" alt="Black leather ankle boot with side zip, front view">
<!-- Blog post about a shoemaker: the person is reading a story -->
<img src="boot.jpg" alt="A finished boot on the workbench, next to the last it was shaped on">Name the action for links and buttons. The alt of an image inside a link is the link text.
<!-- Read as "link, image" -->
<a href="/"><img src="logo.svg"></a>
<!-- Read as "Uxerfy, home, link" -->
<a href="/"><img src="logo.svg" alt="Uxerfy, home"></a>Leave decorative images empty, on purpose. alt="" tells the screen reader to skip the image. Use it for background shapes, dividers, and photos that only add atmosphere next to text that already says everything.
Keep words out of pictures. Put the offer in real HTML text over or next to the image. It stays sharp on every screen, it translates, and search engines can read it.
Make it part of publishing. Most missing alt text comes from the CMS: someone uploads a product photo and the alt field is optional. Make it required for content images, and add it to the checklist for whoever uploads.
Why it matters commercially
On an online shop, the product photos are the product for most visitors. For a screen reader user, the alt text is the only version of those photos they get. “Image” or a file name tells them nothing about the color, the shape or what is included, and that is the information they came to the page for. Good alt text also feeds image search and AI assistants, so the same fix brings in visitors.