Information-carrying image

An information-carrying image is an image whose removal would cause a loss of meaning to the page. It conveys content that the surrounding text does not provide. The RGAA and WCAG require that it carries a text alternative describing the information conveyed, not the appearance of the image.

A sales chart without a text alternative is, for a screen reader, a hole in the page. The user knows that an image exists. They don't know what it says.

#How to distinguish an informative image from a decorative image

Mentally remove the image. If the reader loses information, it is information-carrying. If nothing changes, it's decoration.

The trap: the answer depends on context. A mountain photograph as a header banner on a travel blog is decorative when the text already mentions the location. The same photo in a hiking guide, without a caption, becomes informative. The RGAA glossary frames it differently: an image carries information if it "conveys information necessary to understand the content to which it is associated." The W3C offers a decision tree that formalizes this reasoning.

#Describe the information, not the appearance

The most common mistake: writing what you see instead of what the image communicates.

<!-- Bad: describes the appearance -->
<img src="graph.png" alt="Chart with blue and red bars">
 
<!-- Good: describes the information -->
<img src="graph.png" alt="Sales up 25% in the third quarter of 2025">

A phone icon followed by a number receives alt="Phone:", not alt="blue phone icon". An organization logo in a link receives the organization's name. The W3C tutorial on informative images details these cases.

For complex images (data charts, infographics), alt alone is not enough. WCAG criterion 1.1.1 then requires a short alternative text that identifies the image, supplemented by a detailed description nearby or via longdesc.

#Informative SVGs, the forgotten ones

An inline <svg> has no alt attribute. When it carries information, you must compensate:

<svg role="img" aria-label="Satisfaction rate: 92%">
  <title>Satisfaction rate: 92%</title>
  <!-- … -->
</svg>

Without role="img", some browsers don't render the <title> to assistive technologies. The WebAIM Million 2025 reports that 55.5% of home pages present at least one missing text alternative problem. Forgotten informative SVGs contribute to this.

#In summary

If removing the image causes loss of information, it is an information-carrying image. Describe what it communicates, not what it shows. And for SVGs: no native alt, but role="img" and aria-label do the job.