Image alt text: describe purpose, not just appearance

What is alt text?

The alt attribute provides a text alternative for an image. Assistive technology can use it when the image conveys information or functions as a control. Search engines can also use it as context, alongside the page text; it is not a place to hide a keyword list.

An empty attribute is not the same as a missing one

An informative image usually needs a meaningful alternative. A purely decorative image can use alt="" so it does not add unnecessary noise. Omitting the attribute entirely may leave users with an unhelpful filename. An automated check cannot reliably decide the image's editorial purpose.

Classify the image before editing

Ask what a person would miss if this image were unavailable. Describe that information, not every visible pixel. If nearby text already conveys the same information and the image adds nothing, consider an empty alternative. For a chart, put the detailed explanation or data in visible page content as well.

1. Distinguish content, decoration and function

A product photo may need a distinguishing feature or view. A divider needs no spoken description. An image-only link needs text explaining where it goes, not merely the shape of the icon. If a link already contains clear text, avoid repeating that same label in a decorative image's alt.

2. Write the shortest useful alternative

Use natural wording in the page's language. Include a product model or colour only when relevant to the image's purpose. Avoid image of, filenames and promotional keywords unless they are genuinely needed to convey meaning. There is no universal SEO character limit that makes an alternative correct.

3. Review repeated text in context

Several thumbnails of the same object may legitimately have similar alternatives. Different product views may need distinct descriptions. A duplicate-alt warning is a review cue, not an instruction to invent differences. A filename-like alternative often indicates a CMS fallback that needs fixing.

4. Check the actual image element

Update the field used by this placement, not just the media library record. Templates may override stored text. Inspect the rendered img and check that the attribute exists, including intentional empty values. Decorative CSS backgrounds should not carry information available nowhere else.

5. Read the page without the image

Review the surrounding text and alternative together. Test linked images with the keyboard and, where possible, a screen reader. Re-run the audit, but keep a documented intentional empty alt even if a heuristic asks for more text.

Examples: product detail and decoration

The first image conveys a specific product view. The second adds no information. These choices depend on placement, not on the file extension.

<img src="/images/rear-rack.jpg" alt="Black bicycle rear rack with adjustable mounting stays">
<img src="/images/section-divider.svg" alt="">

Next.js Image

The Image component requires an alt prop. Pass meaningful text for an informative image or an intentional empty string for decoration. Requiring the prop does not validate the quality of the text: keep the same editorial review.