Decorative or informative? When image ALT text should be empty

Well-meaning teams often try to describe every picture on a site, and end up making pages harder to use. A listener navigating with a screen reader hears "decorative swirl", "section divider", "orange dot pattern" between every paragraph, and the useful content gets buried. The skill is deciding which images carry information and which are wallpaper. This guide explains when empty ALT text is not laziness but the correct, deliberate answer, and how to tell the two cases apart quickly.

Informative, decorative, functional: three buckets

Every image on a page falls into one of three groups, and the group decides the treatment.

• Informative: it tells the reader something they would otherwise miss. A product photo, a chart, a floor plan, an offer banner. These get a description.
• Functional: it does something. A logo linking home, a search icon button, a thumbnail linking to a product. These get an accessible name describing the action or destination.
• Decorative: it adds mood or spacing but no information. A background texture, a divider, a stock photo of a smiling team beside text that already explains everything. These get an empty alt attribute.

An empty attribute is written as alt="". It is a positive instruction: the author considered this image and decided it need not be announced. Assistive technology then skips it entirely.

Why a missing attribute is not the same as an empty one

This distinction causes most of the confusion. If the alt attribute is absent altogether, screen readers cannot know whether the image matters, so many of them fall back to reading the file name. A listener hears "IMG underscore 2043 dot jay peg" and has to work out whether they missed something.

With alt="", the image is passed over silently and the reading flows on. Same visual result on screen, very different experience through audio. Automated checkers such as Lighthouse and axe DevTools flag missing attributes for this reason, and they will not flag a properly empty one.

Three questions that settle most cases

1. If I removed this image entirely, would the page lose any information? If nothing is lost, it is decorative.
2. Is the information already in the text beside it? If yes, describing the image repeats it.
3. Does the image do something when clicked? If yes, it is functional, and the name must describe where the click leads.

When you are genuinely unsure, look at why the image was chosen. A photo added to "break up the text" is decorative. A photo added because it shows the finish of a product is informative.

The duplicate-announcement problem

A common failure is not silence but repetition. A team photo sits above a caption reading "Our service team at the Coimbatore branch", and the alt text says the same thing. The listener hears the sentence twice in a row and wonders whether there are two images.

Rules that avoid this:

• If a visible caption fully describes the image, use an empty alt attribute.
• If the caption adds context but the image also carries detail, let the alt cover the detail and the caption cover the context, without overlapping.
• If a heading directly above the image says what it is, do not repeat the heading.
• Where the same logo appears in the header and the footer, describe it once and leave the other empty if both link to the same place.

Icons: label once, not twice

Icons are where teams most often over-describe. The rule is that the information must exist exactly once in the accessible output.

Consider a button showing a WhatsApp icon with the visible words "Chat with us". The words are already announced, so the icon should be silent. If the same button shows only the icon, it needs an accessible name such as "Chat with us on WhatsApp", because otherwise the listener hears "button" and nothing more.

Other common examples on a business site:

• A phone icon beside a written phone number: empty alt.
• A star rating shown as five graphics: describe the rating once, for example "Rated 4 out of 5", and leave the individual stars silent.
• Payment method logos in the footer: if the text lists accepted methods, leave them empty; if not, name each one.
• Arrow icons inside "Next" and "Previous" buttons: empty, since the words carry the meaning.
• A bullet-style tick graphic in a features list: empty, since the list item text is the content.

What about spacer and background images?

Spacer graphics, decorative corners and pattern strips should all be empty. Better still, move purely visual imagery into CSS as a background, which keeps it out of the content layer altogether. Backgrounds that carry meaning, such as a poster image with wording on it, should not be handled this way, because then the information becomes invisible to assistive technology.

A ten-minute audit for one page

Open a page and work through its images in order:

1. List each image and put it in one of the three buckets.
2. For every decorative one, confirm the markup has alt="" rather than no attribute at all.
3. For every functional one, check the name describes the action, not the artwork.
4. Read the page aloud as a screen reader would, including each announcement, and listen for anything said twice.
5. Run an automated check to catch images your list missed, especially ones inserted by plugins or sliders.

Pay special attention to sliders, galleries and page builders, which often generate images your content team never sees in the editor.

Getting the decision made at upload time

The cheapest place to fix this is the moment an image is added. Give your editors one line of guidance: if the picture is there to look nice, leave the description blank on purpose; if it tells the reader something, write one sentence about that something.

Fold the check into your publishing routine so it never becomes a separate project. If you would rather have someone go through an existing site and sort the backlog, our team handles accessibility passes alongside website development work.

Frequently asked questions

Will empty ALT text hurt my search rankings?

No. Search engines expect decorative images to have empty descriptions, and stuffing text into every image has never been a ranking advantage. Accurate descriptions on meaningful images are what count.

Can I use a space instead of leaving the attribute blank?

Avoid it. A space is a character, and some software announces it or treats the image as unlabelled. Use two quotation marks with nothing between them.

How should I handle a background photo behind a headline?

If it is atmosphere only, a CSS background is ideal and needs no description. If words are baked into the picture, add them as real text on the page instead.

Are these decisions required by law in India?

Government and public-sector sites in India follow their own accessibility guidelines, and many private organisations adopt WCAG voluntarily or through client contracts. Confirm what applies to your organisation with a qualified professional.