When should an image be wrapped in a figure element with a figcaption, and how should the alt text relate to the caption?

## What `<figure>` is for `<figure>` represents **self-contained content** that the document refers to as a single unit and that could, in principle, be moved elsewhere — to the end of a section, into an appendix — without breaking the flow of the prose. "See figure 3" is the giveaway. `<figcaption>` is its optional caption. Two details of the content model matter: - `figcaption` must be the **first or last child** of the `figure`. Not floating in a wrapper `div`, not in the middle. - A `figure` is not image-only. Code listings, tables, diagrams, blockquotes, audio and video all belong there when they are referenced as a unit. ```html <figure> <img src="deploy-pipeline.png" alt="Build, test and deploy stages run in sequence; deploy is gated on tests passing"> <figcaption>Figure 3. The release pipeline after the 2026 rework.</figcaption> </figure> ``` ## What the pairing buys you The caption is associated with the content **structurally**, not just visually. A paragraph styled to look like a caption sits next to the image and nothing links them; a `figcaption` inside the `figure` is part of the same unit. In the accessibility tree the `figure` exposes a figure role, and the `figcaption` provides its accessible name — so a user navigating by structure hears the caption together with what it captions rather than encountering a stray sentence. That also means a `figure` with a `figcaption` and no other identification is still identifiable, which is one reason the pairing shows up in interview questions about captions and alt at the same time. ## Caption and alt are for different people This is the part candidates get wrong. Both are text attached to the same image, but: - The **caption** is visible page content. Everyone reads it — sighted users included. - The **alt** is the substitute for the image. Only readers who do not perceive the image consume it. So a screen reader user encounters *both*. Duplicate them and the experience is: "Figure 3, the release pipeline after the 2026 rework… image, Figure 3, the release pipeline after the 2026 rework." Two announcements of one sentence, and still no idea what the diagram actually depicts. The rule that follows: **the caption names or contextualises; the alt describes what is in the image.** In the snippet above the caption identifies the diagram and dates it, while the alt says what the diagram shows — three sequential stages with a gate. Neither is redundant. ## When `alt=""` inside a figure is right Sometimes the caption really does convey everything the image carries: a photograph whose entire informational content is "the team at the 2025 offsite", captioned exactly that. Repeating it in `alt` adds nothing. Writing `alt=""` is defensible there, because the figure still has its caption as visible, announced content, so no information is lost — unlike a bare decorative image, where the empty alt means genuinely nothing is conveyed. Treat this as a judgement call to justify, not a default. If you can describe something a sighted reader gets from the picture that the caption omits, that description belongs in `alt`. ## When not to use `<figure>` - The image is decorative. A decorative image with a caption is a contradiction — captions announce that content matters. - The image is inline, part of the sentence's flow, and not referred to as a unit. An avatar next to a comment, an icon in a button, a logo in a header: these are just `<img>` with appropriate `alt`. - You only want a styled caption look. `figure` is semantic, not a layout hook; styling is a separate concern. ## The defects that ship The recurring ones are `alt` copied verbatim from the caption; a caption written as a `<p>` outside the `figure` so nothing associates it; `figcaption` nested inside another element instead of being a direct first or last child; and `figure` used as a general-purpose wrapper for any image on the page, which floods a document with figure landmarks that mean nothing.