Understand the idea

An image needs a working source and an alternative appropriate to its purpose. The same photograph may need different alternative text in different contexts.

Use alt to communicate information that the image contributes. A purely decorative image can use alt="" so assistive technology can skip it. Explicit width and height help the browser reserve the right proportions before the image loads. CSS can still make the image responsive.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

HTML · EXAMPLE
<figure>
  <img src="/assets/river.jpg"
       alt="A footbridge reflected in the River Gera"
       width="1200" height="800">
  <figcaption>An evening walk in Erfurt.</figcaption>
</figure>

A small mistake, explained

What goes wrong

Omitting alt is different from providing an empty alt. A filename may be announced when no useful alternative is available.

How to fix it. Decide what a reader needs to know, then write that information. Keep decorative images empty and give linked images an accessible name that explains the link's purpose.

Try it yourself

The example needs your own river.jpg file. Replace the filename and dimensions with a real image, then temporarily break the path to check the fallback text.

Further reading

W3C WAI — images tutorial

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.