How to fix images missing alt on Next.js

Steps for Next.js

1. Replace every bare <img> tag in your Next.js project with Next.js's built-in <Image> component (from 'next/image'). The `alt` prop is required by the component's TypeScript types, so the compiler will surface any missing values at build time.
2. For product images, pull `alt` text from your commerce API response — prefer a dedicated `altText` field, then fall back to the product/variant `name`, then a generic but descriptive string (e.g. `'Photo of {productName}'`). Never leave `alt` as an empty string unless the image is purely decorative.
3. For decorative images that carry no informational value (e.g. background flourishes), explicitly pass `alt=""` AND `role="presentation"` so screen readers skip them intentionally — do NOT omit the prop.
4. Create a shared `<ProductImage>` wrapper component (e.g. `components/ui/ProductImage.tsx`) that encapsulates the `alt` derivation logic and the `<Image>` component so the pattern is consistent across PDP, PLP, cart, and search pages.
5. Add an ESLint rule (`jsx-a11y/alt-text`) via `eslint-plugin-jsx-a11y` to enforce alt text at lint time and prevent regressions in CI.
6. Run `next build` to catch TypeScript and lint errors, then audit with Lighthouse or axe DevTools to confirm zero missing-alt violations before deploying.

What is images missing alt?

Every `<img>` tag in HTML has an `alt` attribute — a short written description of what the image shows. When an image is missing its alt text (the `alt` attribute is absent or empty), search engines like Google cannot "see" what the image depicts, and screen-reader software used by visually impaired shoppers reads nothing aloud. Writing good alt text means filling in that attribute with a clear, specific description: for a product photo you might write `alt="Red leather crossbody bag with gold buckle clasp"`.

Google explicitly uses alt text to understand images and rank them in Google Images — a significant free-traffic channel for ecommerce stores. Missing alt text means your product photos are invisible to Google's crawler and cannot appear in image search results, cutting off a stream of high-intent shoppers. On the conversion side, assistive-technology users (screen readers) rely on alt text to understand your product imagery; missing it creates a poor shopping experience and in many jurisdictions exposes you to accessibility-law liability (ADA in the US, EN 301 549 in the EU, AODA in Canada). Even a handful of untagged images on key product or landing pages is enough to suppress rankings and fail an accessibility audit.

See the complete Images missing alt guide for every platform and the full background.