<summary>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	親detailsの残りの内容に対するsummary、captionまたはlegend（親detailsがある場合）
Categories	なし
Context	details要素の最初の子として使用
Content model	Phrasing content。heading contentを任意に混在できる
Tag omission	開始tag・終了tagとも省略できない
Content attributes	Global attributes。summary固有の属性はない
DOM interface	HTMLElementを使用。summary固有interfaceはない

親detailsとの対応条件

HTML Standardのselection algorithmでは、親がdetailsで、その親の最初のsummary element childである場合に、そのsummaryが親detailsのsummaryになります。テキストnodeや他種のelementの有無ではなく、「最初のsummary element childか」を判定します。

<details>
  <summary>最初のsummary — 開閉を担当</summary>
  <p>追加の内容</p>
  <summary>2つ目のsummary — 開閉を担当しない</summary>
</details>

detailsの外にあるsummary、detailsの子孫でも別要素に包まれたsummary、2つ目以降のsummaryは、その親detailsのsummaryではありません。Activation algorithmはこれらの要素から親detailsのopenを切り替えません。

Content modelと適合性

summaryのContent modelはPhrasing contentで、heading contentを任意に混在できます。適合するdetails markupではsummaryをdetailsの最初の子に置き、その後にflow contentを置きます。

Activation algorithmの条件とHTML markupの適合性は別々に記録します。たとえば選定WPTには、先に別のflow elementを置いたdetailsで、その後の最初のsummary element childがactivationすることを確認するcaseがあります。このDOM順序を適合するmarkupとして推奨するものではありません。

summaryの内容は、閉じた状態でも追加情報を推測できる短い文言が適しています。heading contentを含む構成では、見出しのアウトラインやアクセシブルな名前への影響も確認対象になります。

Activationと状態

有効なsummaryのactivationは、親detailsにopenがあれば削除し、なければ空文字列の値で設定します。summaryが状態を持つのではなく、親detailsのboolean open attributeが開閉を表します。

const summary = document.querySelector('details > summary');
const details = summary.parentElement;

summary.click();
console.log(details.open); // true または false

マウス、キーボード、HTMLElement.click()は別のactivation経路として扱います。標準の開閉表示はuser agentが描画します。見た目を調整する場合は::markerやCSSの各状態の効果を確認し、ブラウザー固有の描画差を一律の仕様として記述しません。

DOM Interface

summaryはHTMLElementを使用し、HTML Standardにsummary専用のDOM interfaceは定義されていません。summary自身にopen propertyはありません。親detailsへの対応は要素の親・順序から判断し、開閉状態は親detailsから読み取ります。

const summary = document.querySelector('details > summary');
const parent = summary.parentElement;
const isFirstSummary =
  parent.localName === 'details' &&
  [...parent.children].find((child) => child.localName === 'summary') === summary;

console.log(summary instanceof HTMLElement); // true
console.log('open' in summary);               // false
console.log(parent.open);                     // 親detailsの状態

Accessibility / HTML-AAM

HTML-AAM 1.0の2026-10-26 Working Draftでは、親detailsの最初のsummaryにComputed Role（仕様が定めるrole名）html-summaryを割り当てます。これはsummary用の名前で、WAI-ARIAに同じroleはありません。OSと支援技術の間でroleを伝えるplatform APIでは、push button、toggle button、disclosure triangleなどとして公開されます。expanded / collapsedは親detailsのopen状態を表します。この文書は作業中の草案で、今後変わることがあります。

親detailsの子ではないsummaryや、親detailsにある2つ目以降のsummaryは、同草案ではgenericとして公開する必要があります。genericは、開閉操作などの固有roleを持たない一般の要素を表します。最初のsummaryのaccessible nameは、aria-labelまたはaria-labelledbyがあればその規則で計算し、通常はsummaryの中のtextから計算します。使える名前が見つからない場合はtitle属性を使い、それもなければ名前はありません。

2026-10-31の観測では、Chrome 155とEdge 156のbrowser accessibility treeで、有効なsummaryはDisclosureTriangle、表示文字をaccessible name、focusable、親detailsのopen状態に応じたexpandedとして公開されました。2つ目のsummaryもDisclosureTriangle / expanded=trueとして公開されましたが、AX nodeにfocusable propertyはなく、pointerで押しても親detailsは開いた状態のままでした。Firefox 157.0.1のWebDriver computed-role queryは、最初と2つ目のsummaryに空のrole文字列を返し、両方のaccessible nameには表示文字を返しました。Firefoxのplatform accessibility APIは未測定です。

Fact / Evidence（主張 / 根拠）

規範的な条件、アクセシビリティmapping、観測結果を分けます。選定test・一環境の結果から、未確認browserやplatform APIの同等性を推論しません。

Evidence

1. HTML Standard: The summary element — categories, context, content model, interface, selection algorithm, activation behavior
2. HTML Standard: The details element — disclosure meaning and parent open state
3. HTML-AAM 1.0 Working Draft, 2026-10-26 — summary role mappings and accessible-name computation
4. Web Platform Tests: activation-behavior.html, pinned revision
5. Web Platform Tests: html-aam/summary.html, pinned revision

Implementation Evidence

2026-10-31に、Chrome 155・Edge 156のbrowser accessibility treeとFirefox 157.0.1のWebDriver role queryを測定しました。選定WPT 2ファイルはChrome・Edgeで各12/12件成功しました。ただしHTML-AAM role testは閉じたdetails内のsummaryを調べるため、表示中の2つ目のsummaryのrole差は検査しません。追加測定では、ChromeとEdgeが2つ目をDisclosureTriangleと表示する一方、押しても親detailsは開いたままでした。測定条件とWPTの範囲は下の表に記載しています。Windows UI Automation、IAccessible2、screen readerは未測定です。

単一browserのrole queryは、そのbrowserのaccessibility tree / role exposureの一観測です。Windows UI Automation、IAccessible2、ATK、Apple AX、支援技術の読み上げ・操作を測定したとは扱いません。

Coverage / Open Issues

• 仕様確認済み意味、categories、context、content model、tag omission、global attributes、DOM interface
• 仕様確認済み親detailsのsummary選択条件と、親のopen属性を切り替えるactivation behavior
• 部分観測Chrome 155・Edge 156の選定WPT 12/12件と、Firefox 157のWebDriver role queryを確認。対象はWPT 2ファイルと3 browserに限ります。
• 要確認ChromeとEdgeでは、開いたdetails内の2つ目のsummaryがDisclosureTriangleとして公開されましたが、押しても親detailsは開閉しませんでした。FirefoxのWebDriver role queryは最初と2つ目のsummaryに空文字列を返しました。HTML-AAM草案と異なる理由、および各platform APIでのroleを引き続き調べる必要があります。
• WPTの範囲HTML-AAMの選定role testでは2つ目とnested summaryが隠れており、表示中のroleを検査していません。
• 未完了複数browser・OSにおけるpointer・keyboard activation、marker rendering、動的な子要素変更
• 未完了Windows UI Automation、IAccessible2、ATK、Apple AXおよびscreen reader別の観測
• 未完了WPTの他test file、Expert-gap Review、互換性・歴史的変更の完全な調査

このページは初期Coverageです。選定範囲の確認を、全user agentや支援技術に共通する実装結果とは主張しません。

Related surface

初心者向けの例と、開閉見出しを分かりやすく書く方法はYugienのsummary要素ページを参照してください。親要素のopen state、toggle event、排他的name groupはdetails Topicで扱います。summaryが適切な文言やaccessible nameを持つかを確かめる場合は、対象browserのaccessibility treeと支援技術でも検証してください。