Images and figures use semantic markup

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.

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>.

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

• ID: accessibility-basics.forms-interactive.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:

  {/* 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" />