F3Documented failure WCAG 1.1.1 Level A Partly scanner-detectable

Do not put information in CSS background images

F3 is a documented failure under the non-text content rule. It describes content that cannot be reached, not a technique for reaching it. The failing pattern is a background image carrying information that appears nowhere else, a sale banner, a chart, a set of instructions. A CSS background takes no alt text, so there is nothing for assistive technology to announce and no way to know an image is there at all. Three routes produce it and only one of them is a stylesheet. The declaration can sit in a style attribute, and it can be written by script at runtime, which is what a component library usually does. There is an escape and it matters. If the same information is already conveyed elsewhere on the page, the background image is decoration and no failure has occurred.

How we find it in an audit

The check runs in two passes. First we list every image arriving through CSS, a style attribute or script, which a tool can do. Then a reviewer looks at each one and asks whether it says something the page does not already say in text. That second pass is the whole audit, because the first pass alone would flag every hero image on the internet. Turning images off is the quickest way to see it, since anything that leaves a hole in the meaning was carrying meaning.

How affected users experience it

Two groups lose the same thing here and only one of them usually gets named. A blind reader scrolls past the half-price announcement, the seating diagram and the step-by-step graphic, hears nothing, and so none of them exist. Someone using a high contrast mode or their own background colors loses the image too, for the same reason, with no text behind it to take its place. The second group is much larger, and the failure lands on them just as hard.

Passes vs. fails

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

Passes

<img src="sale-50-off.png" alt="Summer sale, 50% off all outdoor furniture through August 31">

Fails

<div class="hero" style="background-image: url('sale-50-off.png')"></div>
<!-- The offer is painted on. Nothing announces it, and nothing else on the page says it. -->

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

The other techniques filed under this rule

39 guides on this site are filed under 1.1.1 Non-text Content. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.

This guide is our interpretation of W3C technique F3: Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background 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.