Figure with Caption

<div class="image-box">
  <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=400" alt="A mountain ranch">
  <p>A beautiful ranch nestled in the Swiss Alps.</p>
</div>

<!-- Gold Standard: Semantic grouping of image and description -->
<figure class="accessible-figure">
  <img
    src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=800"
    alt="Three mountain peaks covered in snow under a clear blue sky"
    loading="lazy"
  >
  <figcaption>
    <strong>Figure 1:</strong> The Eiger, Mönch, and Jungfrau peaks in the Swiss Alps.
  </figcaption>
</figure>

// Gold Standard: Semantic grouping of image and description
figure.accessible-figure
  img(
    src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=800"
    alt="Three mountain peaks covered in snow under a clear blue sky"
    loading="lazy"
  )
  figcaption
    strong Figure 1:
    |  The Eiger, Mönch, and Jungfrau peaks in the Swiss Alps.

const AccessibleFigure = ({ src, alt, caption, id }) => (
  <figure className="accessible-figure">
    <img src={src} alt={alt} loading="lazy" />
    <figcaption id={`caption-${id}`}>
      {caption}
    </figcaption>
  </figure>
);

<template>
  <figure class="accessible-figure">
    <img :src="src" :alt="alt" loading="lazy">
    <figcaption>
      <slot name="caption" />
    </figcaption>
  </figure>
</template>

<figure class="overflow-hidden rounded-lg border border-slate-200 bg-white p-2">
  <img 
    src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=800" 
    alt="Three mountain peaks covered in snow" 
    class="w-full rounded-md"
  >
  <figcaption class="mt-2 text-sm text-slate-600 italic px-1">
    The Eiger, Mönch, and Jungfrau peaks.
  </figcaption>
</figure>

The Standard

The <figure> and <figcaption> elements provide a semantic way to associate a piece of content (like an image, chart, or code snippet) with its description. This relationship is programmatically exposed to assistive technology, unlike a simple div and p combo.

WCAG Criteria

• 1.1.1 Non-text Content: Images must have text alternatives.
• 1.3.1 Info and Relationships: Information and relationships conveyed through presentation are programmatically determinable.

❌ The Bad (Inaccessible)

What’s Wrong?

1. Broken Relationship: Screen readers treat the image and the text as two unrelated elements.
2. Generic Container: Using a div provides no semantic context about the grouping.

✅ The Good (Accessibility-Ready Code)

Why This Works

1. Semantic Grouping: The <figure> element creates a logical container that groups the content and its label.
2. Implicit Labeling: Browser accessibility APIs automatically use the content of <figcaption> as the accessible name for the <figure>.
3. Structured Data: Helps search engines and assistive tools understand the hierarchy of the page.

<figure>
  <img src="https://images.unsplash.com/photo-1533154683836-84ea7a0bc310?auto=format&fit=crop&q=80&w=400" alt="Ancient stone castle on a hill">
  <figcaption>Figure 1: Warwick Castle at sunset.</figcaption>
</figure>

Technical Deep Dive

Screen Reader Announcements

• NVDA: “Figure, Three mountain peaks covered in snow under a clear blue sky, Figure 1: The Eiger, Mönch, and Jungfrau peaks in the Swiss Alps.”
• VoiceOver: “Figure 1: The Eiger, Mönch, and Jungfrau peaks in the Swiss Alps., figure”

Best Practice: Alt vs Caption

The alt text should describe the visual content for users who can’t see the image. The figcaption should provide context, credit, or a title that is useful for all users.