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 the <summary> element's parent <details> element.
Why is the summary tag important?
It provides a visible, interactive heading for collapsible content. Without it, the browser would use a default label like "Details."
<details>
<summary>Click to expand FAQ</summary>
<p>This content is only visible when toggled.</p>
</details>
View HTML Living Standard: The summary element
Accessibility Principle: The Interactive Label
The <summary> element is unique because it serves as both a structural label and a functional button.
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.
When you use <summary>, the browser automatically assigns it the role of a button or a "disclosure triangle." The text inside the tag becomes the Accessible Name. Screen readers will announce the summary text and then state whether the section is "collapsed" or "expanded." This is a native implementation of an interaction that previously required complex JavaScript and ARIA attributes.
Usage Rules & Best Practices
- Placement: It must be the first child of a
<details>element. - Interactive Elements: Do not place other interactive elements (like
<a>or<button>) inside a<summary>. This violates the rule against nesting interactive controls and confuses keyboard navigation. - Headings: You can nest a heading (like
<h3>) inside a<summary>to ensure the document outline remains robust for users who navigate by headings.
<summary>
<h3 style="display: inline;">Technical Specifications</h3>
</summary>
Styling for Visual Clarity
By default, browsers show a small triangle (marker) next to the summary. Following SMACSS Module Rules, you can style this marker or the entire summary block.
- The
::markerPseudo-element: Use this to change the color or shape of the default triangle. - Focus Indicators: Ensure the
:focusstate is clearly visible. Many custom resets accidentally remove the focus ring from<summary>tags, making them inaccessible to keyboard users.
A11y Tip: Keyboard Native Support
Because <summary> is a native control, it is automatically in the tab order. Users can toggle it using the Space or Enter keys. Avoid adding tabindex or custom key listeners to these tags, as it can interfere with standard browser behavior.