How to Write Alt Text for Creative Assets
Write image alternatives that convey meaning in context, with examples for product photos, diagrams, logos, and decorative graphics.
Alternative text helps a person understand an image when they cannot see it. It is also one signal search engines use to understand images, but its first job is to communicate the image's purpose on the page. A file name or list of keywords is not a substitute. The same image may need different text in different contexts.
Ask what the image adds
Read the surrounding heading and paragraph, then imagine the image is hidden. What information is missing? If the image demonstrates a crop, name the change. If it shows a product, identify the details a buyer needs. If it is purely decorative and nearby text already carries the meaning, use an empty alternative rather than making a screen reader repeat a mood description.
The W3C image tutorial explains how image purpose affects the alternative. Google's image guidance also recommends useful, contextual text and warns against keyword stuffing.
Examples in context
| Page context | Weak alternative | More useful alternative |
|---|---|---|
| A product page for a blue ceramic mug | mug | Speckled blue ceramic mug with a wide handle and unglazed base |
| A guide comparing a wide and square crop | image example | Square crop keeps the coffee bag centered but cuts off the sign on the left |
| A diagram already explained in the paragraph | asset workflow diagram chart process | Brief moves to source files, review exports, and approved delivery |
| A decorative color wash behind a heading | beautiful blue abstract background | Empty alternative (alt="") |
These are invented examples. A real product photo should be described from what is visible, without inventing unseen materials or features. If a diagram is complex, the alt text can summarize it while a nearby paragraph or table explains the full relationship.
Avoid duplication and hidden claims
If a nearby caption already says “Wide header before crop,” the alternative should add the relevant visual difference, not repeat the caption word for word. Do not use alt text to insert product claims, prices, or locations that the image does not establish. Do not fill it with search terms.
For a linked image, the alternative may need to communicate the link's destination or action. If a logo links to the homepage, the site name may be enough. If a screenshot links to a larger annotated version, make that action clear in the surrounding link or accessible label.
Review with the image hidden
Hide images or use a screen reader and follow the page in order. Can you understand the point of each meaningful image? Are decorative images quiet? Is a visual instruction also available in text? Revise the alternative and surrounding explanation together. Alt text cannot rescue a page that relies entirely on an unlabeled screenshot for essential steps.
Continue: Use the image export checklist to include accessibility in the final file review.