Alt text and WCAG: how to describe images, with examples

Updated October 14, 2026 · 8 min read

Every image on a page needs a decision: what should a person who cannot see it hear instead? That is what alt text is for. Screen readers read it aloud, search engines use it, and browsers show it when the image fails to load. WCAG does not prescribe exact wording, but it does set a clear requirement, and the W3C publishes a practical tutorial on how to meet it. This page sums both up, with examples from online shops.

This is general information, not legal advice.

What WCAG requires

The requirement is 1.1.1 Non-text Content, level A: all non-text content presented to the user has a text alternative that serves the equivalent purpose. There are exceptions. Controls need a name that describes their purpose; time-based media, tests, sensory experiences and CAPTCHAs only need a descriptive identification; and decoration, formatting or invisible content must be implemented so assistive technology can ignore it.

Two more criteria are closely related:

1.4.5 Images of Text (AA): use real text instead of text baked into an image, unless the image of text can be customised by the user or a particular presentation is essential; logotypes count as essential.
2.4.4 Link Purpose (In Context) (A): if an image is the only content of a link, its alt text is the link text.

The key word is purpose. W3C's Understanding document shows the same picture of a globe needing "International Travel" on one site and "International Campuses" on another. Context decides, not the pixels.

The W3C decision tree in five questions

The W3C alt decision tree asks, in this order:

Does the image contain text? If the same text is also nearby as real text, or the text is only a visual effect, use an empty alt. If it is an icon with a function, describe the function. Otherwise the alt includes the text of the image.
Is the image in a link or a button, and would its purpose be unclear without it? Then the alt describes the destination or the action.
Does the image add meaning? A simple photo or graphic gets a short description of that meaning; a chart or diagram needs the information elsewhere on the page as well; an image that repeats nearby text gets an empty alt.
Is it purely decorative? Then use an empty alt.
None of the above? The tree does not cover every case; see the full images tutorial.

Informative images

Photos and illustrations that carry information get a short description of the essential information, as the W3C tutorial puts it. On a shop, that is mostly product photos.

Image	Weak alt text	Better alt text
Main product photo	`IMG_4521.jpg`	`Blue linen shirt, front view`
Second photo of the same product	`Blue linen shirt`	`Blue linen shirt, back with a single pleat`
Photo showing the size	`Bag`	`Tote bag held by a model, reaching from shoulder to hip`
Colour swatch that changes the main photo	`swatch`	`Sage green` (it is a control: name the choice)

Our recommendations on top of WCAG: say what someone would miss — colour, material, the detail that the photo exists to show. Do not start with "image of"; screen readers already announce an image. Keep it short and put long specifications into the product description, where everyone can read them.

Decorative images

Background textures, dividers, mood pictures next to a heading that already says everything: use alt="" (an empty attribute) or a CSS background. The empty alt tells screen readers to skip the image. Leaving the attribute out is not the same: without it, screen readers may read out the file name or the URL.

Be careful with "decorative". A lifestyle photo on a landing page may be decorative; the same photo on a product page that shows how the product is used is not.

Functional images: links, buttons and icons

When an image is the only content of a link or a button, its alt text names the destination or the action, not the picture. The W3C functional images tutorial uses these examples:

a logo linking to the home page: "W3C home", not "logo";
a magnifying glass on a search button: "Search";
a printer icon: "Print this page", not "printer".

On a shop, the same idea gives "Cart", "Remove from cart", "Next photo", "Add to wishlist". If the icon sits next to visible text that already says it — a cart icon followed by the word "Cart" — the icon itself gets an empty alt or is hidden from assistive technology, so the name is not read twice.

Logos

Logo as the only content of a home link: the alt says where the link goes, for example "Example Shop home".
Logo next to the company name as text in the same link: empty alt, because the text already names it.
Partner or payment logos: the alt names the brand ("Visa", "Trusted Shops"), because the logo carries that information.

Logos are also exempt from the contrast requirement and from 1.4.5 Images of Text.

Images of text

Sale banners with the discount written into the picture are the classic shop case. Under 1.4.5 such text should be real HTML text over the image where possible, so it can be zoomed, recoloured and translated. If an image of text stays, the W3C tutorial says the text alternative should contain the same words as in the image — the whole "Summer sale −30% until 31 August", not "banner".

Complex images and groups

Charts, size tables as images, infographics: a short alt that says what it is, plus the full information in text or a table nearby. W3C recommends providing the underlying data where practical.
Groups of images, such as five stars of a rating: one alternative for the whole group ("Rated 4 out of 5"), the other images empty.

What an automated image checker finds

Our checks use the axe-core rules for text alternatives in a real browser. They find:

images without any text alternative (image-alt);
image buttons without a description (input-image-alt);
elements with an image role and SVG graphics without a text alternative (role-img-alt, svg-img-alt) — star ratings, icons, badges;
image map areas without a description (area-alt) and embedded objects without one (object-alt);
links and buttons without an accessible name, which often means an icon without a label;
as a best practice, alt text that repeats the visible text next to it (image-redundant-alt).

What no automated tool can judge: whether "Blue linen shirt" is the right description, whether an image marked decorative really is, and whether a banner contains text. That needs a person. Read more in the rule library.

How to check your images

Run the free WCAG checker on a product page and a category page; it lists images without alternatives with a screenshot of each.
Read the alt texts of your main templates: product, category, home, cart.
Turn on a screen reader, or look at the accessibility tree in your browser's developer tools, and listen to one product page.
Fix the template first, then the images: most shop systems let you set the alt text of each product photo in the admin.

Our checks are an automated check, not a full audit, and not legal advice. The other image and colour criteria are on our WCAG overview and in the WCAG 2.2 checklist.

Frequently asked questions

What does WCAG say about alt text?

Success criterion 1.1.1 Non-text Content (level A) requires a text alternative that serves the equivalent purpose for all non-text content. Decorative images must be implemented so assistive technology can ignore them, usually with an empty alt attribute.

When should alt text be empty?

When the image is purely decorative, or when the same information is already in text right next to it, for example a logo beside the visible company name in the same link. Use alt="" — leaving the attribute out is a failure, because screen readers may read the file name instead.

How do I write alt text for an icon button?

Describe the action, not the picture: "Search" for a magnifying glass, "Print this page" for a printer icon, "Remove from cart" for a bin. The W3C images tutorial uses the first two as examples.

Can an image checker tell if my alt text is good?

Only partly. Automated checks find images, image buttons, SVG graphics and image map areas without any text alternative, and alt text that repeats nearby text. Whether the text actually describes the image needs a person.

Are images of text allowed under WCAG?

At level AA, 1.4.5 Images of Text asks you to use real text instead of text in images where the technology allows it. Logos are an exception. If you use an image of text, its alt text should contain the same words.

Sources

W3C, Understanding 1.4.5 Images of Text: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html
W3C, Understanding 1.1.1 Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
W3C WAI, Images tutorial: https://www.w3.org/WAI/tutorials/images/
W3C WAI, An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
W3C WAI, Functional images: https://www.w3.org/WAI/tutorials/images/functional/
W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/