G196Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Describe grouped images with one alternative

Where several images work together to say one thing, describing them one at a time destroys the meaning. G196 puts the whole description on one image of the group and marks the rest so assistive technology ignores them. Five star icons become two things. One alternative reading '3 of 5 stars', and four empty alt attributes. W3C attaches a condition that reviewers often miss. The ignored images have to be adjacent to the one carrying the group's alternative, so the technique does not license scattering. It also applies only where the group presents information or functionality, which means a run of unrelated decorative images is outside it. This is a sufficient technique for 1.1.1 Non-text Content at Level A.

How we find it in an audit

Our reviewers listen to image groups with a screen reader and count what gets announced. Rating widgets and step indicators are where this shows up. So are icon rows and flag sets. Then we check the alternative says what the group means rather than what the pictures are, since 'star star star' is a description of the images and '3 of 5 stars' is a description of the rating.

How affected users experience it

Hearing 'image star, image star, image star, image star empty, image star empty' takes several seconds and delivers no rating. The listener has to count icons they cannot see and infer the scale, and most will not bother. One announcement carrying the number gives them the same information a sighted reader takes in at a glance, in about the same time.

Passes vs. fails

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

Passes

<img alt="3 of 5 stars" src="star-full.png"> followed by the remaining four icons with alt="". One announcement, complete meaning.

Fails

<img alt="star"> five times over, announced as five separate images, with the rating itself never stated.

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 G196: Using a text alternative on one item within a group of images that describes all items in the group. 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.