Decorative Image

A decorative image is an image that provides no information to the page content. In HTML, it receives an empty alt attribute (alt="") so screen readers ignore it. Without this attribute, the screen reader reads the filename instead.

Remove an image from your page. If no information disappears, it's a decorative image.

#What to do in HTML

The W3C tutorial lists four cases: layout elements (borders, separators, corners), visuals that duplicate link text, illustrations redundant with adjacent text, and images already described by surrounding content.

The solution comes down to one attribute:

<!-- Correct: screen reader ignores the image -->
<img src="orange-line.svg" alt="">
 
<!-- Incorrect: screen reader reads "orange-line.svg" -->
<img src="orange-line.svg">

role="presentation" and role="none" produce the same result, but alt="" remains the technique recommended by WCAG. For an inline SVG, add aria-hidden="true" with focusable="false". For pure decoration (pattern, texture, separator), prefer background-image in CSS: the image leaves the DOM and becomes invisible to assistive technologies.

#Decorative or informative? Context decides

The same photo changes status depending on the page. A mountain landscape as the hero of a travel blog? Decorative if the text already describes the destination. Informative if it's the only indication of the place. The W3C decision tree summarizes the test: removing the image changes understanding? No → decorative. Yes → informative.

A trap few people know about: the RGAA (criterion 1.2) invalidates a decorative image that has a title attribute. Even with alt="", a title="Pretty border" creates an accessible name and makes the image speak. The RGAA community confirms the solution: remove the title, or add aria-hidden="true".

#Common mistakes

alt absent vs alt empty. Without an alt attribute, most screen readers attempt to read the filename. You get "IMG underscore 20250114 underscore crop underscore final underscore v2 dot jpg". With alt="", silence. The difference is stark.

alt="decorative image". Screen readers already announce "image" before the alt content. Result: "image, decorative image". Noise for nothing.

#In summary

If removing the image changes nothing on your page, it's decoration. Give it alt="", remove any title, and move on. For pure decoration, background-image in CSS solves the problem at its source.

Back to glossary

Share this article

Learn more

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.

Alt Attribute

The alt attribute is the HTML attribute of the <img> tag that contains the alternative text of an image. Screen readers read this text in place of the image, and browsers display it when the image fails to load. Three possible states: absent, empty, or filled — each produces different behavior.

Alternative text

Alternative text is the text that a screen reader reads instead of an image. In HTML, it's the alt attribute on images. Its content depends on the image's role on the page: informative, decorative, or functional.