More description isn't always better

A widespread misconception: that accessibility means describing every single image without exception. In fact, too much description can disturb just as much as too little. Imagine a screen reader announcing a description for every decorative dot, every divider, and every ornamental icon — that would be tiring noise that distracts from what matters. For decorative images, empty alt text is therefore not just allowed but correct.

The one question that decides everything

To know whether an image is decorative or content-bearing, there's a single test question: would information be lost if this image were gone?

  • No → decorative → alt=""
  • Yes → content → descriptive alt text (see Writing alt text)

Typical decorative images:

  • Dividers and ornamental flourishes
  • Background patterns and textures
  • an icon next to an already-labeled link (“🏠 Home” — the house icon is redundant)
  • mood images that provide pure atmosphere with no statement of their own

alt="" is not the same as no alt

A subtle but important difference:

  • alt="" (empty but present): explicitly tells the screen reader “skip this”. Correct for decoration.
  • no alt attribute (left out entirely): some screen readers then read the file name — “D-S-C-underscore-4-8-2-1-dot-J-P-G”. An annoyance.

So the rule is: every image gets an alt attribute — either descriptive (content) or empty (decorative). Never leave it out entirely.

The special case: icon plus text

A common stumbling block is buttons and links with an icon and text. If the text “Download” is already there, the download-arrow icon beside it needs no alt text — it's redundant, so alt="". But if the icon stands alone (a magnifier button with no word), it carries the meaningand needs a description like “Search”. Rule of thumb: icon with visible text = empty; icon alone = describe.

Where CSS backgrounds fit in

CSS background images (background-image) technically have no alt text at all and count as decorative — the screen reader ignores them. That's usually intended, but it becomes a trap when you put a content-important image into the CSS background: then it's invisible to screen readers and image search. Hence the clean split: content belongs in an img element with alt text, pure decoration in the CSS background.

In short

  • Ask: is information lost without it? No → decorative.
  • Decorative = alt="", never a missing alt.
  • Icon + text = empty; icon alone = describe.
  • Content in img, decoration in CSS background.