• 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 

<li class="ingredient allergen-warning">
  2 cups almond flour
</li>
<style>
.allergen-warning::before {
  content: "";
  background-image: url("/photos/almond-flour-package.jpg");
  display: inline-block;
  width: 40px; height: 40px;
}
</style>
<!-- the package photo shows a bold "Contains tree nuts" warning printed on the bag -->

Why it matters

On a recipe site, a package photo showing an allergen warning isn't decoration. Missing it as text means someone with a nut allergy has no warning until they've already started cooking.

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

Move the informative product photo into the HTML as a real image with alt text, so its meaning survives without CSS. Decorative background images are fine in CSS, but the moment a background image carries meaning, like an allergen warning printed on the packaging, it needs a text alternative.

<li class="ingredient">
  <img src="/photos/almond-flour-package.jpg" alt="Almond flour package, labeled: contains tree nuts" class="allergen-warning-icon">
  2 cups almond flour
</li>

Outcome

A home cook with a nut allergy hears "almond flour package, labeled: contains tree nuts" read aloud right where the ingredient is listed, in time to skip the recipe.

Who is affected

Screen reader users, and anyone browsing with images or CSS backgrounds disabled, get zero indication the allergen warning exists at all.

Learn more

Related scenarios