- Success Criterion 1.1.1
- Conformance level A
- W3C reference F39
Decorative Image Given Alt Text Instead of Being Marked Silent
1.1.1 — Non-text Content
Scenario
Setting
A fashion e-commerce site's checkout page
What’s wrong
A decorative spacer image has alt text such as "image" or "spacer" instead of an empty alt, so screen readers read out a meaningless word instead of skipping it.
Example
<!-- a transparent spacer GIF sits between each checkout field -->
<img src="checkout-spacer.gif" width="1" height="16" alt="image">Why it matters
A shopper reading through checkout with a screen reader hears "image" between every form field, drowning out the labels and instructions they actually need.
How to test
Inspect each decorative image (spacers, borders, flourishes) in DevTools: its alt attribute must be present and empty (alt=""), with no title attribute. Any words in the alt, such as "image", "spacer" or "graphic", fail (F39). Then check with a screen reader: reading down the page, it should pass over the image without saying anything.
How to fix
Replace the filler word with an empty alt (alt="") and don't add a title attribute (technique H67). An empty alt tells screen readers to skip the image. Don't delete the alt attribute instead: with no alt at all, screen readers can't tell the image is decorative and may read out its file name. Better still, make the gap with CSS margin or padding and drop the spacer image entirely. Decorative images you want to keep can go in CSS too (technique C9).
<!-- a transparent spacer GIF sits between each checkout field -->
<img src="checkout-spacer.gif" width="1" height="16" alt="">Outcome
A shopper reading through checkout with a screen reader hears only the field labels and instructions, with no meaningless interruptions.
Who is affected
Screen reader users moving through a multi-step checkout are more likely to miss a required field amid the noise.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Failure F39: A text alternative that is not null (e.g., alt="spacer" or alt="image") on images that should be ignored (opens in a new tab)
- Technique Technique H67: Null alt text and no title attribute on decorative images (opens in a new tab)
- Technique Technique C9: Using CSS to include decorative images (opens in a new tab)
Related scenarios
- Product Photo Added as a CSS Background With No Alt Text
- Chart Alt Text That Never Explains What Each Color Means
- Outdated Alt Text That No Longer Matches the Image
- Alt Text Left as a Filename Instead of a Real Description
- Decorative Image Not Hidden From Screen Reader Users
- Images Published With No Alt Attribute at All