C18Advisory technique WCAG 1.1.1 Level A Partly scanner-detectable

Replace spacer images with CSS margin and padding

Space between things is a job for CSS margin and padding, not for a transparent one-pixel GIF stretched to size. W3C lists C18 as advisory for 1.1.1 Non-text Content and for nothing else, so it is a cleanup that helps rather than a technique that satisfies a rule. Margin adds space outside an element and padding adds it inside. Both need the element to be displayed as a block, which is the detail that trips people up when a shorthand quietly does nothing on an inline span. Spacer images are almost extinct and they still turn up in email templates, in legacy CMS output and in anything exported from an old page builder. Every one of them is an img element that has to be given an empty alt or removed, and removing it is the better answer.

How we find it in an audit

Spacer GIFs are a fast automated find. Images with no alt, tiny dimensions, or a filename that says spacer, dot or pixel. We check the surrounding markup at the same time, because a spacer image usually turns up inside a layout table and the table is the bigger problem.

How affected users experience it

Where the spacer has no alt attribute, some screen readers read the filename, so a page laid out this way arrives as spacer dot gif, spacer dot gif, spacer dot gif between every real line of content. That is not a small annoyance on an invoice or an order confirmation, where the content is short and the spacers outnumber it.

Passes vs. fails

Passes: the box grows with spacing. Fails: fixed height eats the text.

Passes

.cell { padding-left: 24px; }

Fails

<td><img src="spacer.gif" width="24" height="1"></td>

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 lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.

This guide is our interpretation of W3C technique C18: Using CSS margin and padding rules instead of spacer images for layout design. 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.