Figure Figcaption

title: "Figure and Figcaption — Semantic Image Grouping for Accessibility" description: "Learn how to use figure and figcaption to semantically group images with their captions, improving structure for screen readers and search engines." weight: 6 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

The figure and figcaption elements semantically group an image with its caption, creating a single navigable unit in the accessibility tree.

## What You'll Learn

How to use figure and figcaption to group images, diagrams, and code blocks with descriptions.

## Why It Matters

Screen readers can navigate by figure elements. Grouping an image and caption ensures users hear the caption whenever they encounter the image.

## Real-World Use

A tutorial page shows a screenshot with a caption explaining the feature. The screen reader user navigates to the figure and hears "Figure: Dashboard overview showing sales metrics for Q2."

## Figure and Figcaption

```html
<figure>
  <img src="dashboard.png"
       alt="Screenshot of the analytics dashboard showing revenue chart">
  <figcaption>Figure 1: Analytics dashboard showing Q2 2026 revenue trends</figcaption>
</figure>

Multiple Images in One Figure

<figure>
  <img src="before.jpg" alt="Website before redesign">
  <img src="after.jpg" alt="Website after redesign">
  <figcaption>Before and after comparison of the homepage redesign</figcaption>
</figure>

Code Blocks in Figure

<figure>
  <pre>
    <code>
      function greet(name) {
        return `Hello, ${name}!`;
      }
    </code>
  </pre>
  <figcaption>Example 1: Basic greeting function in JavaScript</figcaption>
</figure>

Common Mistakes

1. Figcaption missing

A figure without a figcaption misses the opportunity to provide context.

2. Figcaption before the image

figcaption should be the last child of figure or the first. Both are valid.

3. Alt text and figcaption are identical

The caption can be more descriptive. The alt text should be concise.

4. Using figure for decorative images

Only use figure for meaningful content groupings, not decorative images.

5. Nested figures

Do not nest figure elements. Each figure is a self-contained unit.

Practice Questions

1. What does the figcaption element provide? A visible caption or legend for the content inside the figure.

2. How does a screen reader handle a figure with figcaption? It announces the figure as a grouping with its caption as the label.

3. Can you put multiple images in one figure? Yes, if they share a single caption (e.g., before/after comparisons).

Challenge: Create a figure with two images (before/after) and a shared figcaption.

FAQ

Mini Project

Create a tutorial page with three figures: a screenshot with caption, a code example with caption, and a diagram with caption. Use proper alt text for each image.

What's Next

Learn about SVG Accessibility and how to make inline SVGs accessible with role and aria-label.