Decorative Images

title: "Decorative Images — Using Empty Alt Text for Purely Decorative Images" description: "Learn how to use empty alt text (alt=) to hide decorative images from screen readers so they do not distract from meaningful content." weight: 3 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Decorative images add visual flair but do not convey information. Use empty alt text (alt="") to hide them from screen readers and assistive technologies.

## What You'll Learn

How to identify decorative images and properly mark them with empty alt text.

## Why It Matters

Decorative images announced to screen readers create noise and confusion. Users hear "image, image, image" without useful information.

## Real-World Use

A page has a decorative background border image, a spacer image, and a decorative icon next to a heading. All three have alt="" so screen readers ignore them and focus on the meaningful content.

## Decorative Image Examples

```html
<!-- Decorative spacer -->
<img src="spacer.gif" alt="" role="presentation" aria-hidden="true">

<!-- Decorative border -->
<img src="border-top.png" alt="">

<!-- Decorative icon next to heading -->
<h2>
  <img src="star-icon.svg" alt="">
  Featured Products
</h2>

<!-- Background pattern -->
<div style="background-image: url('pattern.png')">
  <!-- Content here. CSS backgrounds are inherently decorative -->
</div>

Using aria-hidden

<img src="divider-line.svg" alt="" aria-hidden="true">

Both alt="" and aria-hidden="true" hide the image from the accessibility tree. Use alt="" alone for most cases.

Common Mistakes

1. Omitting alt attribute entirely on decorative images

Missing alt triggers screen reader announcements. Always include alt="" for decorative images.

2. Using alt=" " (space) instead of alt=""

A space in alt may be announced. Use alt="" with no space.

3. Adding description to decorative images

"Screenshot, "Background pattern," "Border image" are unnecessary. Use empty alt.

4. Not hiding CSS decorative images

CSS background images are inherently decorative. Add no ARIA or alt for them.

5. Role=presentation without empty alt

role="presentation" plus alt="" is redundant but safe. Use at least one.

Practice Questions

1. How do you mark an image as decorative? Set alt="" (empty string) on the img element.

2. What is the difference between alt="" and no alt attribute? alt="" hides the image from screen readers. No alt attribute causes the screen reader to announce the file name.

3. Can a CSS background image be meaningful? Typically CSS background images are decorative. If meaningful, add alt text via an adjacent text element or aria-label.

Challenge: Find 5 decorative images on a website. Verify each has alt="" or is a CSS background image.

FAQ

Mini Project

Find 10 images on a page. Classify each as meaningful or decorative. For decorative images, verify they have alt="". Fix any that are missing alt.

What's Next

Learn about Functional Images where images are used as links or buttons.