# Images and figures use semantic markup

- **Pattern:** `ab-000074` (`accessibility-basics.forms-interactive.image-figure-markup`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000074
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000074)

## Why it matters

A product photo gallery with no `alt` text means a screen reader user hears 'image, image, image' with no product names, no descriptions, and no way to distinguish between items. A decorative divider image without `alt=""` forces the screen reader to announce the filename ('divider-wave-blue.png') — meaningless noise. WCAG 2.2 SC 1.1.1 (Non-text Content) requires text alternatives for all non-text content. SC 1.3.1 (Info and Relationships) covers semantic grouping of related images via `<figure>`/`<figcaption>`. Section 508 2018 Refresh 302.1 enforces the same. The specific failure mode for AI-generated projects: image alt attributes contain only the filename or a generic 'image of...' prefix without describing the actual visual content.

## Severity rationale

Low because missing or inadequate alt text removes image information for screen reader users but does not break surrounding navigation or interactive functionality.

## Remediation

Write alt text that conveys the same information a sighted user would gain from the image. Decorative images get `alt=""`. Related images get `<figure>` with `<figcaption>`.

```tsx
// Decorative — empty alt, screen reader skips it
<img src="/backgrounds/wave-divider.svg" alt="" role="presentation" />

// Informational — describe what the image conveys
<img
  src="/products/running-shoe-red.jpg"
  alt="Nike Air Max 270 in red and white, side view showing Air unit in heel"
/>

// Related images grouped with figure
<figure>
  <img
    src="/team/founding-team.jpg"
    alt="Three founders standing at a whiteboard covered in product diagrams"
  />
  <figcaption>
    Left to right: Sarah Chen (CEO), Marcus Rivera (CTO), Priya Patel (CPO)
  </figcaption>
</figure>

// Next.js Image component
import Image from 'next/image';

// Content image
<Image
  src="/blog/post-cover.jpg"
  alt="Bar chart showing 40% increase in conversion rate after accessibility improvements"
  width={1200}
  height={630}
/>

// Decorative
<Image src="/icons/sparkle.svg" alt="" aria-hidden={true} width={24} height={24} />
```

Avoid starting alt text with 'Image of...' or 'Photo of...' — screen readers already announce the element type. Describe what the image communicates, not what it depicts literally.

## Detection

- **ID:** `image-figure-markup`
- **Severity:** `low`
- **What to look for:** Enumerate every relevant item. Check images and graphics. Related images should be grouped with `<figure>` and explained via `<figcaption>`. Decorative images should have `alt=""` or `role="presentation"`. Content images should have descriptive alt text.
- **Pass criteria:** Groups of related images use `<figure>` with `<figcaption>`. Decorative images use `alt=""`. Content images have descriptive alt text.
- **Fail criteria:** No figure/figcaption markup used. Decorative images lack `alt=""`. Content images lack alt text or use placeholder text.
- **Skip (N/A) when:** The application has no images.
- **Detail on fail:** Identify image markup issues. Example: `"Infographic has alt='chart' but no figcaption. Gallery images lack alt text entirely."`
- **Remediation:** Use semantic image markup:

  ```tsx
  {/* Grouped images with figure */}
  <figure>
    <img src="/chart.png" alt="Q1 2024 sales by region" />
    <figcaption>Q1 2024 Sales Report — East, West, and Central regions</figcaption>
  </figure>

  {/* Decorative image */}
  <img src="/divider.png" alt="" />

  {/* Content image with descriptive alt */}
  <img src="/team.jpg" alt="The AuditBuffet team at our 2024 retreat, standing in front of company logo" />
  ```

---

## External references

- wcag 1.1.1
- wcag 1.3.1
- section-508 302.1

Taxons: accessibility

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