Don’t
Omit the attribute
May be heard as “blue-wave-divider dot svg.”
Some assistive technology may announce the filename or expose an unnamed image.
<img src="blue-wave-divider.svg">The principle
The decorative image principle
alt="" is not missing content. It is an explicit instruction: this image adds nothing to announce.
Three similar-looking choices
Only one is deliberately silent.
An omitted attribute leaves behavior uncertain. A descriptive value adds noise. A present but empty value communicates the author’s decision that the image is decorative or redundant.
Don’t
Describe decoration
“Decorative blue wavy line.”
The description interrupts the reading flow without adding useful information.
<img src="blue-wave-divider.svg"
alt="Decorative blue wavy line">Do
Use an empty value
Nothing is announced.
The image remains visible while assistive technology can ignore it.
<img src="blue-wave-divider.svg" alt="">Reading flow
Remove audible clutter.
A decorative divider may be visually helpful without belonging in the spoken reading stream.
Missing alt“Free shipping. blue-wave-divider.svg, image. Orders over $50…”
Empty alt“Free shipping. Orders over $50…”
Two common cases
Decoration can be visual or redundant.
The deciding question is whether the image contributes information in context—not whether it is beautiful, photographic, or important to the visual design.
Pure visual styling
If the flourish carries no meaning, prefer a CSS background or generated decoration so it never enters the accessibility tree.
.section::after { background-image: url(flourish.svg); }
Harbor trail boot
Tan · $128
Tan · $128
Information already adjacent
The thumbnail repeats the product identity supplied by the nearby name and variant, so its empty alt prevents duplicate output.
<img src="boot.jpg" alt="">
Do not silence meaning
“Decorative” is a purpose, not a look.
An image is informative when removing it would remove information needed to understand or operate the page. Empty alt is correct only when equivalent meaning remains.
Product appearance
Color, shape, or condition may be essential when someone is choosing what to buy.
Status icon
A symbol that is the only indication of success, warning, or error carries information.
Chart or diagram
Visualized relationships and data need an equivalent, often longer than a short alt attribute.
Quick test
Listen for both noise and loss.
- Read the page without the image. If no information disappears, it may be decorative.
- Check whether nearby text already provides an equivalent.
- Confirm every decorative
<img>has exactlyalt="", with no space. - Do not rely on a filename,
title, orrole="presentation"instead of the native empty alt. - Prefer CSS for pure ornament when the image does not need to be content.
- Use a screen reader to confirm decorative images disappear without hiding meaningful information.