React fix guide
Fix Missing alternative text on images on React
Images without text alternatives are invisible to many assistive technologies unless they are purely decorative.
Check your live page
Canonical issue page: Missing alternative text on images →
What this issue means
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="">`.
How to fix on React
Use next/image with alt; empty string only when truly decorative.
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.
Code example
<img src={heroUrl} alt="Team celebrating Q3 results" />Related: 1.1.1 Non-text Content.
Other platforms
Related guides
TestAccessibility · Programmatic fix page · localhost:3001