<caption>要素

Technical Summary

Definition / Content model

caption要素の定義と適合条件

項目	仕様上の内容	条件・範囲
意味	親がtable要素の場合、そのtableの題名を表す	table modelに参加する要素として扱う
配置	tableの最初の子要素	適合markupでは表ごとに1つまで。HTMLのcontent modelではcaptionは任意
Content model	Flow content	子孫にtable要素を含めない
Content attributes	Global attributes	旧式のalign属性はobsoleteで不適合。位置や配置はCSSを使う
DOM interface	HTMLTableCaptionElement	HTMLElementを継承する。obsoleteなIDL属性alignも定義される

table内の題名は、tableの意味やデータを理解する手がかりになります。表をfigureに含め、その表だけがfigureの内容で、ほかにfigcaptionがある形では、HTML Standardはcaptionを省きfigcaptionを使うよう勧めています。この推奨が当てはまる条件を、figure内の別コンテンツがある場合へ拡張しません。

古いHTMLにはcaption align属性とHTMLTableCaptionElement.alignが残っていますが、どちらもobsoleteです。新しいmarkupでは使わず、CSSのcaption-sideやtext-alignを使います。

表との関連付けとDOM interface

captionは単なる隣接テキストではなく、親tableの子要素です。table.caption getterは最初のcaption子要素を返し、該当するcaptionがなければnullを返します。setterは指定したcaptionをtableへ設定します。createCaption()はcaptionがなければ作成し、deleteCaption()は削除します。

const table = document.querySelector("table");
const caption = table.caption; // 最初のcaption。なければ null

const ensuredCaption = table.createCaption();
ensuredCaption.textContent = "月ごとの来館者数";

table.deleteCaption();

caption以外の位置にある要素、たとえばtrの子として追加されたcaptionは、そのtableのcaption getterでは取得されません。DOM setterによる修復や複数captionを含む不適合markupは、通常の適合markupとは分けて扱います。

表示位置とtable model

HTML上のcaption位置と画面上のcaption位置は別の概念です。CSS Tablesのcaption-sideはcaption boxをtable gridの上または下へ配置します。たとえばcaption-side: bottomを指定しても、caption要素がHTMLの最初の子要素であることや、そのtableとのDOM関係は変わりません。

caption {
  caption-side: bottom;
  text-align: start;
}

CSSによる位置指定が画面上・DOM上・支援技術の読み上げで同じ順序になるとは仮定しません。各Surfaceでの結果を独立して測定します。

Accessible role・relation・table name

HTML-AAMで定義されるcaptionとtableの関係

Surface	定義	範囲・注意
caption role	WAI-ARIAのcaption roleへ対応付ける	実際のplatform APIへのrole値は各APIのWAI-ARIA mappingを経由する
Parent relation	captionからparent tableへのlabel関係をplatformごとに定義する	IAccessible2・ATK・AXではlabel-for関係、UIAでは親tableのLabeledByがcaptionを指す
Table accessible name	aria-label / aria-labelledbyを計算した後、最初のcaption子要素のtext subtreeを使う	なお名前が空の場合はtitle属性を使う。captionがAX treeでhiddenなら名前に使わない

ここでいうaccessible nameは、支援技術が表を識別する名前です。可視captionの文字列が使われることが多いものの、author-provided ARIA nameがあれば優先されます。読み上げソフトが表の入口でその名前をいつ・どう読むかは、HTML-AAMのmappingだけからは断定できません。

Fact / Evidence（主張 / 根拠）

仕様上の定義、Accessibility mapping、CSSの表示位置を別の主張として追跡します。実装観測・WPT・支援技術の結果はImplementation Evidenceに分けます。

Evidence

1. HTML Standard: The caption element — 意味、context、content model、HTMLTableCaptionElement
2. HTML Standard: The table element — captionを含むtable content modelとDOM API
3. HTML Accessibility API Mappings: caption — caption role、tableとのplatform relation
4. HTML-AAM: table accessible name — ARIA、caption、titleの順序とhidden captionの条件
5. CSS Table Module Level 3: caption-side — caption boxの表示位置
6. HTML Standard: Obsolete features — caption alignとIDLのobsolete状態
7. WPT: caption_001.html — caption getter / setter、null、子要素との関係
8. W3C WAI: H39 — caption要素を使ってtableにcaptionを関連付ける技法

Implementation Evidence

以下は選定したfixture、WPT、Chrome、NVDAの観測です。仕様の適合や他環境で同じ出力になることを示すものではありません。AAM platform mapping、ブラウザーAccessibility Tree、Windows UI Automation、NVDAのspeech outputは区別して記録します。

WPTは選定したケースのみです。browser accessibility treeやWindows UI Automationの値は、プラットフォームを超えたAAMの適合判定ではありません。NVDAの発話は、実際の出力を取得できた組み合わせに限って記録します。

Coverage / Open Issues

• ReviewedHTML上の意味、最初の子要素という条件、content model、DOM API、CSS caption-side、HTML-AAM roleとtable name計算
• Open全ブラウザーのHTML parsing・DOM setter差、複数captionを含む不適合markup、captionの子孫要素とtable model
• Open選定WPT以外の全WPT、他ブラウザー、macOS AX / Linux ATK、Windows UIAの全propertyは未評価
• OpenNVDAの読み上げ順・table navigation・JA/EN voice variation、他の支援技術との組み合わせ、Expert-gap Review

このページは初期Coverageです。記録した観測は、すべてのtable構造・ブラウザー・platform API・支援技術に一般化しません。

Related surfaces

初心者向けの例とcaptionの置き場所はYugienのcaption要素ページで説明しています。table全体のgridとparser recoveryはtable Topic、header cellとdata cellの関係はth Topicとtd Topicを参照してください。