How to fix images missing alt on Gatsby

Steps for Gatsby

1. Audit every `<img>` tag and every `<GatsbyImage>` / `<StaticImage>` component in your `src/` directory (pages, templates, components) for a missing or empty `alt` attribute. Run: `grep -rn 'alt=""\|alt={""\| <img ' src/` to surface offenders quickly.
2. For `<StaticImage>` (build-time images in `src/components` or `src/pages`): add a meaningful `alt` prop describing the image content, e.g. `alt="Navy blue running shoes on a white background"`. Never leave it blank unless the image is purely decorative — in that case use `alt=""` intentionally AND add `role="presentation"`.
3. For `<GatsbyImage>` (runtime/CMS-sourced images): pass the alt text through your GraphQL query result. Add an `altText` (or equivalent) field to every GraphQL query that fetches image data (product images, blog hero images, etc.) and wire it to the `alt` prop.
4. For plain `<img>` tags (third-party embeds, SVG sprites, etc.): ensure every tag has a non-empty `alt` prop. Add the `jsx-a11y/alt-text` ESLint rule (`eslint-plugin-jsx-a11y` is included with `gatsby-plugin-eslint`) to catch regressions automatically at dev/build time.
5. Run `gatsby build` and inspect the build output for any ESLint `alt-text` warnings, then verify rendered HTML with browser DevTools or an accessibility checker (e.g. Lighthouse) to confirm every `<img>` in the final HTML has a descriptive `alt` attribute.
6. For product image grids driven by a CMS or commerce API, ensure the data-fetching layer (GraphQL fragment or REST call) always requests and forwards `altText` / `alt` fields so alt text is never hardcoded and always reflects the actual image content.

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.