C9Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Put decorative images in CSS backgrounds

An image that carries no information belongs in CSS, as a background or through the content property on a pseudo-element, not in an img element. W3C lists C9 as sufficient for 1.1.1 Non-text Content. Two things come from putting it there. Assistive technology never has to decide what to say about it. The image also disappears cleanly when a reader turns CSS off or applies their own display settings, which is the low-vision half of the argument and the half most write-ups leave out. The test that decides which side of the line an image is on has not changed. Take it away and read the page. If nothing was lost, it is decoration. If something was lost, it is content, and content in a CSS background is a serious failure because there is no way to give it a name.

How we find it in an audit

Automated tools flag img elements with no alt attribute at all, which is a starting point rather than an answer, since decoration wants an empty alt and content wants a real one. Deciding which is which is a reading job. We ask, for every image on the page, what a person loses if it is not there.

How affected users experience it

Decoration announced as content is clutter, and clutter has a cost. A screen-reader user working down a page hears watercolor texture background, image, between two paragraphs and has to decide whether they missed something. Repeat that 30 times on a marketing page and reading it becomes an exercise in filtering. Moving the texture into CSS makes it silent, which is what it always should have been.

Passes vs. fails

Passes: alt text names the product. Fails: the file name is all there is.

Passes

.hero { background-image: url(watercolor-texture.png); }

Fails

<img src="watercolor-texture.png" alt="watercolor texture background">

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Element marked as decorative is not exposedA tool can check this
Image accessible name is descriptiveA tool finds candidates, you decide
Image button has non-empty accessible nameA tool can check this
Image has non-empty accessible nameA tool can check this
Link has non-empty accessible nameA tool can check this
Object element rendering non-text content has non-empty accessible nameA tool can check this
SVG element with explicit role has non-empty accessible nameA tool can check this
Image not in the accessibility tree is decorativeA tool can check this

Other ways to satisfy this rule

39 guides on this site are filed under 1.1.1 Non-text Content. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique C9: Using CSS to include decorative images. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.