Writing useful alternative text for images
Identify whether an image informs, decorates, or acts as a link, then write alternative text for that job.
2026. 11. 10. 오후 4:08 UTCThe same bicycle photo can have three jobs. On a listing it describes the item. In an article it may be decoration. As the only link to an album it needs to tell visitors where they will go. Start with what the image contributes to the page and use that purpose to decide on alternative text.
Describe informative images in context
“A small dent in the rear mudguard of a yellow city bicycle” helps on a used-item listing. If the same photo illustrates brake adjustment, the position of the brake lever may be more relevant. When nearby text already covers a detail, consider whether repeating it helps anyone make a decision.
Distinguish decoration from a control
A decorative HTML image that carries no information can have an empty alt attribute. If a picture is the only content of a link or button, describe the destination or action. “Open the trip album” is more useful in that case than “Mountain photo.” W3C alt text decision tree
Put complex information on the page
Give a chart a short description and make the conclusion and key values available nearby in a paragraph or table. If an error message in a screenshot is needed to do the work, include the message as text too. A reader should be able to use the important information without seeing the image.
Read the page without its pictures
Read the heading, nearby copy, and alternative text in order as if the image were unavailable. Can you tell what to do or decide? Does the same sentence repeat? Finally, check any link destination and make sure the alternative text is attached to the right image.
Give the same picture two different jobs
Imagine a photograph of a bicycle. In an article about transport, the photo might illustrate a separated bike lane. A description that mentions the lane passing a parked bicycle gives the reader the relevant information. In a second-hand listing, the same scene could be about the condition of the bike. A description of the right side and a scratch near the back wheel would be more useful there. Look at what the reader needs to learn from the surrounding material. If the image acts as a link, its destination is part of its job. Where visible text already names the same destination, avoid making people hear the label twice. A small decorative icon may need no separate description when the neighbouring button text explains what it does. Imagine the picture has been removed. Identify what someone would miss, and use the alternative text to supply that information. Where the photo is only decoration, the answer can be that nothing is missing.
Read the page without seeing its pictures
Read the headline, the first paragraph, the alternative text and the next paragraph in order. Listen for sentences that repeat what the page just said. Suppose a recipe shows the same pan at each stage. The useful distinction could be that the vegetables are chopped in the first picture and have browned in the second. If a screenshot contains a table, avoid cramming every number into a short description. Explain the main pattern in nearby text and provide the underlying figures in an accessible table if readers need them. Check both the editing screen and the resulting page. One field may control the caption and another the alternative text, and they can serve different purposes. Try navigating the page with a screen reader, or with pictures hidden, and pay particular attention to image links. A listener should be able to predict where the link leads. If the first attempt is confusing, adjust the description and read the surrounding passage again before saving.