How do I make an image understandable with appropriate alternative text?
Quick answer
Ask what a reader would miss if the image were unavailable, considering the surrounding text. Write a short replacement that communicates the image’s relevant purpose or information; don’t simply announce that it is an image or repeat what the page already says. For example, if a chart adds a comparison, describe that comparison rather than its colors or appearance. The right wording depends on the image’s context.
The question, the details, the next step.
I’m adding alternative text to images on a page. What’s the first thing I should figure out?
Start with the page, not the picture in isolation: ask, “If this image were unavailable, what information would a reader lose?” Alternative text should be a clear, concise replacement for what the image communicates in its context. Its purpose matters, and nearby text matters too. [S1][S2]
For instance, a photo used to identify a featured speaker may need the person’s name or role if that information is known and relevant. The same photo in a decorative header may add no information that the text depends on. Don’t describe every visible detail just because you can see it; focus on what helps someone understand the page.
How do I stop the description from repeating the caption or the sentence next to it?
Read the image’s proposed description together with the words immediately around it. Keep information the image contributes, and remove information those nearby words already convey. MDN advises against repeating nearby information or merely saying that the item is an image. [S1]
Example:
Nearby heading: “Monthly sign-ups” Image: a chart comparing January and February
Weak: “A bar chart showing monthly sign-ups.” More useful: “Sign-ups rose from 12 in January to 18 in February.”
Those figures are illustrative placeholders, not facts about a real chart. If the heading or a caption already states the comparison and values, don’t restate them; describe only any additional information the image contributes.
Could you show how the wording changes for different image purposes?
Yes. Treat these as illustrative examples and adapt them to the actual page:
- A photo identifying a person: “The event’s keynote speaker.” Add a name or role only when it is known and relevant; don’t guess someone’s identity from appearance.
- A process diagram: “Orders move from review to packing, then dispatch.” Include the meaningful sequence, not decorative colors or shapes.
- A product photo in a listing: “Blue canvas backpack with two front pockets.” If the product name and color are already stated nearby, avoid repeating them and include only useful details the image adds.
- A chart: “The line rises through April, then levels off in May.” If exact values matter, use known values; don’t estimate them from appearance.
The key is to describe what the image communicates in context, not to apply a fixed formula to every image. Check the actual page and image before deciding what information matters. [S1][S2]
What quick review can I use before I publish?
Review the image alongside its surrounding content, then ask whether the description gives a reader enough information to understand what the image contributes. The context-based test is useful, but no single wording will work for every image and page. [S2]
A reusable draft pattern is: “This image communicates [relevant information] about [its role on this page].” Replace the brackets with the actual point, then remove the pattern wording and any repeated details. If the image’s purpose is unclear, check with the person who created the page rather than inventing an interpretation.
A practical checklist
Read the image in the context of its heading, caption, and nearby text.
Ask what information a reader would lose if the image were unavailable.
Identify the image’s purpose on this page before drafting its description.
State the relevant information clearly and concisely; don’t merely announce the image.
Remove details already conveyed nearby, and check that names or values are known.
Re-read the description with the surrounding content to check for gaps or repetition.
A few more useful answers
Should alternative text describe every visible detail?
No. Focus on what the image communicates in its context, not a complete inventory of everything visible. Include details only when they help convey the image’s relevant information.
Is there one correct length for alternative text?
The guidance calls for a clear, concise replacement, but does not set a universal word count. Use enough detail to convey the image’s contribution without repeating surrounding content.
What if I can’t tell what the image is meant to communicate?
Check its role on the page or ask its author for context. Don’t guess at a person’s identity, a chart’s values, or the intended meaning.
Sources
References used for this guide.
- [S1] The HTML image element: Writing alternative descriptions developer.mozilla.org · Checked
- [S2] HTML images: Choosing useful alternative text developer.mozilla.org · Checked