Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

Image Alternatives by Purpose

Last updated: 5 Oct 20266 min read
tutorial
IntermediateBy AITrove Editorial

Alternative text gives a nonvisual reader the information or function carried by an image in its current context. It is not a mandatory inventory of every visible pixel. A decorative separator contributes no information and should have an empty alternative. A linked icon needs a name that communicates the destination or action; a screenshot used as evidence needs the fact a reviewer must assess. The same photo may require different words on a case card and inside a detailed report. Treat its purpose as editorial data attached to a placement, not merely as a property of the file.

Working case

An inspection report contains a photo of a damaged blue pipe labeled P-47. On the case list, the image is a thumbnail beside visible text saying Damaged pipe P-47, so repeating the same sentence in the image alternative may add noise. In the evidence detail, the image shows a crack near the upper valve that is not stated elsewhere; that fact belongs in the alternative or adjacent description. A magnifying-glass icon opens a zoom view and needs the action name View larger evidence photo. A colored stripe separating reports is decorative.

Implementation boundary

javascript
function alternativeForPlacement(placement) {
  if (placement.purpose === "decorative") return "";
  if (placement.purpose === "action") return placement.actionName;
  return placement.decisionFact;
}
console.log(alternativeForPlacement({ purpose: "action", actionName: "View larger evidence photo" }));
// Output: View larger evidence photo

Model each placement with a purpose such as decorative, informative, or functional and store an editor-approved alternative where needed. Do not generate the same file-level text for every context. Give decorative images an explicit empty alternative so assistive technology does not read a filename. Avoid phrases that merely announce the image element when its role is already conveyed. If a functional image is the only content of a link or button, the control needs a usable name even when the image fails. Put essential visible text from an image in real text when possible, and keep translations aligned with the report locale.

Cost and boundaries

Rendering a short alternative is O(1) work, but authoring and review scale with the number of meaningful placements rather than the number of unique files. Duplicating a file-level label across many contexts saves editorial time while losing intent. Overlong descriptions slow sequential reading and still may omit the decision-relevant fact. Record coverage by purpose category, not simply the fraction of images with nonempty strings. Visual QA should turn images off and inspect whether the report remains understandable; assistive-technology review is still needed for order and control names.

Failure trace

A build check insists every image have nonempty alt text, so decorators acquire labels such as blue line and functional icons get the vague word icon. The page becomes noisy while the zoom button remains unclear. Replace the rule with a placement decision and verify both empty decorative alternatives and meaningful control names. Another failure describes only the color of the pipe while the crack is the reason for escalation. Ask a reviewer to complete the case decision without seeing the photo. If the necessary fact is missing, revise the alternative or the adjacent prose.

Verification

  • A meaningful photo conveys its decision-relevant fact without sight.
  • A decorative image is skipped without announcing a filename.
  • An image-only control has a clear action name.

Practice drill

Review twenty report images: identify each placement’s purpose, the decision it supports, and whether nearby text already carries the fact. Test a linked icon with images disabled, a repeated thumbnail beside a visible title, and a detailed evidence photo with a hidden defect. Change the report locale and check translated alternatives. Add a content check that catches missing decisions without forcing meaningless nonempty text on decorative media.

Decision note

Describe the image’s function or missing information in context; use an explicit empty alternative when it adds no information.

Common Mistakes

  • Using one file-level alternative for every placement.
  • Forcing nonempty text on decorative artwork.
  • Naming an icon by appearance while hiding its action.

Connected lessons

Accessible Content and Media; Chart and Diagram Text Equivalents; Captions, Transcripts, and Media Controls; Landmarks, Headings, and Skip Paths; Accessible Names and Native Controls; Image Variants and Delivery Budgets; Structured Data from Visible Facts.

Apply and check

Build Project: accessible inspection report and review Web Development: accessible content and privacy decisions quiz.

web-tech
web-development
Storage details