Images have alt text

Screen readers announce an image with no alt attribute by reading the filename or the word "graphic" — a photo of your CEO becomes "IMG_4782.jpg" and a chart becomes "unlabeled graphic." Users relying on assistive tech lose the information the image was carrying, which on transactional pages (product photos, verification checks, captcha alternatives) blocks task completion entirely. AI coding tools are particularly prone to this failure because next/image and <img> render without alt (it is an optional prop, not a required one), and generated React components routinely ship with the attribute absent. This check also catches the opposite failure: a codebase where every image carries alt="", meaning the model defaulted everything to decorative rather than writing real descriptions. Missing alt text is a documented WCAG 2.2 Level A failure (SC 1.1.1) and the single most common complaint captured in accessibility support tickets.

Add alt to every <img> / <Image>. For decorative images, use alt="". For content images, describe the content concisely:

<Image src="/team/jane.jpg" alt="Jane Smith, CTO" width={120} height={120} />

Deeper remediation guidance and cross-reference coverage for this check lives in the accessibility-fundamentals Pro audit — run that after applying this fix for a more exhaustive pass on the same topic.

• ID: project-snapshot.accessibility.images-have-alt-text
• Severity: high
• What to look for: Enumerate every <img> JSX element and every <Image> from next/image. For each, check whether the alt prop is present. Count with-alt, with-empty-alt-string (decorative — fine), missing-alt. Also check raw HTML in static files or dangerouslySetInnerHTML blocks.
• Pass criteria: At least 95% of <img>/<Image> elements have alt attributes (any value, including "" for decorative).
• Fail criteria: More than 5% of image elements are missing the alt attribute entirely.
• Skip (N/A) when: Project has no JSX/HTML images detected (purely API / CLI / library). Quote the count: "0 image elements found across N source files."
• Do NOT pass when: All images use alt="" — that means everything is being declared decorative, which is almost never accurate. At least some images should have descriptive alt text.
• Report even on pass: "Found N images: P with alt text, Q with empty alt (decorative), R missing alt. Coverage: (P+Q)/N = X%."
• Detail on fail: "12 of 80 image elements missing alt attribute (15% — should be under 5%); examples: app/page.tsx:34, components/hero.tsx:12, ...".
• Cross-reference: For full accessibility coverage (keyboard nav, ARIA, contrast, focus management), run the accessibility-fundamentals then accessibility-wcag audits.
• Remediation: Add alt to every <img> / <Image>. For decorative images, use alt="". For content images, describe the content concisely:

  <Image src="/team/jane.jpg" alt="Jane Smith, CTO" width={120} height={120} />