When should an image use empty alternative text?

Start with the image’s job in that particular spot, not its appearance. Ask: “What would someone miss if this image were ignored?” If the answer is nothing important because it is visual decoration, empty alternative text is appropriate. If nearby text already conveys the image’s relevant information, the image may also use empty alternative text to avoid repetition. If the image adds something the text does not, don’t treat it as decorative; provide alternative text that conveys that contribution. The key distinction is the image’s purpose in context. [S1]

For example, assume a page heading says “Spring workshop” and a small flourish beside it is only there for appearance. The flourish adds no information, so it can be empty. But if an image shows which button to select in a pictured interface, and the instructions don’t name that button, the image contributes information. Don’t treat it as decorative just because it is small or visually simple.

Compare the information conveyed by the image with the text a reader already encounters nearby. If that text communicates the image’s relevant point, repeating it in alternative text can create clutter for someone using assistive technology. W3C identifies information already conveyed by nearby text as a reason to use an empty alt value. [S1]

Example: assume an article includes a photo of a building, and the adjacent caption says, “The north entrance is closed; use the west entrance.” If that caption supplies the point readers need from the image, repeating the same sentence as alt text may be redundant. If instead the image shows a route or feature the caption does not describe, consider what additional information the image contributes. Don’t decide from the caption’s mere presence; compare what each actually communicates.

No. An empty value and an omitted attribute are different. For an image intended to be ignored, use an explicit empty value: alt="". W3C warns that if the alt attribute is omitted, some screen readers may announce the image’s filename. [S1]

For example, a decorative divider could be written as <img src="divider.png" alt="">. The empty value expresses that the image contributes no information in this context. Leaving alt off does not express that same choice. This example illustrates the markup distinction; it is not a guarantee about how every browser and assistive technology will behave.

Review each image in place, using this three-way decision:

1. Decorative: It adds no information in context. Use alt="".
2. Already conveyed nearby: Its relevant information is already available in adjacent text. Use alt="" rather than repeating that information.
3. Informative: It contributes information not otherwise conveyed. Don’t mark it as decorative; use alternative text that communicates that contribution.

Worked example, under these assumptions: a product page has a decorative starburst beside its heading, a product photo with a caption that already identifies the item and its key feature, and a diagram whose labeled steps explain a process not described in text. The starburst and redundant product photo could use empty alt values; the diagram contributes information that needs to be conveyed in alternative text. The actual decision depends on the page context, so the example doesn’t establish the right choice for every similar-looking image.

The decision is about what information the image contributes and whether nearby text already supplies it. [S1]