G82Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Name the function of interactive images

When an image is also a control, its alternative has to name what it does rather than what it looks like. G82 is that technique, and W3C counts it as sufficient for the non-text-content rule at Level A, using a more specific technique, which in HTML means alt text on the image or on the image button carrying it. The magnifying glass on your search button is not a magnifying glass to somebody who cannot see it, it is the search control, so the alt reads Search. The same logic covers interactive content where a text alternative could never do the same job, such as a drawing tool or a game. There the alternative describes the purpose, so a reader knows what they are standing in front of even though they cannot operate it.

How we find it in an audit

Every image inside a link or a button gets read out of the accessibility tree, and the only question is whether the name describes the action or the artwork. Magnifying glass, envelope icon and arrow right are the three we find most often, and all three describe pixels. Then a reviewer holds the name against the visible label where one exists, because a control whose spoken name differs from its printed one breaks voice control. Interactive embeds get named for their purpose rather than their technology.

How affected users experience it

A screen-reader user hears the alt text as the button's name, so Magnifying glass, button is an instruction to press a picture. They can usually work it out from context, and working it out is the cost. Voice-control users cannot work it out at all, because their command is the name, and saying click magnifying glass is only possible if they already knew that was what it was called. Naming the function answers both in a single edit.

Passes vs. fails

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

Passes

The same button uses alt text reading Search, so it announces as Search, button, and a voice-control user can say it.

Fails

A search button uses an image with alt text reading magnifying glass, so the picture is named and the purpose stays hidden.

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 when it is implemented through a more specific technique, so the condition is part of the test rather than a footnote to it.

This guide is our interpretation of W3C technique G82: Providing a text alternative that identifies the purpose of interactive non-text content. 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.