Write Alt Text That Matches the Image's Purpose
Compare informative, functional and decorative uses of one image, then check the page without relying on the picture.
Content updated:
Describe the information the page needs
Alt text depends on why an image is on a particular page. An informative image needs a text alternative that conveys its relevant meaning. A purely decorative image can use an empty alt attribute. An image acting as a button or link needs a clear action or destination when that information is not already available.
Do not paste a list of everything visible into every image field. Start by reading the surrounding heading, caption and link. This helps avoid repeating nearby text or omitting the detail the image was added to explain.
One mug image, three different uses
Consider an illustrative photograph of a blue mug with a chipped handle. In a product-condition listing, a useful draft might be 'Blue mug with a small chip on the upper handle.' That description focuses on the defect the buyer needs to know about.
In a repair tutorial, the useful description may instead explain the marked repair area. If the same photograph is only a decorative header beside a complete text explanation, an empty alternative may be appropriate. These are editorial examples: inspect the actual image before using any description, and never invent the chip because a template mentions one.
Keep meaningful text and complex information available
When the image contains instructions or text that readers cannot obtain elsewhere, include that information in accessible page text. For a chart, a short description can identify its purpose while a nearby explanation or data table conveys the values and relationships. Trying to squeeze a whole chart into one long alternative can be hard to navigate.
An AI-generated draft can help start the wording, but it can also invent objects, emotions or relationships. Review it against the image and its context. TheImageIs prepares image files; alt text normally belongs in your CMS or HTML and is not added to a JPG by naming the file.
Review the page as a sequence of information
Read the heading, image alternative and following paragraph in order. Check whether they make sense together and whether the image's essential contribution is still available. For a linked image, verify that its accessible name explains the destination rather than describing irrelevant scenery.
Test a real page with the accessibility tools available in your browser and, when possible, a screen reader. A nonempty alt field is not proof of accessibility. The goal is that a person can understand the page or operate the link without needing the image.
Write and compare alternatives in context
A guided exercise, not a benchmark. Inspect your own output; results depend on the source and settings.
- Choose one image and state the reason it appears on the page.
- Draft a concise alternative based on the visible facts and nearby text.
- Read the page's text sequence without looking at the image and correct missing or repeated information.
- Enter the result in the CMS or HTML and check the page's accessible image or link name.
The image's relevant information or function is available in text, without invented detail or keyword repetition.
Sources & further reading
Try an idea and review your result before saving your edits.
