The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Write alt text for the job an image does in its page: briefly convey useful information, name the action or destination of a linked image, and use alt="" when an image is decorative or its information is already provided nearby. Charts and other complex images need an accessible text equivalent beyond a short alt attribute.
Decide what the image does in context
There is no universal caption formula. Ask whether the image contributes information, performs an interface function, repeats nearby content, or contains details that need a longer explanation. W3C WAI’s image alt decision tree is a useful way to apply these questions.
- Informative: convey the meaning relevant to the page.
- Functional: explain what activating the image does or where it leads.
- Decorative or redundant: use an empty alternative,
alt="". - Complex: provide the detailed information in accessible text elsewhere on the page.
Write alt text for informative images
Use a concise phrase or sentence that gives the image’s relevant meaning. You do not need to inventory every visible detail. The right description depends on the surrounding content: a bird’s exact identity may be central on an identification page but incidental in a general article about a park. W3C WAI’s informative images guidance emphasizes meaning in context, which may not be the same as a literal visual description.
When to use empty alt text
For an HTML image that is purely decorative, adds nothing beyond nearby text, or repeats information already described, use an empty alt value: alt="". This lets assistive technology skip the image. Do not omit the attribute: W3C WAI notes that some screen readers may announce the image’s file name when no alternative is present. Whether an image is decorative depends on its purpose in context, not on an automated rule alone. See W3C WAI’s decorative images guidance.
#1 Best Overall
Describe linked images and buttons by their function
When an image is the content of a link or button, write an alternative that communicates the destination or action, not merely what the image looks like. For example, a printer icon used as a button should have an alternative that indicates printing. If adjacent text already names the same link or action, avoid repeating it in the image alternative; an empty value may be appropriate for the redundant image.
Handle text inside images
If words in an image carry meaning and are not available elsewhere as real text, include those words in the alternative. If the same words already appear nearby, or the text is only decorative, an empty alternative can prevent needless repetition. When possible, use actual page text rather than embedding important text in an image; text in images can be harder to customize and access.
Give complex images a text equivalent
A chart, diagram, or similarly dense visual may require more than a short alt phrase. Give the image a concise identifier or takeaway, then include its complete data or explanation in accessible text on the page—for example, in a nearby summary or data table. Do not try to squeeze a long explanation into the alt attribute. W3C WAI discusses this approach in its complex images guidance and tips and tricks.
Describe image groups and image maps
When several images work together to communicate one idea, provide an alternative that conveys the group’s information rather than making readers assemble redundant fragments. For an image map, provide context for the overall set of links and alternatives for each clickable area that state its purpose or destination.
Check the HTML you publish
For each image, review the page as a whole and make sure the alt value reflects its purpose:
- Ask whether the image contributes information or performs an action in this context.
- Check whether its meaning or text is already available nearby.
- For informative content, write the relevant meaning briefly; for a link or button, identify its action or destination.
- For a decorative or redundant image, include
alt="". - For a chart or other complex visual, add the detailed text equivalent to the page as well as a concise identifier or takeaway.
For example, an informative HTML image might be marked up as <img src="park-bird.jpg" alt="A red-tailed hawk perched on a park sign"> if that detail matters to the page. A purely decorative image could use <img src="leaf-border.png" alt="">. The appropriate wording depends on the image and its surrounding content.
Rank #4
Standards context
W3C WAI connects its image guidance to WCAG 2.2 Success Criterion 1.1.1, Non-text Content, Level A. This is standards context, not a determination of legal duties for a particular site or jurisdiction.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return a screenshot or PDF; its screenshot features can help inspect how a page appears, but they do not decide or write appropriate alt text. Cookie banners, popups, and chat widgets are removed before a shot. Bot checks, blank pages, and failed loads are never billed, and an MCP server lets AI agents take screenshots.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →cURL example, with ScreenshotNeo API documentation:
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThere are 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
