Image Alt Text: Choose the Meaning, Then Write the Description

Write alt text for the job an image does on the page. A photograph can explain a repair, identify a product, link to an article or simply decorate a heading. Those uses need different treatment even when the image file is identical. Start with the surrounding paragraph and the reader’s task before describing the picture.

For each image, decide whether its information belongs in a short alternative, in the visible article or in a longer structured explanation. This approach keeps screen reader output useful and makes essential information available to people who enlarge, translate or copy the page.

Use a context-first decision

The W3C’s alt decision tree separates informative, decorative, functional and complex images. Use the following editorial worksheet before entering anything into the content management system.

Question	Editorial decision	Check before publishing
Does the image add information needed for the article?	Describe that contribution	The alternative conveys the relevant detail
Is it the only content of a link or button?	Name the destination or action	The control has a useful accessible name
Does nearby text already provide its whole meaning?	Consider an empty alternative	No essential information disappears
Does understanding it require several facts or relationships?	Add a visible explanation or data table	Readers can obtain the same information in text

Assign this decision to the person editing the page, even if a photographer or designer supplies a draft description. An asset library description records what a file contains; the final page determines which details matter. Keep both fields if your publishing system supports them.

Describe the information an illustration contributes

W3C’s informative-image guidance emphasizes meaning in context. Consider an example photograph showing a bicycle wheel with its brake pad touching the tire. In a repair article, the important detail is the pad’s position. An appropriate alternative would identify that contact rather than list the wheel’s colors and every visible tool.

In a product listing, the same photograph might be unsuitable altogether because it illustrates a fault rather than the product being sold. Alt text cannot repair that editorial mismatch. Choose a better image or explain the fault in the visible caption.

For a screenshot, identify the relevant control and its state. An example such as “Notification settings with email alerts selected and text alerts cleared” communicates the selection. Put a multi-step procedure in ordinary text so readers can follow it without repeatedly returning to the image.

Give decorative images an explicit empty alternative

For an HTML image that contributes no additional meaning, use alt="". W3C’s decorative-image tutorial distinguishes this from omitting the attribute: a missing alternative can expose an unhelpful filename or URL to a screen reader.

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

Review decorative decisions when the layout changes. A photograph that was redundant beside a detailed caption may become informative when reused on a card without that caption. Similarly, a decorative icon can acquire meaning when the accompanying label is removed on small screens.

Keep purely ornamental borders and textures in CSS when practical. For editorial photographs, retaining an explicit image element can make ownership, sizing and captions easier to manage. The meaningful-versus-decorative decision still belongs to the page editor.

Name the destination of an image link

W3C’s functional-image guidance calls for alternatives that communicate an action or destination. A linked cover image should identify the article or resource it opens. A symbol used as a button needs a name that explains what activation does.

These two code examples illustrate different contexts:

<a href="/image-guide/">
  <img src="image-guide-cover.png" alt="Read the image accessibility guide">
</a>

<a href="/image-guide/">
  <img src="image-guide-cover.png" alt="">
  Read the image accessibility guide
</a>

In the second example, the visible link text already supplies the name. Keeping the image alternative empty avoids repeating it. Check the component in 2 views: its wide layout with visible text and its narrow layout after responsive styles apply. Hiding the visible text can change the accessible naming strategy or leave a confusing visual control.

Keep filenames, image credits and promotional keywords out of the control’s name. Credits belong in a caption or credit field. A reader navigating a list of links needs to recognize where each link goes.

Give charts a short introduction and structured detail

A complex chart needs more than a dense alt-text paragraph. W3C’s complex-image guidance pairs a brief identifier with a longer account of the important information. Make that explanation available beside the chart or through a clearly labeled link.

For an inventory chart, a useful publishing package contains 3 parts: a short alternative identifying the chart, a visible sentence explaining the main change and a table containing the underlying figures. Include units and the reporting period in the table. A reader should be able to distinguish items ordered from items delivered without interpreting color.

For a process diagram, write the steps and decision branches in sequence. For a map, explain the locations and routes needed for the task. A table works for quantities; ordered instructions often work better for a procedure. Choose the text structure that matches the information.

When the chart changes, update its alternative, summary and table in the same edit. Store the source data with the article so a later editor can reproduce the display and verify its labels.

Edit for relevance and observable detail

Draft the alternative after writing the paragraph it supports. Remove generic openings that add no useful information, then check whether a reader can recover the point of the image. Keep meaningful visual distinctions, such as which switch is selected or which branch connects to a decision.

Avoid assigning an emotion, occupation or identity from appearance alone. Use names when the article establishes who is shown and identity matters. For technical screenshots, transcribe labels carefully and check the software version so the alternative matches the visible interface.

Treat an automatically generated description as a draft requiring inspection. Check it against the actual image, the caption and the article’s claim. A confident description of the wrong model, number or action can be more misleading than an obviously incomplete one.

Run a 4-step publishing check

First, inspect every image in the article, including card thumbnails and linked logos. Second, read the visible text and alternatives in order to catch repetition and missing context. Third, inspect image-only links and buttons in the browser’s accessibility tree. Fourth, open the page at a narrow width and confirm that responsive changes preserve the intended labels.

Record the image’s purpose alongside any issue. A report saying “missing alt” is less useful than one saying “the chart’s only explanation is visual; add a data table and identify it in the alternative.” That gives the editor a specific correction and a way to verify completion.