SOURCE-CHECKED GUIDE · IMAGE WORKFLOWS
Write alt text for a content image
Write contextual alt text for a meaningful website image and use empty alt for artwork that adds no content.
Write alt text that explains what a content image adds to the page. A reader should get the image’s relevant meaning from the text, even when the image itself is unavailable. The surrounding heading, caption, and paragraph help determine what belongs in that description. MDN’s image element guidance treats alt text as contextual and calls for an empty alt value when an image is decorative.
Start by reading the passage where the image appears. Identify the detail the reader would miss without it. If the image supports a specific point, describe that point in plain language. If nearby text already gives the same information, avoid repeating the whole passage. The goal is a useful description in this page’s context, not an inventory of every visible object.
For example, an article discussing where to crop a portrait may need alt text that identifies the subject’s position in the frame. A page using the same portrait only as visual decoration may call for alt="". Those are editorial decisions about the image’s role on each page; the file alone cannot settle them.
Imagine a page explaining how a product label is positioned. If the image shows the label near the upper right edge, alt="Product label near the upper right edge of the package" carries the detail a reader needs for that instruction. alt="product photo" leaves that detail out. If the paragraph immediately says the same thing, shorten the alt to avoid hearing the information twice. For an image inside a link or button, MDN advises describing the action, such as the destination of the linked image, rather than only its appearance.
Inspect the result by reading the page’s text in order while treating the image as absent. Ask what the alt text contributes at that point and whether it repeats adjacent copy. Then check decorative images separately: an empty alt value should reflect an image that adds no content the reader needs.
This review checks the wording and the image’s intended role. It does not establish that every reader will interpret the description the same way, or replace review of the finished page in its actual context.
If the page still makes no sense with images unavailable, identify the missing fact. It may belong in nearby prose as well as alt text, particularly when the information is needed by everyone. If an alt phrase has become a list of every color and object in the frame, trim it to the detail relevant to the page’s task. The useful answer depends on the context of this placement, so reuse of the file does not automatically imply reuse of the same alt text.
This guide explains a workflow using the linked primary sources. We did not independently run every step or verify the result for your files; check the current service screen and your own output.
Primary sources: