How to fix images missing alt on Next.js (Headless)

Steps for Next.js (Headless)

1. Replace every bare <img> tag with Next.js's next/image <Image> component, which enforces the `alt` prop at the TypeScript/ESLint level.
2. For product images, derive alt text from your commerce API data — prefer a dedicated `altText` field, then fall back to the product `title` plus a variant descriptor (e.g. `${product.title} – ${variant.color}`). Never leave alt empty unless the image is purely decorative.
3. For decorative/background images that convey no information (e.g. a spacer or icon that has adjacent visible text), pass `alt=""` explicitly so screen readers skip them — do NOT omit the prop entirely.
4. Create a shared utility `getImageAlt(image, fallback)` (see snippet) so alt-text logic is centralised and consistent across PDP, PLP, Cart, and CMS content components.
5. Enable the `@next/next/no-img-element` ESLint rule (it ships with `eslint-config-next`) to surface any remaining raw <img> usages across the codebase.
6. Add an integration check in CI (or a Playwright/Cypress test) that queries `document.querySelectorAll('img:not([alt])')` and fails if the list is non-empty.

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.