The <summary> Element

Technical Summary

Definition / Categories

Item	Specification summary
Meaning	A summary, caption, or legend for the rest of the parent details element's contents, if any
Categories	None
Context	As the first child of a details element
Content model	Phrasing content, optionally intermixed with heading content
Tag omission	Neither tag is omissible
Content attributes	Global attributes; no summary-specific content attributes
DOM interface	Uses HTMLElement; no summary-specific interface

Selection within a parent details

The HTML Standard's selection algorithm identifies a summary when its parent is a details element and it is that parent's first summary element child. The condition checks the first summary element child; it does not simply test whether any earlier node or any other element exists.

<details>
  <summary>First summary — can control disclosure</summary>
  <p>Additional contents</p>
  <summary>Second summary — does not control disclosure</summary>
</details>

A summary outside details, nested inside another element, or after another summary is not the summary for that parent details. Its activation behavior does not toggle the parent's open attribute.

Content model and conformance

The summary content model is phrasing content, optionally intermixed with heading content. Conforming details markup puts summary first, followed by flow content.

Record the activation algorithm separately from markup conformance. For example, a selected WPT case checks that a summary still activates when another flow element precedes it, because it remains the first summary element child. That DOM order does not make the markup conforming or recommended.

Summary text should identify the additional contents while the disclosure is closed. When heading content is included, heading-outline effects and accessible-name computation are part of the review.

Activation and state

Activation of a qualifying summary removes the parent details element's open attribute when present, and sets it to the empty string when absent. The parent details element owns the boolean open state; summary does not.

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

summary.click();
console.log(details.open); // true or false

Mouse, keyboard, and HTMLElement.click() are distinct activation paths. The user agent supplies the disclosure indicator. If styling it, check the behavior of ::marker and state-dependent CSS, and do not generalize browser-specific rendering as a universal requirement.

DOM Interface

A summary uses HTMLElement; the HTML Standard defines no summary-specific DOM interface. The element has no open property. Determine its relationship from parentage and order, and read disclosure state from its parent details element.

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);                     // parent details state

Accessibility / HTML-AAM

The 2026-10-26 HTML-AAM 1.0 Working Draft assigns the computed role (the role name defined by the specification) html-summary to the first summary in a parent details element. WAI-ARIA has no matching role. Platform APIs, which pass role information between the operating system and assistive technology, expose it as roles such as push button, toggle button, or disclosure triangle. Expanded and collapsed states reflect the parent details open state. This document is a work in progress and may change.

The draft says that a summary outside details, or a second or later summary in the same details element, must be exposed as generic. Generic means that it has no specific control role such as a disclosure control. The first summary's accessible name uses aria-label or aria-labelledby when present, and usually comes from the summary's text. If neither provides a usable name, the title attribute is used; otherwise, there is no accessible name.

In measurements on 2026-10-31, Chrome 155 and Edge 156 browser accessibility trees exposed a qualifying summary as DisclosureTriangle, with its visible text as the accessible name, focusable state, and expanded state reflecting its parent details. The second summary was also exposed as DisclosureTriangle / expanded=true, but its AX node had no focusable property and pointer activation left the parent details open. Firefox 157.0.1 WebDriver computed-role queries returned an empty role string for both the first and second summary; both accessible names were their visible text. Firefox platform accessibility APIs were not measured.

Fact / Evidence

Normative conditions, accessibility mappings, and observations are recorded separately. A result from selected tests and one environment is not generalized to unmeasured browsers or platform APIs.

Evidence

1. HTML Standard: The summary element — categories, context, content model, interface, selection algorithm, and activation behavior
2. HTML Standard: The details element — disclosure meaning and parent open state
3. HTML-AAM 1.0 Working Draft, 26 October 2026 — 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

On 2026-10-31, Chrome 155 and Edge 156 browser accessibility trees and Firefox 157.0.1 WebDriver role queries were measured. Two selected WPT files passed 12/12 checks in each of Chrome and Edge. However, the HTML-AAM role test checks summaries hidden inside closed details, so it does not test the visible second summary's role difference. A separate observation found the second summary exposed as DisclosureTriangle in Chrome and Edge, even though activating it left the parent details open. Conditions and WPT scope are listed in the table below. Windows UI Automation, IAccessible2, and screen readers were not measured.

A role query in one browser is an observation of that browser's accessibility-tree exposure. It does not measure Windows UI Automation, IAccessible2, ATK, Apple AX, or assistive-technology speech and interaction.

Coverage / Open Issues

• Specification checkedMeaning, categories, context, content model, tag omission, global attributes, and DOM interface
• Specification checkedSelection within a parent details and activation that changes the parent's open attribute
• Partial observationSelected WPTs passed 12/12 in Chrome 155 and Edge 156. A Firefox 157 WebDriver role query was also recorded. Coverage is limited to two WPT files and three browsers.
• Needs follow-upIn Chrome and Edge, a second summary inside open details was exposed as DisclosureTriangle, but it did not toggle its parent. Firefox WebDriver returned an empty role string for both the first and second summaries. Further work is needed to explain the differences from the HTML-AAM draft and check platform API roles.
• WPT scopeThe selected HTML-AAM role test hides its second and nested summaries inside closed details; it does not check their visible roles.
• OpenPointer and keyboard behavior, marker rendering, and dynamic child changes across browsers and operating systems
• OpenWindows UI Automation, IAccessible2, ATK, Apple AX, and screen-reader-specific observations
• OpenOther WPT files, Expert-gap Review, full compatibility data, and historical changes

This is initial coverage. Selected observations do not establish the same implementation result across all user agents or assistive technologies.

Related surface

For a beginner-friendly example and advice on clear disclosure labels, see summary in Yugien. The parent open state, toggle event, and exclusive name group are covered in the details Topic. Verify the accessible name and role with the target browser's accessibility tree and assistive technology.