Skip to main content

Missing alternative text on images

Images without text alternatives are invisible to many assistive technologies unless they are purely decorative.

See this on your site

Step-by-step fixes by platform

Programmatic guides combine the issue explanation with stack-specific notes and examples where we have them.

What this issue is

Alternative text (`alt`) describes the purpose of an image in words. When `alt` is missing on meaningful images, screen readers may skip the image entirely, read the file name, or provide unhelpful noise.

Decorative images should use `alt=""` so assistive tech knows to ignore them.

Why it matters

People who cannot see the image rely on the description to understand charts, product photos, buttons styled as images, and instructional graphics.

Common causes

CMS users insert images without filling the alt field. Developers use `<img>` without `alt`. Icons that act as buttons omit `aria-label`.

Better implementation

Use concise, accurate descriptions: `<img src="chart.png" alt="Sales increased 12% year over year">`. For decorative flourishes: `<img src="divider.svg" alt="">`.

Examples

  • Bad: `<img src="hero.jpg">` with no alt on a promotional banner.
  • Good: `<img src="chart.png" alt="Q3 revenue up 9% year over year">`.
  • Decorative: `<img src="swirl.svg" alt="">` so assistive tech skips it.

How to fix

Add concise alt that matches the image purpose, not the file name. For SVG icons that act as buttons, pair with visible text or aria-label.

In CMS media libraries, require alt before publish for non-decorative images.

Platform notes

WordPress
Set alt in the media modal; avoid “decorative” images in hero blocks without empty alt.
Shopify
Check theme sections for product cards; metafields may drive alt for variants.
React / Next.js
Use next/image with alt; empty string only when truly decorative.

Related: 1.1.1 Non-text Content.

FAQ

Does every image need visible caption?
No. Alt is often invisible; captions are for everyone when context helps.
SVGs?
Use `<title>`/`<desc>` or `aria-label` on decorative vs informative SVGs as appropriate.

Related guides