- Success Criterion 1.1.1
- Conformance level A
- W3C reference F3
Product Photo Added as a CSS Background With No Alt Text
1.1.1 — Non-text Content
Scenario
Setting
A recipe site's ingredient list
What’s wrong
An image that carries real information is added through CSS as a background image, so there is no alt text anywhere — screen reader users never know it exists.
Example
On a recipe site's ingredient list: an image that carries real information is added through CSS as a background image, so there is no alt text anywhere — screen reader users never know it exists.
Why it matters
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning. On a recipe site's ingredient list, that means they can't tell what the image or video is showing.
How to test
View the page in Chrome DevTools with images disabled: if the image was a CSS background, no fallback text appears at all where it should be.
How to fix
Put informative images in the HTML (img with alt), or provide the same information as visible text; reserve CSS backgrounds for decoration.
Outcome
With the fix in place on a recipe site's ingredient list, they hear or read what the media conveys.
Who is affected
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- 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
- Decorative Image Given Alt Text Instead of Being Marked Silent
- Images Published With No Alt Attribute at All