Images · Concept

Write alt text for the image’s purpose.

Alternative text is not a fixed inventory description. It replaces the information an image contributes in its current context.

The principle

Ask “Why is this image here?” before asking “What is in this image?”

Same pixels, different jobs

Context writes the alternative.

The same boot image can communicate appearance, highlight a construction detail, or add nothing beyond nearby text. Change the context and inspect how the appropriate alt changes with it.

Tan hiking boot with red laces, brass eyelets, and a black treaded sole.

Product detail

Harbor trail boot

Choose the appearance you want. The image supplies visual details not present in the product name.

Decision path

Decide before you describe.

Start with function and meaning. A visual inventory of objects is useful only when those objects are the information the page needs to communicate.

Does it perform an action?

Name the destination or action. Functional and linked images are covered in a dedicated lesson.

Does it add information?

Write a concise alternative that supplies the information needed in this context.

Is that information already nearby?

If adjacent text provides the equivalent, avoid repetition with alt="".

Is it only decoration?

Use alt="" so assistive technology can ignore it. Decorative images are covered next.

Do / Don’t

Write the useful replacement.

Imagine the image failed to load and you were reading the page aloud. Say only what the listener needs at that point in the page.

Don’tDump metadata or visual inventory
“Image of product SKU HB-204 tan brown boot footwear JPEG.”

Filenames, stock keywords, and generic phrases add noise without replacing the image’s purpose.

<img src="HB-204.jpg"
  alt="Image of product SKU HB-204 tan brown boot footwear JPEG">
DoLead with relevant information
“Tan hiking boot with red laces and a black treaded sole.”

The alternative is concise, specific, and useful for choosing this product.

<img src="harbor-boot.jpg"
  alt="Tan hiking boot with red laces and a black treaded sole.">

Keep each layer honest

Alt is not every kind of image text.

Use the right channel for each job. Alternative text replaces the image for people who cannot perceive it; other information may need to remain visible to everyone.

Caption

Visible context, interpretation, source, or commentary belongs in visible text or <figcaption>.

Credit

Photographer, license, and copyright details should not be hidden inside alt.

Long explanation

Charts and complex diagrams need a longer equivalent outside a short alt attribute.

Quick test

Remove the pixels.

  1. Hide or disable images and read the surrounding page.
  2. Ask what information or function disappeared.
  3. Confirm the alternative restores that purpose without repeating adjacent text.
  4. Read it aloud in context. Remove filenames, keyword lists, and unnecessary “image of” phrasing.
  5. Browse with a screen reader and confirm informative images are concise.
  6. Press Tab. A non-interactive image should not become a keyboard stop merely because it has alt text.