Image Alt Text: When to Use It and When Not To

One of the most common accessibility tips is simple: add alt text to images.

That advice is correct, but it is also incomplete.

Not every image needs a written description.

Sometimes the correct alt text is a short useful sentence. Sometimes it should describe what a button does. And sometimes the correct value is simply:

alt=""

The important part is understanding why the image is on the page.

What alt text is for

Alt text gives a text alternative to an image.

A basic example:

<img
  src="flamingo.webp"
  alt="A flamingo standing in shallow water"
>

A screen reader can use that text instead of the image.

Alt text can also be shown in some cases when an image cannot load.

The W3C image accessibility guide recommends choosing alt text based on the purpose of the image, not just describing every visible detail.

Ask what the image adds

Before writing alt text, ask:

If the image disappeared, what useful information would be missing?

That question usually points you in the right direction.

Imagine an article about flamingos.

If the photo shows a flamingo and the image itself is part of the story, a description may be useful:

<img
  src="flamingo.webp"
  alt="Greater flamingo standing on one leg beside the water"
>

But if the exact same information is already written next to the image and the photo is only there to make the page look nicer, it may be decorative.

Informative images

An informative image adds useful information.

The W3C guidance for informative images says the alternative should communicate the meaning of the image rather than trying to list every visual detail.

For example:

<img
  src="map.webp"
  alt="Walking route from the station to the museum"
>

That is better than:

alt="Image with blue lines, green areas, roads, text and icons"

The first version explains why the image matters.

Keep it short when possible

Good alt text is usually short.

You do not need to start with:

Image of...
Photo of...
Picture showing...

Screen readers already know it is an image.

Instead of:

alt="Photo of a black dog running through a field"

you can usually write:

alt="Black dog running through a field"

There are exceptions. If the fact that something is a photograph, painting, screenshot, or diagram matters to the context, mentioning it may be useful.

Decorative images

Some images do not add information.

Examples include:

For those images, use an empty alt value:

<img
  src="decorative-line.svg"
  alt=""
>

The W3C decorative image guidance recommends an empty alt value so screen readers can ignore the image.

Do not simply remove the alt attribute.

This:

<img src="decorative-line.svg">

is not the same thing.

Some screen readers may announce the file name when alt is missing.

Empty alt is still alt text

This is worth repeating because it looks strange at first.

alt=""

does not mean you forgot to write alt text.

It means you are telling assistive technology that this image does not add useful information.

That is an intentional choice.

When an image is the only thing inside a link, the alt text should usually describe where the link goes.

Imagine a logo that links to the homepage:

<a href="/">
  <img
    src="logo.svg"
    alt="Ronalds Vilciņš homepage"
  >
</a>

The important thing is the action, not a visual description such as:

alt="Black R letter with rounded corners"

For functional images, the W3C recommends describing the function or destination.

Images inside buttons

The same rule applies to buttons.

<button type="submit">
  <img
    src="search.svg"
    alt="Search"
  >
</button>

The useful information is what happens when the button is pressed.

Not:

alt="Magnifying glass"

If the button already has visible text, the image may be decorative:

<button type="submit">
  <img src="search.svg" alt="">
  Search
</button>

Now the text “Search” already explains the action.

Do not repeat nearby text

Imagine a card:

<article>
  <img
    src="sony-a7.webp"
    alt="Sony Alpha a7 V"
  >

  <h2>Sony Alpha a7 V</h2>
</article>

Depending on the context, the alt text may just repeat what the heading already says.

You might instead use:

<img
  src="sony-a7.webp"
  alt=""
>

if the image does not add anything beyond the nearby title.

Repeating the same words can make screen reader output noisy.

Product images are different

For a shop, the exact image may matter.

For example:

<img
  src="shoe-blue-side.webp"
  alt="Blue running shoe shown from the side"
>

If the site has several views:

<img
  src="shoe-blue-top.webp"
  alt="Blue running shoe viewed from above"
>

The alt text helps the user understand what each image shows.

Context decides what is useful.

What about photography portfolios?

This is an interesting case because the image itself is the main content.

For a portfolio image, I would usually describe the main subject and scene without trying to turn the description into a full essay.

For example:

<img
  src="riga-zoo-flamingo.webp"
  alt="Pink flamingo standing in shallow water at Riga Zoo"
>

Or:

<img
  src="peacock.webp"
  alt="Peacock facing the camera with its tail feathers open"
>

If the photograph is artistic and the mood is important, the alt text can include that too, but keep it useful.

Charts need more than short alt text

A chart may contain too much information for one short alt attribute.

For example:

<img
  src="traffic-chart.webp"
  alt="Website traffic increased from January to June"
>

That can give the main point.

But if users need the actual values, include them as text or a table near the image.

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Visits</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>12,400</td>
    </tr>

    <tr>
      <td>June</td>
      <td>24,800</td>
    </tr>
  </tbody>
</table>

A long data set should not be squeezed into one huge alt value.

Screenshots

For screenshots, describe what matters in the current article.

If the screenshot is used to show where a setting is:

<img
  src="settings.webp"
  alt="PageSpeed settings panel with Mobile selected"
>

You do not need to describe every button visible in the screenshot if it is not important.

Images of text

Try to use real text instead of putting important text inside images.

If an image contains text that is not available elsewhere, the alt text should include the important wording.

For example:

<img
  src="sale-banner.webp"
  alt="Summer sale: 25% off until August 31"
>

But if the same sentence is already written next to the image, the image may be decorative.

File names are not alt text

This is bad:

alt="IMG_4829"

So is:

alt="flamingo-final-v2-edited.webp"

Alt text is for people, not for describing how the file is stored.

Do not stuff keywords into alt text

Alt text is sometimes discussed as an SEO feature, which leads to things like:

alt="best Riga photographer professional photography Riga Latvia photographer"

That is not useful.

Write alt text for the image and the page it is on.

If a natural description includes an important subject, that is fine:

alt="Flamingo standing in shallow water at Riga Zoo"

You do not need to force extra keywords into it.

A simple decision process

The W3C has a useful alt text decision tree.

My shorter version is:

Does the image add useful information?
│
├─ Yes
│  ↓
│  Describe the useful information.
│
└─ No
   ↓
   Is it the only content in a link or button?
   │
   ├─ Yes → Describe the action or destination.
   │
   └─ No  → Use alt=""

That covers a large number of normal website images.

Examples

Informative photo

<img
  src="flamingo.webp"
  alt="Flamingo standing in shallow water"
>

Decorative photo

<img
  src="office-background.webp"
  alt=""
>

<a href="/">
  <img
    src="logo.svg"
    alt="Ronalds Vilciņš homepage"
  >
</a>

Icon next to visible text

<button>
  <img src="download.svg" alt="">
  Download
</button>

Icon-only button

<button>
  <img
    src="download.svg"
    alt="Download file"
  >
</button>

The best alt text depends on the page

There is no perfect description for an image without knowing where the image is used.

The same photo could need different alt text on two different pages.

On a travel article:

alt="View of Riga Old Town from St. Peter's Church tower"

On an article about camera lenses:

alt="Riga skyline photographed at 70mm"

Same image, different purpose.

That is why automatic alt text can be useful as a starting point, but it should not always be trusted without context.

Keep the purpose in mind

Writing good alt text is less about describing everything you see and more about understanding why the image exists.

Sometimes a short description is right.

Sometimes the important thing is the action of a button.

And sometimes the most accessible choice is:

alt=""

The goal is not to make every image speak.

The goal is to make sure users do not lose important information when they cannot see it.