# Images have meaningful alt text

- **Pattern:** `ab-002494` (`seo-fundamentals.content-structure.image-alt-text`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002494
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002494)

## Why it matters

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.

## Severity rationale

High because missing alt text simultaneously removes image content from search indexing and creates an ADA/WCAG 1.1.1 accessibility barrier that exposes the product to legal liability.

## Remediation

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

```tsx
// 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.

## Detection

- **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:

  ```tsx
  <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=""`.

## External references

- wcag 1.1.1

Taxons: findability, accessibility

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