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-12 HTML-AAM 1.0 Working Draft gives a qualifying summary the computed role html-summary, with no corresponding WAI-ARIA role. It maps the control to platform roles such as push button, toggle button, or disclosure triangle, and exposes the parent details state as expanded or collapsed.

The draft maps a summary that does not qualify within its parent details to a generic role. Its accessible name is computed from aria-label or aria-labelledby when present, and otherwise from the summary subtree text. An empty summary may not have a useful accessible name.

In Chrome 155, the browser accessibility tree exposed a qualifying summary as DisclosureTriangle, used its visible text as the accessible name, and changed expanded with the parent details state. An aria-label name override was also observed. The second summary was also exposed as DisclosureTriangle, with expanded=true while its parent details was open, although clicking it did not change the parent open state. Nested and standalone summaries appeared as generic.

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, 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

On 2026-10-23, browser interaction, selected WPTs, and the browser accessibility tree were measured in Chrome 155. All 9 selected WPT tests passed. The AAM observation found that Chrome exposed a second summary as DisclosureTriangle even though the Working Draft maps a non-qualifying summary to generic. See the measurement record for conditions and results. This does not include measurements from other browsers, operating-system APIs, or screen readers.

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 observationChrome 155 opened and closed details through pointer, Space, and Enter; selected WPTs passed 9/9 (wpt.live revision unpinned)
• Needs follow-upThe second summary did not toggle its parent, but Chrome AX tree exposed it as DisclosureTriangle. Compare this difference from the HTML-AAM generic mapping in other browsers and platform APIs.
• 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.