In short: Alt text says what an image conveys in this place – not everything that is in it. Decorative images get an empty alt="", images inside links describe where the link goes, and images containing important text repeat that text. For product images, what counts is what a buyer needs to know: view, colour, material, detail.
Alternative text is the oldest rule in accessibility, and still one of the most frequent findings in any audit report. That is rarely for lack of will. Usually there is no clear idea of what belongs in the field – and in shops with thousands of images, no time to think about it afresh for each one. This guide gives you rules you can learn in five minutes, and examples to work from.
What alt text is for (1.1.1)
Success criterion 1.1.1 Non-text Content requires every piece of non-text content to have a text alternative that serves the same purpose. For images in HTML that almost always means the alt attribute [1].
Screen readers read the alt text instead of the image. It appears when an image fails to load, and search engines use it to understand what an image shows. The key word is "purpose": alt text does not describe the image for its own sake, but what it is meant to do in this place. The same photo can need two different alt texts on a product page and in a blog post.
The glossary entry on alt text has a short definition too.
Informative, decorative and functional images
Before you write anything, classify the image. Three kinds cover almost every case:
| Kind | Example | Alt text |
|---|---|---|
| Informative | Photo of a hotel room on the booking page | Says what you need to know: "Double room with balcony overlooking the harbour" |
| Decorative | Wavy divider, background texture, icon beside text that says the same | Empty: alt="" |
| Functional | Logo linking to the home page; magnifying glass as a search button | Describes the function: "Home", "Search" |
An empty alt="" is not carelessness but the right answer for decoration. Screen readers then skip the image. If the attribute is missing altogether, some screen readers read out the file name instead – "IMG underscore 4711 dot jpg".
<!-- informative -->
<img src="room-12.jpg" alt="Double room with balcony overlooking the harbour">
<!-- decorative -->
<img src="wave.svg" alt="">
<!-- functional: the image is the only content of the link -->
<a href="/"><img src="logo.svg" alt="Harbour Hotel Kiel – home"></a>Product images: what a buyer needs to know
Product images are why alt text matters so much in shops. For somebody who cannot see the image, the alt text is the product view. Ask yourself: what would I tell a customer on the phone who wants to know what the product looks like?
| Weak | Better |
|---|---|
| "Hiking boot" | "Alpina hiking boot in dark green, side view showing the tread" |
| "Image 3" | "Detail: waterproof zip on the inner side" |
| "dress red summer women cheap" | "Knee-length linen summer dress in brick red, front view" |
| "Product photo" | "The sofa in light grey in a living room, next to an armchair for scale" |
A few rules help with large catalogues:
- Do not just repeat the product name. It is already in the heading. The alt text adds what the image shows: view, colour, detail.
- Tell each view apart. Five images with identical alt text are the same information five times for a screen reader user.
- No keyword lists. Search terms strung together help neither people nor search engines.
- Think about variants. If the image changes when a colour is picked, the alt text must change too.
Logos, icons and images of text
Logos usually get the organisation's name. If the logo is a link, add the destination, or let the link's position explain it. "Logo" on its own says nothing.
Icons depend on context. If the basket icon has the word "Basket" next to it, the icon is decorative. If the icon is the only content of a button, the button needs a name – for an SVG icon, for example, with aria-label on the button and aria-hidden="true" on the SVG:
<button type="button" aria-label="Basket, 3 items">
<svg aria-hidden="true" focusable="false"><use href="#icon-cart"></use></svg>
</button>Images of text – banners, discount campaigns, scanned notices – must repeat the text in the alt text if it matters. Better still, set the text as real text over the image. That also helps people who zoom, and meets 1.4.5 Images of Text.
Charts and complex graphics
A chart cannot be described in one sentence. Here the job is split:
- The alt text says briefly what the chart shows and what the main point is: "Revenue 2025 by quarter: steady rise, peaking in the fourth quarter".
- The details go in the text beside it, in a caption, or in a table of the values.
<figure>
<img src="revenue-2025.png"
alt="Revenue 2025 by quarter: steady rise, peaking in the fourth quarter">
<figcaption>The values are in the table below the chart.</figcaption>
</figure>The same goes for infographics, maps and floor plans: brief in the alt text, complete in the text.
Common mistakes – and how to avoid them
Most poor alt text falls into a handful of patterns. Once you know them, you spot them quickly on a read-through:
- The file name as alt text. "DSC_0042" or "banner-final-v3.jpg" appears when a system copies the file name automatically. Switch that automation off if your system has it.
- The same text for every image. Often the page title sits in every alt text on a page. To a screen reader user it sounds like a stuck record.
- Description instead of function. An arrow icon inside a "Next" link is not "arrow pointing right" but decorative – the link already has its text.
- Alt text and caption saying the same. If the same description sits in
altand in the visible caption, screen reader users hear it twice. The alt text should add to the caption, not repeat it. - The wrong language. In multilingual shops the alt text often stays in the original language. It belongs in the language of the page and has to be translated with it.
AI suggestions: when they help and when they do not
Image-describing AI is good at saying what is in a picture. It does not know what you are using the picture for. It sees "a green shoe on a white background" but not that the point is the tread. And it can be wrong – about colours, materials, text in the image.
That is why the rule at Reviseberg is: the AI proposes, a person decides. For images the crawl found without alt text, Reviseberg can generate a suggestion on request. Every suggestion is checked against fixed rules – no longer than 125 characters, no "image of" at the start, no file name, and empty text only for an image explicitly marked decorative. Nothing is applied automatically: you accept, edit or reject the suggestion and put it into your system yourself. More on suggestions is on the platform page.
When AI suggestions help:
- In large catalogues, as a starting point an editor checks in seconds rather than writes in minutes.
- For images whose content is unambiguous: product photos on a plain background, portraits, buildings.
When they do not:
- For charts, screenshots and images of text, where the exact content matters.
- For images whose purpose only follows from the context.
- Anywhere nobody reads the suggestion before it goes live.
Maintain alt text at the source (PIM, inventory system, media library)
The biggest lever is not the individual text but the workflow. Decide where alt text is created:
- Shops with an inventory system or PIM: maintain alt text there per image, so the shop, marketplaces and feeds all get the same text. Our guide to the EAA and marketplaces explains why that matters for marketplaces too.
- Shop systems: Shopware and Shopify have an alternative text field per image. Details on the systems are in our guides to Shopware and Shopify.
- CMS media libraries: in some systems the alt text is copied into the page when the image is inserted. A later change in the media library then does not reach existing pages. Check how your system behaves before labelling thousands of images in the library after the fact.
- Editorial rule: no image is published until somebody has decided: informative, decorative or functional.
What Reviseberg checks here – and what it does not
The image-alt rule finds images without an alt attribute on every crawled page; related rules check image buttons, SVGs and elements with role="img". That covers the most common failure: the missing text. Whether existing alt text describes the image correctly is something no rule can decide – that needs a person. That is why Reviseberg only ever counts 1.1.1 as partly checkable by automation.