H37Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Add alt text to every meaningful image

Every img that carries meaning needs an alt attribute, and the words in it have to do the picture's job rather than describe the picture. W3C lists H37 as sufficient for 1.1.1 Non-text Content on its own, with no partner technique attached. So an alt attribute carrying the same meaning as the picture meets the rule for that image. There is a third check in W3C's test that most people never reach. Where an image contains words that matter, a price on a banner, a discount on a badge, a name on a certificate, those words belong in the alt text as well. That one rule decides every promotional graphic on a store. One boundary comes with it, though. H37 covers alt attributes on img elements inside HTML documents. An SVG, a CSS background image or a canvas gets its words some other way, and a purely decorative image takes an empty alt under H67 instead.

How we find it in an audit

An img with no alt attribute is the cleanest automated find in the whole standard, so the scanner hands us that list in seconds. The half that needs a person is the alt that already exists. Filenames, keyword padding and image of filler all satisfy a machine and tell a visitor nothing, so our reviewers read every value against the job that image is doing on the page. Banners and badges get the closest look, because the words printed inside them are the ones most likely to have been left out.

How affected users experience it

A screen reader reads alt text as if it were any other sentence on the page, which is why good alt text is invisible. The information arrives and the listener moves on, never thinking about the image at all. With no alt, the same reader announces the file name instead. D S C zero four one eight two dot jpeg, graphic. On a product listing that is the difference between shopping and guessing. On a banner carrying the sale price, it is the difference between hearing the offer and never knowing it was there.

Passes vs. fails

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

Passes

<img src="dsc04182.jpg" alt="Gold twist ring, size 7">
<img src="sale-banner.png" alt="40% off all rings until May 3">

Fails

<img src="dsc04182.jpg">
<img src="sale-banner.png">

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 H37: Using alt attributes on img elements. 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.