How to fix images missing alt on Remix

Steps for Remix

1. Locate every `<img>` tag and Remix/React component that renders images across your routes and components (e.g. `app/routes/`, `app/components/`). Run a project-wide search for `<img` and for any image component (e.g. Shopify Hydrogen's `<Image>`) to build a complete inventory.
2. For each `<img>` tag, add a meaningful `alt` attribute that describes the image content — e.g. `<img src={product.featuredImage.url} alt={product.featuredImage.altText || product.title} />`. Never leave `alt` undefined or empty unless the image is purely decorative (in which case use `alt=""`).
3. For Shopify Hydrogen/Remix storefronts using the `<Image>` component from `@shopify/hydrogen`, pass the `alt` prop explicitly: `<Image data={image} alt={image.altText ?? product.title} />`. The `data` prop alone does not guarantee a non-empty alt if the Storefront API returns a null `altText`.
4. Update your GraphQL fragments (e.g. in `app/lib/fragments.ts` or inline in loaders) to always request the `altText` field alongside `url` and `width`/`height` for every image connection — product images, collection images, metafield images, and content/blog images.
5. Add a fallback guard in your loader or component so that if `altText` is null/empty, a descriptive string (product title, collection name, or article title) is used instead: `const resolvedAlt = image.altText?.trim() || product.title;`.
6. Run `grep -r 'alt=""' app/` and `grep -r "alt={''" app/` to catch any remaining empty alt attributes that are not intentionally decorative, then review and populate them. Commit the changes and verify rendered HTML with browser DevTools to confirm every `<img>` in the DOM has a non-empty `alt` attribute.

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.