Decorative image

Some images say nothing. A flourish under a heading, a texture behind a card, a stock photo of two people at a laptop, an icon sitting beside the word it already repeats. For those the correct alternative text is no text: alt="", which tells the browser to drop the image out of the accessibility tree so a screen reader passes over it without a word. WCAG calls this pure decoration, and it is the one case where writing nothing is the accessible answer.

The decision test is short. Remove the image and read what is left. If nothing is missing, it was decoration. If the caption, the heading, or the sentence beside it already says the same thing, it is decoration too, because hearing it twice is worse than not hearing it at all. If anything at all goes missing, the image is informational and owes the reader a real alternative, and a chart or a screenshot almost always does.

Empty is not the same as absent. alt="" is a deliberate statement that there is nothing to say; an image with no alt attribute is an image whose author has not been asked, and screen readers fall back to announcing the file name, which is how readers end up hearing “hero underscore final two dot jpg”. Both look identical on screen, which is why automated checkers flag the missing one and cannot flag a wrong one. role="presentation" and aria-hidden="true" reach the same result by other routes, and for an <img> the empty attribute is the plain way to say it. Genuinely background decoration can also stop being an image: a CSS background-image is never in the tree in the first place.

Two traps. An image inside a link, with nothing else in that link, must not be decorative: emptying its alt leaves the link with no name at all, so the alt has to describe the destination rather than the picture. And an icon beside a text label is decoration only while the label is really there. The moment the label is hidden at small sizes, the icon is the only thing left and it needs the name back.