Image Alt Text: How to Write It for People and Search

What is image alt text?

Alt text, or alternative text, is the value of the alt attribute on an HTML <img> element:

<img
  src="dalmatian-playing-fetch.jpg"
  alt="Dalmatian catching a red ball on a beach"
>

The text acts as a replacement for the image when its visual content is unavailable. A screen reader can announce it, and a browser may display it when the image fails to load.

Not every image needs a written description. A purely decorative image should normally have an empty alt value:

<img src="gold-divider.png" alt="">

The attribute is still present, but its empty value tells assistive technology that the image does not add information and can be ignored. Alt text is not a hidden caption, a list of keywords or a complete inventory of everything visible in a photograph. It is a concise text replacement for what the image contributes in its current context.

Why does alt text matter?

It makes visual information available in another form

People may not see an image because they use a screen reader, have images disabled, are on a poor connection or encounter a failed file. Appropriate alternative text preserves the meaning or function that would otherwise be lost.

For a chart, that may mean access to the important trend and underlying figures. For a product photo, it may mean the colour and feature shown by that particular view. For a search icon, it means knowing that the control performs a search.

It prevents unnecessary noise

Accessibility also means knowing when to remain silent. Announcing every flourish, spacer, duplicated icon and background texture creates friction without adding understanding. Empty alt text allows decorative images to be skipped.

It helps search engines understand images

Google uses alt text alongside computer vision and the surrounding page content to understand an image's subject. Relevant text can support image discovery in search when it accurately describes what the image contributes.

Alt text is one signal within the whole image and page context. Descriptive filenames, nearby text, captions, page relevance, image quality and technical discoverability also matter. Keyword stuffing harms readability and can make the page appear spammy.

It gives linked images meaningful anchor text

When an image is the only content inside a link, its alt text can communicate the destination to people and act as anchor text for Google. The right wording describes where the link goes or what it does rather than merely naming the picture.

Write for the image's purpose, not just its appearance

The same image can need different alt text on different pages because its purpose changes with the context.

Imagine a photograph of a presenter holding the Clearcrawl Impact Report at an event. On a news article about the award, the useful detail may be:

alt="Maya Patel holding the 2026 Search Innovation Award"

On Maya's team profile, the image may simply identify her:

alt="Maya Patel"

Beside a paragraph that already says “Maya Patel receives the 2026 Search Innovation Award”, the image may add no new information:

alt=""

A literal visual description is sometimes appropriate, but meaning comes first. “Red upward arrow” describes appearance; “Revenue increased by 18%” communicates the point of a chart annotation.

How to handle different image types

Informative images

An informative image contributes a simple fact, concept or impression that is not already available in nearby text. Describe the information needed to understand it.

<img
  src="valve-position.png"
  alt="Boiler filling-loop valves in the closed position"
>

For a product photograph, describe the attributes the image exists to show:

<img
  src="navy-jacket-back.jpg"
  alt="Back of navy hiking jacket showing the adjustable hood and vent"
>

Avoid subjective filler such as “beautiful”, “amazing” or “high quality” unless that judgment itself is relevant and supported.

Decorative and redundant images

Use alt="" when an image exists only for visual decoration or repeats information already conveyed by nearby text.

<h2>
  <img src="leaf-icon.svg" alt="">
  Sustainable materials
</h2>

The visible heading already communicates the section label. Announcing “leaf icon, Sustainable materials” adds noise. Where practical, purely decorative imagery can be implemented through CSS. If it remains an <img>, keep the alt attribute present and empty.

Functional images and icon-only controls

When an image initiates an action, describe the action rather than the object shown:

<button type="submit">
  <img src="magnifying-glass.svg" alt="Search">
</button>

“Search” is more useful than “magnifying glass”. Likewise, use “Print this page” rather than “printer icon”. If the button already has an accessible text label, the image can be decorative to avoid announcing the same purpose twice.

Linked images

If an image is the link's only content, describe its destination or purpose:

<a href="/">
  <img src="clearcrawl-logo.svg" alt="Clearcrawl home">
</a>

If visible link text already names the destination, use empty alt text on a redundant image within that same link:

<a href="/academy/">
  <img src="book-icon.svg" alt="">
  Clearcrawl Academy
</a>

Images containing text

Avoid using images for text that could be real HTML. Real text adapts better to zoom, small screens, translation and user styling. When important words appear only in an image, include those words in the alternative. If the same text is already present beside the image, use empty alt text to avoid repetition.

Complex images, charts and diagrams

Alt text is usually too small a container for all the information in a detailed chart, map or process diagram. Give the image a concise identification and place the full explanation or data nearby.

<img
  src="organic-traffic-2026.png"
  alt="Line chart of monthly organic visits in 2026; traffic rises sharply after June"
  aria-describedby="traffic-chart-description"
>

<div id="traffic-chart-description">
  <p>Organic visits increased from 18,400 in January to 31,700 in December...</p>
  <!-- Include the relevant figures or an accessible data table. -->
</div>

The short alternative identifies the chart and its main point. The surrounding content makes the complete information available to everyone, including readers who want the underlying values. Do not attempt to compress an entire data series into a long, difficult alt attribute. Image alternatives are one part of page structure; pair them with a clear heading hierarchy and a wider accessibility review.

How to write useful alt text

1. 01
   Decide what the image contributes.

   Review the image with its surrounding heading, caption, paragraph, link or control. Determine whether it is informative, functional, complex, redundant or decorative.

2. 02
   Replace the meaning or function.

   Write what someone needs in order to receive an equivalent outcome. For a diagram, convey its instructional point. For a link, name the destination. For a button, name the action.

3. 03
   Use concrete, natural language.

   Name the subject and the relevant detail:

   Vague: Product image
   Useful: Black desk chair with adjustable arms and mesh back

   Usually there is no need to begin with “image of” or “picture of”, because assistive technology already identifies the element as an image. Mention the medium when it matters, such as “watercolour map” or “screenshot of the crawl settings panel”.

4. 04
   Use page context to avoid repetition.

   Read the alt text together with the surrounding words. If the same information is already present, shorten the alternative or make the image decorative. For an image within a figure, the alt text and caption should complement each other rather than force someone using a screen reader to hear the same sentence twice.

5. 05
   Include relevant search language only when accurate.

   If a photograph genuinely shows a “navy waterproof hiking jacket”, those words form a useful description. Adding unrelated products, locations or synonyms does not. Search relevance follows from accurate language and helpful page context.

6. 06
   Leave decorative alt text empty.

   An empty alt value is an intentional and correct decision:

   alt=""

   Do not replace it with “decorative image”, a space or the filename. Those values create more noise.

Alt text examples

The improved versions are not scripts to copy. Preserve their qualities: specific subject matter, accurate details and a reason the destination will help.

How long should alt text be?

There is no universal character count that makes alt text good. It should be concise enough to hear comfortably and complete enough to replace the image's relevant contribution.

A simple image may need only a few words. A more informative photograph may need a sentence. A complex chart should use a short alternative plus a fuller explanation or data table in the page content.

• Remove “image of” unless the medium matters.
• Omit visual details that do not affect meaning.
• Avoid repeating the caption or nearby sentence.
• Move extended analysis into visible page content.
• Read the text aloud in context.
• Ask whether the same purpose survives without the image.

If an alternative turns into a paragraph, the image probably needs a longer description outside the alt attribute.

Alt text, captions, filenames and title attributes

These elements are related but serve different purposes:

A caption does not automatically replace appropriate alt text. It may discuss the image rather than substitute for it. Coordinate the two so they do not repeat unnecessarily.

Use short, descriptive filenames such as navy-waterproof-jacket-back.jpg rather than IMG_4837.jpg, but do not rely on a filename as an accessible alternative. The image title attribute is not a substitute for alt text because its browser and assistive-technology behaviour is inconsistent.

How to audit image alt text

Separate missing and empty alt attributes

These are different states:

<!-- Missing: purpose is unknown -->
<img src="gold-divider.png">

<!-- Empty: intentionally ignored as decorative or redundant -->
<img src="gold-divider.png" alt="">

A crawler can identify both, but an empty value is not automatically an error. Review the image's purpose before changing it.

Prioritise functional images

Start with image-only links, buttons and controls. Missing alternatives here can prevent someone from understanding or completing an action.

Review important informative images

Check product imagery, instructional screenshots, diagrams, charts, maps and article images that carry meaning. Confirm that the alternative reflects the information used on that page.

Find filename and placeholder patterns

Search the export for values such as:

• image, photo or graphic
• IMG_1234.jpg or another filename
• placeholder or todo
• A copied product title on every gallery view
• Long strings of repeated keywords

These patterns often indicate automated or incomplete content rather than considered alternatives.

Group repeated alt text

Repeated alternatives can be correct for recurring controls, status icons or the same logo performing the same function. They become suspicious when hundreds of different products or article images receive identical text. Review the template and source data before editing images one by one.

Check images in context

Crawl data cannot decide an image's purpose on its own. Inspect representative pages and read each alternative with its link, caption and surrounding copy. Also check responsive and lazy-loaded images in the final rendered page.

Test without sight of the image

Use a screen reader or browser accessibility inspector on important templates. Navigate through links and controls, listen for duplication and confirm that complex-image information remains available.

Review image alt attributes in Clearcrawl

Clearcrawl helps locate patterns that are difficult to see page by page. A missing alternative on one article may be an editing omission; missing alternatives on every product gallery usually point to the component or product data.

Use the crawl to build the review queue. Human judgment is still required to decide whether an image needs a description, an empty value, a functional label or a longer explanation in the page.

How to fix and verify alt-text problems

1. 01
   Classify the image by purpose.

   Decide whether it is informative, functional, complex, redundant or decorative. Do this within the page where the image appears rather than from the media library alone.

2. 02
   Choose the right treatment.

   • Write a concise replacement for a simple informative image.
   • Describe the destination or action for an image-only link or control.
   • Use alt="" for a decorative or redundant image.
   • Add a short alternative and a nearby full explanation for a complex image.
   • Put important words from an image of text into real text where possible.
3. 03
   Fix the shared source.

   Update the component, CMS field, product feed or editorial workflow that supplies the value. Allow context-specific alternatives when the same image can serve different purposes.

   Do not automatically turn a media-library filename or AI-generated description into published alt text without checking its accuracy and function on the page.

4. 04
   Test representative cases.

   Check a product gallery, article hero, linked logo, icon-only control, decorative image and complex chart. Review the rendered HTML and listen to important journeys with a screen reader.

5. 05
   Recrawl the site.

   Confirm that missing attributes have been resolved where required and that empty values remain on decorative images. Spot-check repeated and unusually long alternatives for unintended template output.

Common mistakes

Frequently asked questions