Next.js fix guide

Fix Missing alternative text on images on Next.js

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

This page ties the generic issue to how it usually shows up in Next.js markup and tooling, then walks you through a fix and verification loop.

Verify on a live URL

Scan, fix, deploy, then rescan the same address to compare reports.

Main issue guide: Missing alternative text on images →

Where this comes from on Next.js

`next/image` requires `alt`; empty string only when truly decorative—verify each usage.

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 Next.js

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 snippet

import Image from 'next/image';

<Image src="/hero.jpg" alt="Pastries on the counter" width={800} height={600} />

Common mistakes on Next.js

Remote patterns omitting alt on `next/image`.
Assuming dev overlay errors match production a11y tree.
Ignoring dynamic imports that shift structure.

How to verify the fix

Test the production build (focus and hydration differ from dev).
Verify both mobile and desktop layouts if they diverge.
Rerun the scan; compare rule counts on the same path.

Related: 1.1.1 Non-text Content.

Same issue on other platforms

Guides

Next steps

Run a scan on staging or production.
Re-read the main issue page for context and WCAG notes.
React and Next.js accessibility hub for more platform resources.

TestAccessibility · Next.js fix · localhost:3001