# Missing alt text on images that carry information
Source: https://easeweb.dev/learn/informative-images
Topics: Images and media > Informative images have alt text (WCAG 1.1.1)
The fix: Give every image that tells something a text equivalent of what it tells. Either write that message in the image's alt attribute, or move the message into real text on the page and give the image alt="". Both pass; the first changes only an attribute, the second also lets the words resize, translate and be searched.
Test with: screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html https://www.w3.org/WAI/tutorials/images/decision-tree/ https://www.w3.org/WAI/tutorials/images/informative/ https://www.w3.org/WAI/WCAG22/Techniques/failures/F65 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#authoring_meaningful_alternate_descriptions
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
## What happens
A pottery shop's home page opens with a banner. It shows a row of mugs fresh from the kiln, and across them, in large letters, "Kiln sale: 30% off all mugs until Sunday". Further down, the page for a speckled mug shows three small icons under its name: a dishwasher, a microwave and an oven with a line through it. A screen reader reaches the banner and reads "kiln-sale.jpg, image", or nothing at all. At the icons it reads "image, image, image". The sale, its end date and the warning not to put the mug in the oven never reach the listener.
## Why it fails
The banner is one `` with the offer drawn into its pixels and no `alt` attribute. A screen reader has no text to read, so it falls back to the file name or skips the image. The care icons do have `alt`, but the theme fills it with the word "image" for every picture, which tells the listener that something is there and nothing about what it says. In both cases the information exists only as a picture.
## Who is affected
People who are blind and use a screen reader hear only what the text alternative says. People with low vision who magnify the page may not be able to read words drawn small inside a picture, and can't change their size or colour. Images also fail to load on slow mobile connections, in some email clients and when people turn them off to save data; the alt text is then all that is shown. Braille display users, and anyone using a reading or translation tool, get only the text.
## What automation and AI miss
An automated check such as axe's `image-alt` reliably flags an `` with no `alt` at all. It can't tell whether the alt that is there is any use: it passes `alt="image"`, `alt="IMG_2041"` and `alt="banner"`, and it can't read the words inside a picture to check they are in the alt. A quick AI fix often describes the picture instead of its message ("A row of blue mugs on a wooden shelf"), which leaves out the 30% and the Sunday deadline. It may also mark every image `alt=""` to silence the scanner, which hides the information completely. Only someone who knows why the image is on the page can say what its text alternative should be.
## Before: the message drawn into images with no useful alt
```html
Speckled mug
```
The banner has no `alt`, so the offer it shows has no text equivalent. The icons have an `alt`, but "image" says nothing about care, so "not oven safe" is lost.
## After: write the message in the alt text
```html
Speckled mug
```
Only the `alt` attributes change. The banner's alt gives the same words the picture shows, and each icon's alt says what that icon means for this mug. A screen reader now reads "Kiln sale: 30% off all mugs until Sunday, image" and "Dishwasher safe, image", and the same words are shown if the images fail to load. The alt describes the message, not the mugs in the photo, because the message is why the image is there.
## After: move the message into real text
```html
Kiln sale
30% off all mugs until Sunday.
Speckled mug
Dishwasher safe
Microwave safe
Not oven safe
```
```css
.banner { position: relative; }
.banner-text {
position: absolute;
inset-block-end: 24px;
inset-inline-start: 24px;
padding: 16px 20px;
background: rgb(0 0 0 / 0.6);
color: #fff;
}
.care { display: flex; gap: 16px; list-style: none; padding: 0; }
.care li { display: flex; align-items: center; gap: 6px; }
```
The offer is now an `h2` and a paragraph laid over a photo with no words in it, and each icon has its meaning written beside it. Because the text on the page already says everything, the images get `alt=""` and screen readers skip them instead of reading the same words twice. The text can be enlarged, restyled, translated and found by search, and sighted people who don't recognise an icon can read its label.
## Which option to use
Both options give every piece of information a text equivalent and meet 1.1.1. Writing the alt is the smallest change: one attribute, no layout or design work, so it suits banners made in a design tool or a theme you can't restructure. Moving the words into real text costs a template change, but it also meets 1.4.5 Images of Text, works when text is enlarged or translated, and helps sighted people who don't know what the icons mean. Choose it for anything new, and for banners that change every week. You can mix them: alt text on this week's banner, and labelled care icons in the product template.
## Implementation decisions
**What to write.** Ask why the image is on this page and write that. The same photo of a mug might need "Speckled mug, front view" in a product gallery and `alt=""` next to a heading that already says "Speckled mug". Don't start with "image of" or "picture of": the screen reader already says "image". Keep it to a sentence or two and end with a full stop so the screen reader pauses.
**Missing alt is not the same as empty alt.** With no `alt`, screen readers often read the file name. `alt=""` tells them to skip the image, which is right only when the image adds nothing that isn't already in the text. Never use `alt=""` to silence a scanner on an image that carries information.
**Images inside links.** When an image is the only content of a link, its alt also has to say where the link goes ("Kiln sale: 30% off all mugs"). See the link text guide for the rest.
**Background images.** An image set with CSS `background-image` has no alt and is invisible to assistive technology. Anything it says must also be real text on the page. Don't move an informative image into CSS to avoid writing alt.
**Charts, maps and diagrams.** A short alt can't hold a whole chart. Give a short alt that says what it shows and the main finding, and put the full data in text nearby, such as a table or a `figcaption`.
**Editable content.** In a CMS or a store theme, the banner image and its alt are often separate fields, and the alt field is optional or filled with the file name. Make the alt field required for new images and show it next to the image, and stop the theme from falling back to the file name or a word like "image". When the banner changes, its alt has to change with it.
**`title` and `aria-label`.** A `title` attribute is not a reliable text alternative: it shows only on hover and some screen readers ignore it. On an ``, use `alt`. For inline SVG icons, see the guide on SVG icons.
## Verify the fix
1. In the browser's accessibility tree, check that every `` has an `alt` attribute, that informative images have a name that says what they tell, and that only images whose message is already in the text have an empty name.
2. Turn images off, or block them in the developer tools, and read the page. The sale, its end date and every care instruction must still be there, as alt text or as real text.
3. Read the page with a screen reader from the top. At each image you should hear its message once, with no file names, no "image" on its own and no message read twice.
4. Add a new image through the CMS or theme editor and check that you are asked for alt text and that the page never outputs a file name or a placeholder as alt.
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat whenever a banner, an icon set or the shared image component changes.
## Limits
This is a starting pattern, not a guarantee for every application. Paths and class names in the snippets are placeholders. Whether an alt is right depends on the image and its context, and only a person who knows both can judge it, so keep alt text in your publishing review. Test the complete journey with your target assistive technology.
