How to fix missing image alt text

WCAG 1.1.1 Non-text Content requires a text alternative for images that convey information, so screen-reader users get the same meaning. Good alt text describes the purpose of the image in context, not every visual detail.

The message means the image has no text alternative at all: no alt attribute, and no name from aria-label or aria-labelledby. "Images must have alternative text" is axe-core's wording, so PageSpeed Insights and Chrome DevTools report it identically.

The distinction that catches people out is missing versus empty:

• <img src="cat.jpg"> — fails. No attribute, so a screen reader falls back to reading the filename.
• <img src="divider.svg" alt=""> — passes. An empty alt deliberately marks the image decorative and removes it from the accessibility tree.

So alt="" is a real answer, not a shortcut, provided the image genuinely carries no information. Spacers, dividers, background flourishes and an icon sitting beside text that already says the same thing should all be empty. Getting this right reduces noise for screen-reader users, which is why blanket-filling every alt attribute with the filename or a generated description makes a page worse rather than better.

One exception overrides all of it: if the image is the only content of a link or button, it must never be empty, because its alt becomes that control's accessible name. Describe the destination or the action, not the picture.

• Be concise and specific: "Red leather handbag with gold clasp", not "image" or "IMG_2043".
• Convey function, not appearance, when the image is a link or button: describe where it goes ("View cart").
• Use empty alt (alt="") for purely decorative images so screen readers skip them, but never omit the attribute entirely.
• Don't start with "image of": screen readers already announce it's an image.
• Include text that appears in the image (e.g. text on a banner) in the alt.

The right alt depends on what the image is doing on that page. Six common cases:

• Product photo. alt="Navy wool overcoat, knee length, two rows of horn buttons". Describe what a shopper needs to see that the product name beside it does not already say.
• Logo linking to the homepage. alt="Home" or alt="Acme home". The image is the whole link, so its alt is the link's name. See links with no discernible text.
• Chart. alt="Bar chart of support tickets per month in 2025", with the finding in the text next to it: "Tickets fell from 420 in January to 180 in December." A short alt says what the chart is; the numbers go in nearby text or a table where everyone can read them.
• Icon inside a button. A magnifying glass on a search button gets alt="Search", the action, not "magnifying glass". If the icon is an SVG, name the button instead, as in buttons with no accessible name.
• Decoration. A divider, a background flourish, or a stock photo behind a heading that adds nothing: alt="", so screen readers skip it.
• Text in the image. A banner that reads "Summer sale, 30% off everything" gets exactly those words as its alt. Anyone who cannot see the image should get the same message.

Run the free scan above to list every image missing a text alternative, with the element shown. Then add descriptions in your CMS. Most platforms (WordPress, Shopify, Webflow, Squarespace) have an alt-text field in the media or image editor. For decorative images, set an empty alt rather than leaving it blank.