A decorative image is one that serves only an aesthetic purpose, carries no information, and does no work. All three conditions have to hold, because that is the standard's own test rather than a judgment about how pretty something looks. Dividers, background textures, and an icon sitting beside a word that already says the same thing all qualify. The third condition is the one that catches people, since an icon inside a link is not decoration when it is the only thing naming that link. Where an image really is decoration, the rule does not ask you to describe it. It asks you to mark it up so assistive technology can skip it, and an empty alt attribute is the usual way of saying so.
In practice
The distinction is about the job the image does rather than how it looks, and the same file can go either way on two different pages. A photograph of your team can be decoration on an About page, and only where the text beside it already carries whatever the photograph was telling anybody. If the picture is how a reader learns who is who, it is content.
There are three ways to get the markup right and two ways to get it wrong. An empty alt attribute says skip this. Marking the image as presentational does the same job, with two conditions. The role is ignored on an element that can take focus, and it is ignored on an element carrying global ARIA attributes, so an image with an aria-label on it keeps its semantics whatever role you wrote. Cleanest of all is keeping decoration out of an img element altogether. W3C recommends a CSS background image wherever you can use one, because a background never reaches assistive technology in the first place. There is no attribute left to get wrong.
The two mistakes are opposites. Leaving the alt attribute off entirely is not the same as leaving it empty. With no attribute at all, some screen readers announce the file name instead. That is how a reader ends up hearing a string of digits where you put a divider. Writing a word into it is the other error, and W3C publishes it as a named failure. Spacer and image are its two examples.
Why it matters
Describing decoration is a failure in its own right rather than merely untidy. The standard asks only that decoration be ignorable. An image announced as a spacer has been handed a text alternative the rule never asked for, and every reader listening has to sit through it. On a page built from dividers, textures and icon flourishes there are a great many of those, and each one is a second of somebody's attention spent on something that was never carrying information.
The two-part test
Take the image away and read the page. If nothing was lost, it carried no information. Then check whether it was doing a job, because an image that is the only content inside a link or a button is still doing one however ornamental it looks. Pass both and an empty alt attribute is the right answer.
Where this shows up on the site
Related terms
- Alt textAlt text is the written description attached to an image, and it is what a screen reader reads out in place of the picture.
- Text alternativeA text alternative is the standard's own term for text attached to something that is not text, in a way software can follow from one to the other.
- Screen readerA screen reader is software that reads the screen out loud, or sends it to a braille display, for people who cannot see it.
- Semantic HTMLSemantic HTML means using HTML elements for what they mean rather than for how they look.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.