All images have alt text; decorative images use empty alt or role="presentation"

Screen readers—used by blind and low-vision users and required for Section 508 2018 Refresh compliance under 502.3.1—rely on alt text as the sole description of image content. A content image missing alt text renders that information completely inaccessible. A decorative image with non-empty alt text forces screen readers to read irrelevant noise. Under WCAG 2.2 SC 1.1.1 (Level A), this is a non-negotiable baseline: failing it exposes agencies and federal contractors to Section 508 enforcement actions and excludes users with disabilities from core content.

Add meaningful alt attributes to every content image and alt="" to every decorative image. Open the component containing the image and update it:

// Content image: describe what the image shows
<Image src="/team.jpg" alt="Engineering team reviewing code at workstations" />

// Decorative image: suppress from screen reader output
<Image src="/divider.png" alt="" role="presentation" />

Avoid filenames (alt="team.jpg"), generic labels (alt="image"), and redundant phrases (alt="Photo of…"). Run npx axe-core or the browser's axe DevTools extension after changes to verify zero remaining violations.

• ID: image-alt-text
• Severity: critical
• What to look for: Count all relevant instances and enumerate each. Before evaluating, extract and quote any relevant configuration or UI text found. Examine all <img> tags and Next.js <Image> components across the project. For each, check for an alt attribute. Content images should have descriptive alt text. Decorative images should use alt="" (empty string) or role="presentation".
• Pass criteria: Every content image has meaningful alt text. At least 1 implementation must be verified. Every decorative image uses alt="" or role="presentation". No images have alt text that is just a filename or generic placeholder like "image" or "picture". A partial or placeholder implementation does not count as pass. Report the count even on pass.
• Fail criteria: Any content image lacks an alt attribute, has an empty alt on a non-decorative image, or has alt text that is just a filename or generic placeholder.
• Skip (N/A) when: The project has no images (no <img> tags or <Image> components found).
• Detail on fail: Specify the count and give examples. Example: "8 of 15 images lack alt text. Hero image in /src/components/Hero.tsx has no alt attribute. Team photo in /app/about/page.tsx uses alt='photo' (too generic). Logo uses alt='logo.png' (filename instead of description)"
• Remediation: Alt text is read aloud by screen readers and displayed if an image fails to load. For content images, describe what the image shows concisely:

  <Image src="/team.jpg" alt="The engineering team reviewing code at their desks" />
  

  For decorative images (visual separators, borders, background patterns), use empty alt:

  <Image src="/divider.png" alt="" role="presentation" />