<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-12 Working Draftでは、親detailsの最初のsummaryに対応するComputed Roleをhtml-summaryとし、WAI-ARIAに対応roleはないと記載しています。支援技術へは、対応するplatform APIに応じてpush button、toggle button、disclosure triangleなどとしてmapし、親detailsの開閉状態をexpanded / collapsedとして伝えます。

最初のsummaryでない要素や、detailsの外・内側の別要素にあるsummaryは、同草案ではgenericとして扱います。summaryのaccessible nameはaria-labelまたはaria-labelledbyがあればその計算を使い、通常はsummaryの子孫textから計算します。空のままでは利用者に分かる名前を持てないことがあります。

Chrome 155のbrowser accessibility treeでは、有効なsummaryはDisclosureTriangleとして公開され、表示文字がaccessible nameになり、detailsのopen状態に合わせてexpandedが変わりました。aria-labelによる名前の置き換えも確認しました。一方、2つ目のsummaryもDisclosureTriangleとして公開され、親detailsがopenならexpanded=trueでしたが、クリックしても親のopen状態は変わりませんでした。nested / standalone summaryはgenericでした。

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-12 — role mappings and summary accessible name computation
4. Web Platform Tests: the-summary-element — selected activation and summary interaction tests

Implementation Evidence

2026-10-23にChrome 155で、ブラウザー操作、選定WPT、browser accessibility treeを測定しました。WPTは9件すべて成功しました。AAMでは、仕様草案がgenericとする2つ目のsummaryがChromeのtreeではDisclosureTriangleとして公開される差を確認しました。詳しい条件と結果は測定記録にあります。この結果は他のbrowser、OS API、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でpointer・Space・Enterによる開閉と、選定WPT 9/9件の成功を確認（wpt.liveの版は未固定）
• 要確認2つ目のsummaryは親を開閉しませんが、Chrome AX treeではDisclosureTriangleとして公開されました。HTML-AAM草案のgeneric mappingとの違いを他のbrowserとplatform APIでも調べる必要があります。
• 未完了複数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と支援技術でも検証してください。