When an Image Is Not Decorative

Modern web design treats image placement as a deliberate act that supports the overall purpose of a page. Nearly every image you declare therefore needs an alternate description. Nulling an image—setting its alt attribute to an empty string—signals that it exists purely for decorative purposes. In this context, “decorative” does not mean the image shows decoration; it means the image does not visually communicate information that matters for understanding the page and why the image is there.

  <img alt="" src="https://www.smashingmagazine.com/images/cat.jpg" />
This image has been nulled.
  <img alt=" " src="https://www.smashingmagazine.com/images/dog.jpg" />
This image has not been nulled.

A wallpaper vendor, for instance, absolutely needs alternate descriptions for its samples. A museum site presenting a collection piece benefits from both an alternate description and a caption. Remember to include punctuation in your alternate descriptions as well.

Why Null an Image? Historical Reasons

Assistive technology silently skips nulled images, so they don't clutter screen reader announcements. The main justifications for this come from older web development practices.

Legacy Layout and Design Techniques

Early CSS and layout methods leaned on images to ensure consistent rendering across browsers and platforms. The classic example is the spacer.gif—a 1×1 transparent pixel stretched to push content into place.

Three stretched spacer.gifs used to create an outer margin for the text, “Welcome to my homepage.”
Three stretched spacer.gifs used to create an outer margin for the text, “Welcome to my homepage.” (Large preview)

Similarly, before CSS properties like box-shadow, designers used 9-slice scaling, chopping decorative styling into nine separate images to accommodate content of unknown dimensions.

The text, “The 9-slice scaling technique used repeating background images for content with a flexible width or height.” surrounded by columns and rows for each of its four sides. In each of the four corners is a square area. In the square areas and columns and rows are generic image icons. The image icon repeats in the columns and rows, demonstrating how a texture can be tiled.
The 9-slice scaling technique (Large preview)

Both techniques generated many spacing or styling images. Without a way to silence their presence, they would pollute the accessibility tree, making navigation confusing and slow.

Redundant Announcements and Supplemental Icons

There are rare cases where the same image repeats on a page and subsequent placements add no context. Caution is warranted: a visible but silent image may confuse screen reader users with low vision who expect an announcement.

Icons accompanying links and buttons are another case. The component needs an accessible name that communicates functionality, but the icon's visual design does not. When a component uses only an icon, the image itself provides the accessible name:

<button type="button">
  <img src="icon-print.svg" alt="" />
  Print
</button>

<button type="button">
  <img src="icon-print.svg" alt="Print." />
</button>

Note that a visible text label is the preferred approach: it translates cleanly and communicates purpose more directly than an icon alone.

I have no idea what this button does.

Contemporary Use and Purpose

With modern CSS layout and styling, image placement is intentional by default. That means most images warrant an alternate description. Alternate descriptions must communicate the image's purpose — covering both its content and its reason for inclusion in context. This is precisely why fully automated image description remains impossible: context is irreducible.

Beyond the Standard img Tag

Alternate descriptions apply regardless of how an image is displayed, provided the image carries meaningful content.

The picture Element

The picture element carries no implicit role, so it cannot semantically announce a “picture.” It serves only as a container for source and img children. Use the child img element's alt attribute to describe the entire group:

<a href="https://www.smashingmagazine.com/product/9091866/color/3">
  <picture>
    <source 
      
      type="image/avif" />
    <img 
      alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue."
      src="9091866-3.png" />
  </picture>
</a>

CSS Background Images

Background images via background-image commonly add texture or handle user-uploaded media of unknown proportions. Using background-size and related properties keeps unpredictable assets from breaking a layout. If the uploaded image is meaningful, though, a background declaration offers no native place for an alternate description—your old friend spacer.gif might be worth reviving as an accessible companion element.

See the Pen [Background Image As Foreground Image Example](https://codepen.io/smashingmag/pen/OJprPwK) by Eric Bailey.

See the Pen Background Image As Foreground Image Example by Eric Bailey.

Inline SVG

SVGs can be linked with src on an img, or placed inline in the markup. For inline SVG, swap alt for the SVG title (and potentially desc) element:

<svg 
  role="img" 
  aria-labelledby="icon-bookmark-desc"
  xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <title id="icon-bookmark-desc">Bookmark.</title>
  <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
</svg>

Equivalent Experience

Presenting an image is a purposeful choice. Alternate descriptions explain its content and thereby communicate why it merited inclusion in the first place. A fanciful image isn't necessarily decoration; describing it makes your digital experience equivalently understandable to everyone, regardless of ability or circumstance.