Decorative image

An image that adds nothing beyond looks, marked empty on purpose so screen readers skip it instead of reading out the file name.

images that shouldn't be announcedignore this pictureempty alt textnull altblank alt taghide the image from screen readerspresentational imagedecorative alt

See it

Live demo coming soon

What it is

A decorative image carries no information the surrounding text does not already give you: a divider squiggle, a background flourish, a stock photo above a headline that says the same thing, an icon sitting next to its own label. You mark it with an empty alt attribute (alt=''), which removes it from the accessibility tree so a screen reader glides straight past it.

Empty is not the same as missing. An alt='' means 'skip this on purpose'. Omitting alt entirely means 'nobody decided', and many screen readers then read out the file name, which is how users end up hearing 'hero-final-v3-compressed dot jpg'. The other tools for the same job are role='presentation' and aria-hidden='true', and pure CSS backgrounds, which are invisible to assistive tech by default.

Gotcha: decorative is about function, not content. The same portrait is decorative next to a caption that names the person and informative when it stands alone. And never hide an image that is the only content of a link or button: you get a control with no accessible name, announced as just 'link', which is worse than a bad alt string. W3C's alt decision tree settles most arguments in under a minute.

Ask AI for it

Audit every image in this markup and split them into informative and decorative. For decorative ones (dividers, background flourishes, icons that sit beside their own visible text label, photos that only repeat the adjacent heading), set alt='' explicitly (never omit the alt attribute) and add aria-hidden='true' to decorative inline SVGs and icon fonts. Move purely ornamental artwork to a CSS background where it makes sense. Leave real alt text on anything that conveys information, and never hide an image that is the only content inside a link or button unless that control gets an accessible name another way.

You might have meant

alt textaria hiddenaccessibility treescreen readeraccessible name

Go deeper