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

- **Pattern:** `ab-001590` (`gov-section-508.wcag-core.image-alt-text`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001590
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001590)

## Why it matters

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.

## Severity rationale

Critical because WCAG 2.2 SC 1.1.1 is a Level A requirement—the floor of accessibility—and its absence completely blocks screen reader users from image-conveyed information.

## Remediation

Add meaningful `alt` attributes to every content image and `alt=""` to every decorative image. Open the component containing the image and update it:
```tsx
// 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.

## Detection

- **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:
  ```tsx
  <Image src="/team.jpg" alt="The engineering team reviewing code at their desks" />
  ```
  For decorative images (visual separators, borders, background patterns), use empty alt:
  ```tsx
  <Image src="/divider.png" alt="" role="presentation" />
  ```

## External references

- wcag 1.1.1
- section-508 502.3.1

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-001590