The <summary> Element
As defined in the HTML Living Standard, the <summary> element represents a summary, caption, or legend for the rest of the contents of its parent <details> element.
Click to reveal more information
The summary tag provides the interactive label that users click to expand the details widget.
<details>
<summary>Click to reveal more information</summary>
<p>The summary tag provides the interactive label...</p>
</details>
View HTML Living Standard: The summary element
Placement and Rules
The <summary> element has very strict requirements to be semantically valid:
- Parent: It must be a direct child of a
<details>element. - Position: It must be the first child of the
<details>element. - Quantity: Only one
<summary>is allowed per<details>widget.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined.
The <summary> element is natively mapped to the "button" role by browsers. This ensures that screen reader users know it is an interactive element. The text inside the summary becomes the "accessible name" of the button, telling the user exactly what will be revealed when activated.
Styling the Summary
While the <summary> is a button, it often looks like a simple piece of text by default.
- Visual Cues: It is best practice to provide a visual cue (like a triangle or plus sign) to indicate that the element is expandable. Browsers provide this by default, but if you remove it via CSS (
list-style: none), you must provide an alternative. - Focus States: Ensure the
<summary>has a highly visible focus ring to support keyboard users (WCAG SC 2.4.7).
A11y Tip: Avoid Nested Interactivity
Never place a link or another button inside a <summary> tag. This creates a "nested interactive" situation that is confusing for screen readers and can break keyboard navigation.