How to fix image alt on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Add an alt attribute to every <img> tag in your HTML/JSX/template code. Meaningful images get a descriptive string; decorative images get alt="".
2. In React/JSX: <img src={product.imageUrl} alt={product.imageAlt || product.name} />
3. Enforce this at the component level by making alt a required prop and using PropTypes or TypeScript to catch missing values at build time.
4. For images fetched from a headless CMS or PIM, ensure the API response includes an alt text field and that your frontend always renders it — never hard-code empty or omit the attribute.
5. Add an ESLint rule (eslint-plugin-jsx-a11y: 'jsx-a11y/alt-text': 'error') to your CI pipeline so missing alt text causes a build failure.

What is image alt?

Every `<img>` element on a web page should carry an `alt` attribute that describes what the image shows or does. This text is read aloud by screen readers for visitors who are blind or have low vision, and it appears in place of the image when it fails to load. Meaningful images (products, banners, infographics) need a short, accurate description. Purely decorative images (background shapes, dividers, icons used only for visual flair) should have an empty `alt=""` or `role="presentation"` so screen readers skip them entirely. WCAG Success Criterion 1.1.1 "Non-text Content" requires this for all conformance levels (A, AA, AAA).

Missing alt text directly harms your store in three ways. First, it excludes customers who rely on screen readers — they cannot understand what your products look like, which damages conversions and exposes you to legal risk under accessibility laws (ADA Title III in the US, EAA in Europe, AODA in Canada). Second, search engines like Google read alt text to understand and index your images; missing alt text means your product and category images are invisible to image search, costing you free organic traffic. Third, automated accessibility audits flag missing alt text as a critical failure, and regulators, plaintiff attorneys, and audit tools surface it prominently — making it one of the highest-priority issues to address on any ecommerce site.

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