Images Rule

Images must have alternative text image-alt

Every img element needs an alt attribute. It holds the words a screen reader speaks instead of the picture, and the text that shows if the image fails to load. If the image is decoration, the alt should be empty (alt="") so it is skipped rather than announced as a mystery.

WCAG 2.2 A 1.1.1 Non-text Content

Websight reports this as Images must have alternative text

Who it affects

Someone who is blind and uses a screen reader hears the file name, like IMG_2041.jpg, or just the word image. A product photo, a chart or a sale banner tells them nothing.

Someone on a slow connection or a blocked image host sees a broken image icon with no clue what was meant to be there.

Someone using voice control cannot say the name of an image link, because it has no name.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

A screen reader announces something like: image, IMG_2041. The listener has no idea it is a photo of the loaf.

Fixed

Announced: image, A round sourdough loaf with a scored crust on a wooden board.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;padding:16px;margin:0}.card{display:flex;gap:14px;align-items:center}.pic{width:96px;height:72px;border-radius:8px;background:linear-gradient(135deg,#c7a27c,#8b5a2b)}</style>
<div class="card">
  <img class="pic" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72'%3E%3Crect width='96' height='72' rx='8' fill='%23b07a4a'/%3E%3C/svg%3E">
  <div><strong>Sourdough loaf</strong><br>Baked this morning</div>
</div>
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}.card{display:flex;gap:14px;align-items:center}.pic{width:96px;height:72px;border-radius:8px}</style>
<div class="card">
  <img class="pic" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72'%3E%3Crect width='96' height='72' rx='8' fill='%23b07a4a'/%3E%3C/svg%3E" alt="A round sourdough loaf with a scored crust on a wooden board">
  <div><strong>Sourdough loaf</strong><br>Baked this morning</div>
</div>

Test it by hand in two minutes

  1. Hover an image, right click and choose Inspect. Look for an alt attribute on the img element.
  2. Turn images off (in Chrome: Settings, Privacy and security, Site settings, Images) and reload. The alt text should appear where each meaningful image was, and nothing should appear where decoration was.
  3. Turn on a screen reader (VoiceOver with Cmd+F5 on a Mac, or NVDA on Windows) and arrow through the page. Each meaningful image should be announced with words that make sense; decorative images should be skipped.
  4. Read each alt value out loud with the surrounding text. If it repeats the caption or says photo of, trim it.

The fix

Before
<img src="loaf.jpg">
After
<img src="loaf.jpg" alt="A round sourdough loaf with a scored crust on a wooden board">

Describe what the image is for in this spot, not everything in it. Leave out the words image and photo, the screen reader adds those.

Decorative image

Before
<img src="swirl.png">
After
<img src="swirl.png" alt="">

An empty alt tells screen readers to skip the image. Do not leave the attribute out, and do not write alt="decorative".

Image that is the only thing inside a link

Before
<a href="/basket"><img src="basket.svg"></a>
After
<a href="/basket"><img src="basket.svg" alt="Basket"></a>

When the image is the whole link, the alt text is the link text, so say where the link goes.

Common mistakes

  • Using the file name as the alt text (alt="hero-banner-final-v2.jpg").
  • Writing alt="image" or alt="photo", which adds nothing.
  • Leaving the alt attribute out on decorative images instead of using alt="".
  • Stuffing keywords into alt text for search engines, which reads as nonsense to a person.
  • Putting the alt text in the title attribute instead; title is not reliably read out.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see that an img has no alt attribute, or an empty one on an image that is inside a link. It cannot tell whether the words in a filled-in alt are accurate or useful, so read them yourself. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Image buttons must have alternative text input-image-alt An input with type="image" is a submit button that looks like a picture, often a magnifying glass or an arrow. A SVG graphics with an image role must have alternative text svg-img-alt Inline SVG is drawn with code rather than loaded as a file, so there is no alt attribute to fill in. A Elements with role="img" must have alternative text role-img-alt Adding role="img" to a div, span or any other element tells assistive technology to treat it as a single picture. A Embedded objects must have alternative text object-alt The object element embeds another file in the page: a PDF timetable, an SVG, an audio file, sometimes a whole page.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.