How to Write Alt Text for Functional and Informative Images

Good alt text preserves the information or function an image contributes to a particular page. It is not a catalog description of every visible object, and it is not an extra field for search keywords. The same photograph can need different alternatives in different contexts.

Decide what the image contributes

Before writing, ask what someone would miss if the image disappeared. A product photograph may communicate shape and finish. A chart may communicate a trend. A decorative texture may communicate nothing that requires an equivalent. Purpose comes first, and wording follows that decision.

Use the word counter to compare candidate descriptions and spot bloated sentences, not to enforce a universal character limit. A concise alternative is easier to understand, but accuracy matters more than hitting an arbitrary number. Move detailed explanations into nearby page content when they need structure.

For each image, record whether it is informative, decorative, functional, or complex. This small content inventory prevents a content management system from treating every upload identically. The broader accessible interface guide helps place these editorial decisions alongside keyboard and visual accessibility requirements.

Write informative alternatives in context

An informative image needs the essential information that the image adds to the surrounding content. On a furniture page, “Oak desk with two drawers and a cable opening at the rear” is useful when those details distinguish the product. “Desk” may be insufficient; a lengthy description of the studio floor probably adds nothing.

Read the heading, caption, and preceding paragraph before drafting. If a caption already identifies the speaker and event, the alternative might describe the meaningful action rather than repeat the same identification. Do not omit useful information simply because some related text exists nearby; decide whether the combined experience remains equivalent.

Usually avoid “image of” or “picture of” because assistive technology already identifies an image. Include the medium when it matters: “Watercolor study of the proposed courtyard” conveys something that “Courtyard” does not. Describe visible facts without guessing emotions, identities, or intentions that the image does not establish.

The WAI images tutorial offers examples organized around purpose. Its practical lesson is contextual equivalence: two identical image files can legitimately have different alternatives when one documents a process and another helps shoppers compare finishes.

Handle decorative and functional images differently

A decorative image should normally have an empty alt attribute. Omitting the attribute is different: browsers and screen readers may expose a filename or URL instead. Empty text intentionally communicates that there is no additional image information to announce.

<img src="section-divider.svg" alt="">

<img src="desk-side.jpg"
   alt="Oak desk with two drawers and a rear cable opening">

<a href="/account">
<img src="account.svg" alt="Your account">
</a>

<button type="button">
<img src="print.svg" alt="">
Print receipt
</button>

The linked account image supplies the link's name, so its alternative describes the destination rather than the icon's appearance. In the print button, visible text already names the action, making the icon redundant. Functional alternatives describe what happens, not merely what the artwork resembles.

Avoid repeating the same name twice inside one control. An icon plus text reading “Search” usually needs only the visible word as the accessible name. Conversely, an icon-only button needs a reliable name supplied through an appropriate technique, such as visually hidden text or an aria-label on the button itself.

CSS background images have no alt attribute. That makes them suitable for decoration, not a dependable way to present essential instructions or product information. If a background carries meaningful content, provide that content in actual text or use an appropriate image element with an alternative.

Give charts and screenshots enough explanation

A complex image often needs a short identification plus a longer explanation nearby. For a sales chart, the alternative might state the main trend, while adjacent prose explains the relevant comparisons and a properly structured data table provides exact values. Do not pack an entire spreadsheet into one attribute.

Suppose a chart shows support requests falling after a documentation update. Describe the period, what is measured, and the observable pattern. Avoid claiming the update caused the fall unless the surrounding evidence supports that conclusion. An accessible alternative should not introduce analysis that sighted readers were never given.

For a screenshot in a tutorial, describe the relevant state: “Export dialog with PDF selected and Include comments unchecked.” Then put the actual instructions in page text. People should not need to infer the next action from a screenshot alone. Follow the WAI complex images guidance when deciding how to expose detailed information.

Images of text generally need the same words in the alternative, unless those words are already available equivalently nearby. Prefer real text wherever possible so readers can resize, select, and translate it. Logos are a common exception, but their alternatives should still reflect their contextual purpose.

Build an editorial review workflow

Make human review part of publishing. A filename-derived alternative such as “IMG_4821 final” is not a useful fallback. AI-generated descriptions can be a draft, but a reviewer must check whether they communicate the intended purpose, avoid invented details, and fit the page's actual context.

Preview the page with images disabled, then read it with a screen reader. Listen for repeated captions, unnamed links, and distracting decorative descriptions. This catches problems that a required CMS field cannot detect. MDN's image reference explains the underlying element behavior and attribute requirements.

Test linked images in the links list as well as in reading order. A description that makes sense beside a paragraph may be meaningless when presented as a standalone destination. Prefer clear destinations such as “Download annual report” over ambiguous wording such as “Blue document icon.”

Store alternatives at the placement level when the content system allows it, not only on the shared asset. Review them after cropping, replacing an image, translating content, or changing the surrounding copy. Include these checks in your development workflow so accessible content remains correct after design changes rather than only on launch day.

Key takeaways

• Describe the information or function an image contributes in context.
• Use empty alt text for genuinely decorative or redundant images.
• Name actions and destinations when images are functional controls.
• Put detailed chart explanations and data in structured nearby content.
• Review alternatives with images disabled and with a screen reader.