Images have meaningful alt text

Images without meaningful alt text are invisible to search engine crawlers — Google Image Search cannot index them, and they contribute no keyword signal to the surrounding page content. This is also the most frequently failed WCAG criterion: WCAG 2.2 SC 1.1.1 (Non-text Content) requires every content image to have a text alternative that conveys equivalent information. Screen reader users hear nothing for images missing alt, or hear raw filenames like "IMG_2034.jpg" that provide no useful context. In regulated industries (healthcare, finance, education), missing alt text on content images is an ADA liability vector that has resulted in class-action settlements.

Add descriptive alt text to every content image. Write what the image shows, not what it is:

// Correct — describes the subject
<Image src="/founder.jpg" alt="Sarah Chen, founder of YourSite, speaking at DevConf 2024" />

// Correct — decorative image explicitly marked
<Image src="/divider.svg" alt="" role="presentation" />

// Wrong — generic
<Image src="/team.jpg" alt="image" />

// Wrong — filename
<Image src="/banner.png" alt="banner.png" />

For icons used as interactive controls (buttons with no visible label), set aria-label on the button instead and use alt="" on the icon itself. Grep for alt="" to find decorative-marked images and verify each is genuinely non-content.

• ID: image-alt-text

• Severity: high

• What to look for: Check <img> tags and Next.js <Image> components for alt attributes. The alt text should be descriptive (not empty, not just "image", not a file name). Decorative images may use alt="" intentionally — this is acceptable.

• Pass criteria: Count all <img> tags and <Image> components in the project. For each, classify as "content image with alt" / "decorative with alt=''" / "missing or inadequate alt." All content images (non-decorative) must have descriptive alt text of at least 4 words. Decorative images must use alt="" or role="presentation". Report the ratio: "X of Y images have adequate alt text."

• Fail criteria: Any content image has a missing alt attribute, an empty alt on a non-decorative image, or alt text that is just a file name (e.g., alt="IMG_2034.jpg") or generic (e.g., alt="image", alt="icon", alt="photo"). Do NOT pass when more than 0 content images lack descriptive alt text.

• Skip (N/A) when: The project has no images (no <img> tags or <Image> components found).

• Detail on fail: Count the images with issues and give examples. Example: "5 of 12 images lack alt text. Example: hero image in components/Hero.tsx has no alt attribute" or "3 images use filename as alt text (e.g., 'banner.png')"

• Cross-reference: For a deeper analysis of image accessibility, the Accessibility Fundamentals audit covers this in detail.

• Remediation: Alt text serves two purposes: it helps search engines understand image content, and it provides text for screen readers. For content images, write a brief description of what the image shows:

  <Image src="/team.jpg" alt="The YourSite team at our 2024 company retreat" />
  

  For purely decorative images (borders, spacers, background textures), use an empty alt: alt="".