Alt text examples: good and bad, by image type

Alt text is how a screen reader user, a visitor on a broken connection and a search engine learn what an image is for. The rule comes from WCAG 1.1.1 Non-text Content: images need a text alternative that serves the same purpose, and purely decorative images should be ignored by assistive technology. Missing alt text is one of the most common failures on the web: the WebAIM Million February 2026 report found it on 53.1% of the home pages it tested.

All examples on this page are original and illustrative. The businesses, people and products in them are invented. The categories and rules follow the W3C Images Tutorial, which says the right text "needs to be determined by the author, depending on the usage, context, and content of an image." For the full background, read our complete guide to alt text.

First, decide what the image is for

The W3C alt decision tree asks a short series of questions. In plain terms:

1. Does the image contain text? If the same text is already on the page as real text, use alt="". If the text is the only copy, the alt text repeats it. If it is an icon with a function, say the function.
2. Is it in a link or a button? If the control would be unclear without the image, the alt text says where the link goes or what the button does.
3. Does it add meaning to the page? A simple photo or graphic gets a short description of that meaning. A chart or diagram gets a short alt plus the full information elsewhere on the page. If nearby text already says it, use alt="".
4. Is it purely decorative? Use alt="".
5. Still unsure? The tree does not cover every case; the full tutorial does.

Alt text examples by image type

Each row is one image in one context. Change the context and the right answer can change, which is covered further down.

The star rating row follows the W3C groups of images tutorial, which gives the first star the whole rating and the rest an empty alt.

Four of the examples, with the images

The pictures below are simple illustrations we drew for this page. On this page each image is the thing being discussed, so its own alt text describes it. The third column shows the alt text the same image would get in its real job on a website, which is a different answer because the context is different.

The examples in code

Product photo

Describe what a shopper would ask about over the phone: the item, its color, material and the detail that tells it apart from the one next to it. Leave out price and brand slogans; the page already has them. Our guide to alt text for product images goes deeper on variants, galleries and swatches.

<img src="backpack-olive.jpg"
     alt="Olive canvas backpack with brown leather straps and a zip front pocket">

Photos of people

Describe people by what the image shows and what the page establishes: their role, what they are doing, and visible details that matter to the point of the image. Do not guess at identity, ethnicity, gender, age or emotion that the picture and the page do not make clear. Name a person only when the page tells you who they are. Our own alt text generator follows the same rule: it is told to describe people neutrally by visible attributes only.

<!-- The caption names her, so the alt text can too -->
<img src="ribbon-cutting.jpg"
     alt="Head librarian Rosa Kim cutting the ribbon at the reopened Elm Street branch">

<!-- Stock photo on a services page: describe, do not guess -->
<img src="consultation.jpg"
     alt="Two people at a desk reviewing a printed floor plan">

Chart or graph

The W3C complex images tutorial describes two parts: a short description that identifies the image, and a full text version of its information. One of its approaches is to say in the alt text where the long description is.

<figure>
  <img src="orders-h1.png"
       alt="Line chart of monthly online orders, January to June. Data in the table below.">
  <figcaption>Online orders, first half of the year</figcaption>
</figure>
<table>
  <caption>Monthly online orders</caption>
  <!-- one row per month -->
</table>

Icon button and linked logo

For functional images, the W3C functional images tutorial uses alt="Print this page" for a printer icon and alt="W3C home" for a logo that links to the home page. The alt text describes the action or destination. Nobody needs to hear that the icon is a magnifying glass.

<button type="submit">
  <img src="search.svg" alt="Search">
</button>

<a href="/">
  <img src="northwind-logo.svg" alt="Northwind Coffee home">
</a>

Inline SVG

An <svg> drawn into the page has no alt attribute. When it is informative, give it role="img" and a name with aria-label. In WAI-ARIA 1.2, the img role is "a container for a collection of elements that form an image" and requires a name. The W3C technique ARIA24 uses the same pattern for icon fonts. When the SVG is decorative, or a visible label already names the control, hide it with aria-hidden="true" instead.

<!-- Informative: a status icon with no visible text -->
<svg role="img" aria-label="In stock" viewBox="0 0 24 24">
  <path d="..." />
</svg>

<!-- Decorative: the button text already says it -->
<button type="button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="..." /></svg>
  Add to cart
</button>

Linked image next to its own link text

When a product photo and its name sit inside one link, an alt text that repeats the name makes a screen reader read it twice. The W3C example for an image beside link text uses an empty alt.

<a href="/products/olive-backpack/">
  <img src="backpack-olive-thumb.jpg" alt="">
  Olive canvas backpack
</a>

Decorative image

The W3C decorative images tutorial is direct about the difference between an empty alt and a missing one: "Leaving out the alt attribute is also not an option," because some screen readers then announce the file name instead.

<!-- Right: screen readers skip it -->
<img src="wave-divider.svg" alt="">

<!-- Wrong: some screen readers read out "wave-divider.svg" -->
<img src="wave-divider.svg">

Image of text

For images of text, the W3C tutorial says "the text alternative must contain the same text presented in the image." Styling, fonts and shadows are not described. Better still, use real text styled with CSS, so it can be resized and translated.

<img src="returns-banner.png" alt="Free returns within 60 days">

Same image, different alt text

Alt text describes an image in a context, not in the abstract. WebAIM puts it this way: an image "may need vastly different alternative text depending on how it is used." Take one photo of a runner's shoe striking wet pavement:

• On the product page for that shoe: alt="Gray and orange trail running shoe, side view, mid-stride on wet pavement". The shopper needs the product.
• In an article about running form: alt="Runner's foot landing midfoot, heel just off the ground". The reader needs the technique, not the brand.
• As a mood image behind a headline that says everything: alt="". It adds nothing a listener needs.

This is also why an AI description can be accurate and still wrong for the page: a model sees the pixels, not the purpose. Our test of AI alt text accuracy shows where vision models get the pixels wrong too.

Mistakes that appear in every category

• Filenames. alt="DSC_0193.JPG" tells a listener nothing. It usually comes from a CMS filling the field automatically.
• "Image of" and "photo of". WebAIM advises against these phrases because screen readers already announce the image, and suggests including the medium only when it matters, as in a painting or an illustration.
• Keyword stuffing. Google's image SEO guidance warns that filling alt attributes with keywords "results in a negative user experience and may cause your site to be seen as spam."
• Repeating the caption. If a visible caption or the next sentence already says it, the alt text should add something or be empty, or the listener hears it twice.
• Describing a different image. Alt text copied from a similar listing reads perfectly and is still false. Only comparing it with the actual image catches it, which is what our alt text checker does.
• Narrating everything. Lighting, camera angle and background rarely matter. WebAIM notes that typically "only a few words are necessary."

Check your own alt text

• The free scan finds images with no alt attribute and placeholder alt text such as filenames, among its 16 rule-based checks.
• The accessibility bookmarklet runs checks on the page you are looking at, including pages behind a login.
• The alt text checker downloads the first six described images on a page and asks whether each description is true of its image.
• The alt text generator drafts descriptions for images you upload. Treat its output as a first draft and read it against the picture.
• For text inside images, the image contrast checker measures whether that text is readable, and the color contrast guide explains the thresholds in WCAG 1.4.3.

Alt text is one part of making a website accessible, and it is the criterion behind our WCAG 1.1.1 explainer. No automated tool, ours included, can confirm a whole site meets WCAG; see what we check for exactly what is covered.