How to write alt text: four uses of the same real image

Alt text depends on what an image does on the page. In a directions paragraph, it may need to tell readers which way to go. In an essay, the same drawing may add atmosphere without adding information. Inside a link, it may need to name an action.

This trail-fork illustration makes those choices concrete. It shows River loop on the left and Hill lookout on the right. The hills behind the signs add to the scene, but they are not needed to choose a branch. The drawing is instructional and does not describe a real destination.

Download the complete image demo ZIP, or save the four-context HTML example, 640-pixel image, and 1280-pixel image. Save all three in one folder, then open the HTML file in a browser.

Give directions when the image supplies them

Suppose the page says only, “At the fork, choose the branch for your destination.” The image supplies the missing directions. Its alt text should carry that useful information:

<h2>Directions</h2>
<p>At the fork, choose the branch for your destination.</p>
<img
  src="trail-640.jpg"
  alt="River loop is the left branch; Hill lookout is the right branch."
>

The alt text names the branches and their positions. It leaves out the decorative hills and avoids a tiny inventory of every visible shape. A reader who cannot use the image still gets what the paragraph requires to make the choice.

The recorded Chrome accessibility snapshot exposed this image with the name “River loop is the left branch; Hill lookout is the right branch.” This is an example of an informative image: its description supplies information that the surrounding text does not. The W3C guidance on informative images explains that role.

Leave the alt text empty when the drawing adds atmosphere

Now place the drawing beside an essay paragraph that gives no trail directions:

<h2>A break from the screen</h2>
<p>
  A short walk can be a change of scene. This illustration adds
  atmosphere without supplying directions.
</p>
<img src="trail-640.jpg" alt="">

Here, the branch labels are incidental to the paragraph. Announcing them would interrupt the essay with directions the reader was not asked to follow. The recorded accessibility snapshot included the heading and paragraph but omitted the image.

Use alt="" deliberately when an image adds no information needed in that context, or when its meaning is already supplied nearby. It differs from leaving the alt attribute out: an empty value states the editorial choice. The W3C decorative-image guidance covers this use.

Name the action when the image is the link

If the image alone is a download link, its job changes again. A description of the fork would not tell the reader what activating the link does.

<h2>Downloadable material</h2>
<p>The image is the entire download link.</p>
<a href="trail-1280.jpg" download>
  <img
    src="trail-640.jpg"
    alt="Download the trail-fork diagram (JPEG)"
  >
</a>

The alt text gives the link a useful name. In the recorded accessibility snapshot, the link was named “Download the trail-fork diagram (JPEG),” with the image inside it. The W3C guidance on functional images recommends describing the function when an image is used as a link or control.

If visible link text already names the download, the image does not need to repeat it:

<h2>Download with a visible label</h2>
<p>The visible link already names the file.</p>
<a href="trail-1280.jpg" download>
  <img src="trail-640.jpg" alt="">
  Download the trail-fork diagram (JPEG)
</a>

In this fourth snapshot, the link retained the name “Download the trail-fork diagram (JPEG),” while the image was omitted from the accessibility tree. The same image file appears in all four examples; its page role determines the alt text.

Check the sentence in its page context

When editing a blog post or site page, read the text immediately around each image. Ask what information would be missing if the image were unavailable. For the directions paragraph, the branch positions are missing. For the essay, nothing needed to understand the paragraph is missing. For the image-only download link, the action needs a name.

Enter the chosen text in your site’s image alt field, then inspect the resulting <img> element in the page source or browser tools. Confirm that an informative image has the intended alt value and a deliberately decorative image has alt="". If the image is a link, inspect the link’s accessible name as well. The W3C image decision tree and writing tips offer further guidance for making that choice.

These four examples cover a simple illustration. If essential words appear inside an image, include those words in accessible text or provide them visibly nearby. A complex chart may need a short alt description plus its full explanation or data elsewhere on the page, as described in the W3C complex-image guidance.

Keep the relationship the reader needs

For the directions example, alt="River loop and Hill lookout" includes both labels but loses their relationship to the fork. A reader learns the destination names without learning which branch leads where. Adding “left branch” and “right branch” supplies the missing instruction.

Another possible description, alt="A wooden sign, green hills, a sun, and a forked path", gives a reasonable inventory of the drawing. It still leaves the directions paragraph unanswered. Use it only for a page whose purpose actually depends on those visible features. Naming colors and shapes is useful when those are the subject of the surrounding discussion, rather than a requirement for every image.

A caption can change the job again. If visible text already says “Take the left branch for River loop and the right branch for Hill lookout,” everyone receives the route information in prose. Decide whether the image has anything further to add before repeating that full instruction in its alt attribute. Review the caption and the image as one placement; changing the caption may require changing the alternative.

For length, keep the information needed to understand the placement. The W3C writing tips do not provide a universal 125-character rule that makes every description correct. A short label can name a download link. A short sentence can express this fork’s directions. A long list of objects can remain unhelpful even if it fits a character limit.

When a diagram holds many instructions, put the full explanation in nearby text where readers can navigate it, then use the image’s alt text to identify the diagram and its relevant purpose. The supplied fork only has two destinations, so its directions fit in one sentence. A dense route map with distances and junctions would need a different amount of accessible text.

Test scope: The supplied local HTML was inspected in Chrome 154.0.8037.93 on October 7, 2026. The results above are Chrome accessibility snapshots of the four examples. They are not Safari or Firefox results, a screen-reader-user trial, or a WCAG certification.