The <figure> Element — Content Groups and Captions

Technical Summary

Definition, categories, and content model

The HTML Living Standard defines figure as self-contained flow content that may have a caption. Typical examples include illustrations, diagrams, photographs, and code listings. “Self-contained” does not mean completely unrelated to the surrounding text; the content can be referred to and handled as one unit.

The relationship is a direct parent-child relationship in the DOM. Referencing a caption elsewhere by ID does not make it an HTML figcaption child. Both elements use the HTMLElement interface.

Boundaries with figcaption and related elements

figure does not mean “image.” It can group a code listing or poem as well as an illustration. It is also not a wrapper that should be added around every small image, such as an image that simply forms part of a sentence.

Use figure when its content and caption belong to the flow of the main text and can be referred to as one piece. aside may fit a note, advertisement, or repeated quotation that has a separate purpose from the surrounding content. Moving an element with CSS does not change this semantic boundary.

figcaption must be a direct child of figure. If used, place one at the beginning or end; do not put it in the middle or use several captions. A figure without a caption is also conforming.

For an image, alt and a figure caption have different jobs. alt is the image's text alternative. The caption explains the group that contains the image or gives context or credit. HTML-AAM has a narrow rule for deriving an image name from a figure's caption when the image has no alt or title and the figure contains no other non-whitespace flow content. This exception is not general guidance to omit alt.

HTML-AAM and accessible names

The HTML-AAM 1.0 Working Draft dated 26 October 2026 maps figure to the implicit figure role and figcaption to the WAI-ARIA caption role. This is the mapping in a draft specification; each browser's Accessibility Tree still needs separate measurement.

In that draft's figure Accessible Name Computation, the name comes from the author's aria-label or aria-labelledby. If neither supplies a usable name, the algorithm uses title; otherwise the figure has no accessible name. The text of figcaption does not automatically become the figure's name or description unless the author explicitly references it.

WAI-ARIA 1.2 defines the caption role for visible content that names or describes a figure and recommends that the parent figure reference its caption with aria-labelledby. The following example gives the caption text as the figure's accessible name.

<figure aria-labelledby="chart-caption">
  <img src="sales-chart.svg" alt="Bar chart of sales from January to June">
  <figcaption id="chart-caption">Figure 1. Monthly sales</figcaption>
</figure>

Here, the image alt describes the image. aria-labelledby gives the figure its accessible name from the caption. The image alternative and the figure name are separate pieces of information.

Fact / Evidence

Normative definitions, accessibility mappings, WPT testharness assertions, and values observed in Chromium are recorded separately. A WPT pass applies to the selected tests; it does not prove conformance to the full specification or to other browsers.

Evidence

1. HTML Living Standard, §4.4.12 The figure element — definition, categories, context, content model, DOM interface, caption behavior, and author guidance.
2. HTML Living Standard, §4.4.13 The figcaption element — parent relation, category, context, content model, and interface.
3. HTML-AAM 1.0 Working Draft, 26 October 2026: figure — role mapping and accessible-name computation.
4. HTML-AAM 1.0 Working Draft, 26 October 2026: figcaption — caption role mapping.
5. WAI-ARIA 1.2: caption role — caption meaning and the recommendation to reference it from its parent.

Implementation Evidence

Browser DOM and Chromium Accessibility Tree observations use a dedicated fixture. Selected WPT tests use the pinned testharness with a Playwright / Chrome DevTools Protocol adapter for computed role and label. The adapter is not the official wptrunner or WebDriver launcher.

Reproducible fixture: figure-v1 records figure and figcaption child placement, accessible-name cases, image alt and caption cases, page metadata, responsive widths, theme settings, and the four Yugien / Atlas locale pages. Conditions and output files are listed in the evidence registry below and docs/atlas/figure-evidence-2026-11-01.md.

Coverage / Open Issues

• Specification reviewedfigure / figcaption definitions, categories, placement, content model, HTML-AAM roles and name calculation, and WAI-ARIA caption guidance
• Selected observations onlyOne Chromium environment, the fixture and four JA / EN pages, and two selected WPT files. See Evidence rows for results and exceptions.
• Not runFirefox / Safari comparisons, Windows UI Automation / IAccessible2 / macOS AX / ATK, assistive-technology speech or braille, and the full WPT file set
• Open for follow-upHow HTML-AAM, ARIA documents, and implementations handle the accessible name and description relationship between figcaption and figure. Recheck the current draft and test targets individually.
• Review not completedExpert-gap Review and evaluation with multiple assistive technologies

These browser and WPT results do not establish conformance across all HTML-AAM requirements, browsers, operating systems, or assistive technologies. HTML-AAM is a Working Draft and may change.

Related surfaces

For a beginner-friendly guide, see How to Use the figure Element in Yugien. Image alternative text and resource processing are covered by the img Topic; table captions and table names by the caption Topic; and linked image regions by image maps.

For content boundaries in article and section, see the article Topic and the section Topic.