<figure>要素 — 内容のまとまりとcaption

Technical Summary

定義・分類・content model

HTML Living Standardのfigureは、必要ならcaptionを付けられる、ひとまとまりとして扱えるflow contentです。主な例は、図解、写真、コード一覧です。「self-contained」は周囲の本文から完全に独立しているという意味ではなく、ひとまとまりとして参照できるという意味です。

親子関係はDOM上の直接の子要素で決まります。離れたcaptionをID参照するだけでは、HTMLのfigcaptionとしての親子関係になりません。DOM interfaceはどちらもHTMLElementです。

figure・figcaption・周辺要素の境界

figureは画像を意味する要素ではありません。図や写真以外に、コード一覧や詩なども含められます。一方、文の途中に置く小さな画像のように、周囲の文と一体になっている内容を機械的に囲む要素でもありません。

図の内容とcaptionの両方が本文の流れに関係するならfigureが候補です。主題とは別の補足、広告、繰り返しの引用など、周囲と別の目的を持つ内容にはasideが候補になります。CSSで位置を動かしただけでは、この意味の境界は変わりません。

figcaptionはfigureの直接の子要素です。captionを使う場合、子要素の先頭か最後に1つ置き、途中に置いたり、2つ以上置いたりしないようにします。caption自体を付けないfigureも適合します。

画像を含める場合、画像のaltとfigureのcaptionは別の役割です。altは画像の代替テキストです。captionは画像を含むまとまりの説明や出典を伝えます。HTML-AAMのname計算には、alt属性がない画像について、figure内の他のflow contentの有無とfigcaptionを条件に画像名を決める限定的な規則があります。これは作者がaltを省略してよいという一般的な推奨ではありません。

HTML-AAMとAccessible Name

HTML-AAM 1.0 Working Draft（2026-10-26）は、figureのimplicit roleをfigure、figcaptionのimplicit roleをWAI-ARIAのcaptionとして示します。これは規範文書のmappingであり、個々のブラウザーのAccessibility Treeが同じnameやnode構成を示すことは、別に実測します。

同Working Draftのfigure Accessible Name Computationでは、figureのnameは作者が指定したaria-labelまたはaria-labelledbyから計算し、いずれもなければtitleを使います。使える文字列がなければnameはありません。figcaptionの文字列はfigureのnameやdescriptionへ自動では含めず、作者が明示的に参照した場合に使います。

WAI-ARIA 1.2のcaption roleはfigureなどのcaptionを表し、captionを持つ親figureからaria-labelledbyで参照することを作者に推奨しています。captionをfigure自身のnameにも使う例は次のとおりです。

<figure aria-labelledby="chart-caption">
  <img src="sales-chart.svg" alt="1月から6月までの売上を示す棒グラフ">
  <figcaption id="chart-caption">図1. 月ごとの売上</figcaption>
</figure>

この例では、画像のaltは画像自体を説明し、aria-labelledbyはfigureのAccessible Nameをcaptionの文字列にします。画像の代替テキストとfigureの名前を同じものとして扱いません。

Fact / Evidence

規範的な定義、アクセシビリティmapping、WPT testharnessのassertion、Chromiumで観測した値を分けて記録します。WPTのpassは選定テストに対する結果であり、仕様全体や他のブラウザーの適合を証明しません。

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, 2026-10-26: figure — role mapping and accessible-name computation.
4. HTML-AAM 1.0 Working Draft, 2026-10-26: 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. Detailed conditions and output files are listed in the evidence registry below and docs/atlas/figure-evidence-2026-11-01.md.

Coverage / Open Issues

• 仕様確認済みfigure / figcaptionの定義、categories、配置、content model、HTML-AAMのrole/name規則、WAI-ARIA caption guidance
• 選定範囲のみ実測Chromiumの単一環境、fixtureおよび日英4ページ、選定WPT 2ファイルの範囲。詳細値と例外はEvidence行を参照
• 未実施Firefox・Safari等の比較、Windows UI Automation / IAccessible2 / macOS AX / ATK、読み上げ・点字、WPTの全file
• 未解決・追跡対象figcaptionとfigureのAccessible Name / Descriptionに関するHTML-AAM・ARIA文書・実装間の扱い。最新draftと実測対象を個別に再確認する
• レビュー未実施Expert-gap Reviewおよび複数の支援技術を使った利用者観点の確認

このTopicのブラウザーおよびWPT結果を、すべてのHTML-AAM requirement、ブラウザー、OS、支援技術への適合として一般化しません。HTML-AAMはWorking Draftで、今後変更される可能性があります。

Related surfaces

初心者向けの使い方はYugienのfigure要素ページを参照してください。画像自体のalt・選択処理はimg Topic、表に付けるcaptionとtable nameはcaption Topic、画像内のリンク領域はimage maps Topicで扱います。

article・sectionの内容境界はarticle Topicとsection Topicを参照してください。