What Are Decorative Images?

Screen readers may announce unhelpful image file names or add audible clutter when images are purely visual

When an image is only visual, treating it like meaningful content can slow people down. If an image has no alt text at all, some screen readers read the file name or path, which can sound like random code.

If the image has alt text that repeats nearby words, the screen reader repeats the same idea and pushes the main content further away. You can prevent this by marking images that people do not need for meaning or use, which means the next step is deciding whether the image is decorative.

Decorative vs informative is determined by whether the image adds information or a function beyond the nearby text

An image is decorative when it does not add information or a function that a person needs to understand or use the page. Use a simple test: if you remove the image, would you lose anything important for meaning or for doing a task? If the answer is no, it is decorative in that context. This judgment depends on why you included the image and what the surrounding content already says, since the same image can be meaningful on one page and decorative on another.

Common decorative cases include visual styling elements such as borders or dividers, eye-candy or ambience photos that do not support the topic, icons or images that repeat adjacent text labels, and images inside a link that only improve appearance or increase the clickable area without adding meaning. Once you decide an image is decorative, you need to code it so that assistive technology skips it.

Marking decorative images so that assistive technologies skip them

For an <img> element, the most supported method is a null alt value: alt=””. This tells assistive technology to ignore the image. Omitting the alt attribute is not acceptable because some screen readers announce the file name instead, which adds noise and can confuse people.

Some teams use role=”presentation” to hide an image, but support varies, and it can also override helpful alt text if someone adds it later, so treat it as a backup rather than a default. When the visual is purely decorative, CSS background images often fit better because they do not enter the accessibility tree in the first place.

For decorative inline SVG, use aria-hidden=”true” on the <svg> element so screen readers skip it, since inline SVG does not use alt in the same way as <img>. With these tools in mind, the workflow becomes repeatable across the whole page.

A repeatable workflow for each image on a page

Start by asking why the image exists on the page, then run the removal test: if the image disappeared, would any information or function be lost? If nearby text, a caption, or surrounding content already gives the same meaning, set alt=”” so the screen reader does not repeat it.

If the image carries unique content that the text does not cover, write alt text that captures the point of the image in that context. If the image is functional, such as a linked logo or an icon-only button, give it a text alternative that names the destination or action.

The goal is simple: every image ends up coded as either meaningful or decorative, and the code matches that choice.

Frequently asked questions

What should happen when an image is decorative on one page but informative on another?

The next step is to judge the image in context, not by the asset alone. If the surrounding copy already explains the point, the image can be decorative on that page; if the image is the only place where a fact or function appears, it should be treated as informative there.

When is alt=”” the right choice instead of writing a description?

Use null alt when the image adds no information or task value beyond the nearby text. The decision is not about hiding the file from search engines; it is about preventing screen readers from repeating content that the user already has in the paragraph or heading.

What should be checked before using role=”presentation” or aria-hidden=”true”?

Check whether the image is truly nonessential and whether the element type supports the attribute cleanly. Role and aria attributes can be useful for some SVG or layout cases, but they should not replace a plain text alternative when the image carries meaning or functions as a control.

What is the next audit step when a page contains many repeated icons or decorative illustrations?

Group the repeated visuals and test each one against the same removal rule. If the icon repeats a label, a control state, or a design motif without adding new meaning, mark it decorative; if one instance carries a different function or meaning, keep that one informative and code the rest accordingly.