# All non-text content has text alternatives

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

## Why it matters

Missing or meaningless alt text on images is a hard blocker for screen reader users — assistive technology reads the filename, URL, or nothing at all instead of the image's meaning. WCAG 2.2 SC 1.1.1 (Non-text Content) is a Level A requirement: failure makes a site legally non-conformant under Section 508 and the EU Web Accessibility Directive. Beyond compliance, poor alt text degrades SEO, since search crawlers rely on the same attribute to index images.

## Severity rationale

Critical because missing alt text creates a complete information blackout for blind and low-vision users who rely on screen readers, violating the foundational WCAG 2.2 SC 1.1.1 Level A requirement with no workaround.

## Remediation

Add descriptive alt text to every content image; use empty alt for decorative ones so screen readers skip them cleanly. In Next.js Image components:

```tsx
// Content image — describe what it shows
<Image src="/hero.jpg" alt="Developer typing at a standing desk in a bright office" />

// Decorative image — suppress announcement
<Image src="/divider.svg" alt="" role="presentation" />
```

For charts and graphs, add a sibling text summary or table and link it with `aria-describedby`. Check every `<img>` in your codebase for missing or placeholder alt values like `"image"`, `"photo"`, or the filename.

## Detection

- **ID:** `alt-text`
- **Severity:** `critical`
- **What to look for:** Enumerate every relevant item. Examine all images, icons, charts, and embedded media. Check for `alt` attributes on `<img>` tags, `alt` props on `<Image>` components, and equivalent text or accessible descriptions for decorative images.
- **Pass criteria:** At least 1 of the following conditions is met. All functional/content images have descriptive `alt` text. Decorative images use `alt=""` or `role="presentation"`. Charts and data visualizations have a text alternative (caption, table, or aria-describedby). Before evaluating, extract and quote the relevant configuration or code patterns found. Report the count of items checked even on pass.
- **Fail criteria:** Any functional image lacks an `alt` attribute, or uses placeholder text like "image" or "photo". Decorative images use generic alt text instead of empty alt.
- **Do NOT pass when:** The item exists only as a placeholder, stub, or TODO comment — partial implementation does not count as passing.
- **Skip (N/A) when:** Never — this check applies to all web projects.
- **Cross-reference:** For related security patterns, the Security Headers audit covers server-side hardening.
- **Detail on fail:** Name the specific images with issues. Example: `"Hero image in Hero.tsx missing alt attribute; 4 product images use generic 'product' alt text instead of descriptive names"`
- **Remediation:** Alt text serves both accessibility and SEO. For content images, write a brief description:

  ```tsx
  <Image src="/team.jpg" alt="The engineering team at headquarters in 2024" />
  ```

  For decorative images, use empty alt:

  ```tsx
  <Image src="/bg-pattern.png" alt="" role="presentation" />
  ```

  For charts and graphs, provide a text summary or data table with aria-describedby.

## External references

- wcag 1.1.1
- section-508 502.3.1

Taxons: accessibility

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