Rampsight

All rules

Text alternatives

Images need alternative text

Why it matters

With no alt attribute, a screen reader falls back to the file name: "hero-2024-final-v3.jpg". Whatever the image was communicating is lost.

How to fix it

  1. Describe what the image conveys in this context, not what it depicts in general.
  2. Give decorative images alt="" so they are skipped instead of announced.
  3. When the image is inside a link, the alt text must say where the link goes.
  4. Do not start with "Image of" — the role is already announced.

In markup

Fails
<img src="team.jpg">
Passes
<img src="team.jpg" alt="The support team in the Berlin office">
<img src="divider.svg" alt="">

What the check cannot tell you

The check sees whether alt exists, not whether it is useful. "image1", "photo" and a repeated file name all pass and all fail the reader.

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on image-alt (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.