The <summary> element is an interactive control. It is what users activate to expand or collapse a <details> section. If a summary has no accessible name, screen reader users cannot tell what content will be revealed, or even that the control exists. For accessibility, every <summary> must expose discernible text that clearly describes its purpose.
WCAG Success Criterion
Success Criterion: Name, Role, Value (4.1.2)
User interface components must have a name and role that can be programmatically determined, and states, properties, and values that can be set by the user must be programmatically settable and announced to assistive technologies.
The <summary> element has an inherent interactive role.
Authors are responsible for ensuring it has an accessible name.
How Screen Readers Use <summary>
Screen readers do not interpret <summary> visually. They rely on the accessibility tree, where <summary> is exposed as a control that toggles the expanded state of its parent <details> element.
When navigating, users typically hear output like:
“Shipping information, button, collapsed”
If the summary has no accessible name, screen readers may announce only:
“Button”
With no indication of what will expand, users cannot make informed navigation decisions.
What “Discernible Text” Means
A summary has discernible text when it exposes a non-empty accessible name that assistive technologies can detect and announce.
That name must describe:
- The topic of the hidden content, or
- The action the control performs
Discernible text can be provided through:
- Visible text content
- aria-label
- aria-labelledby
- title (least reliable)
If none of these resolve to usable text, the summary has no accessible name.
Correct Markup Examples
Visible text (recommended)
<details>
<summary>Order details</summary>
<p>Shipping, taxes, and delivery estimates.</p>
</details>This is the most reliable and accessible pattern.
Hidden text using aria-label
<details>
<summary aria-label="Order details"></summary>
<p>Shipping, taxes, and delivery estimates.</p>
</details>Useful when the summary is styled as an icon or background image.
Referencing existing text with aria-labelledby
<h3 id="refunds-heading">Refund policy</h3>
<details>
<summary aria-labelledby="refunds-heading"></summary>
<p>Refunds are processed within 14 days.</p>
</details>The referenced element must contain actual text.
Using title (supported but discouraged)
<details>
<summary title="Order details"></summary>
</details>The title attribute is inconsistently announced and should be a last resort.
Incorrect Markup Examples
Empty summary
<details>
<summary></summary>
</details>No accessible name. Screen readers cannot identify the control’s purpose.
Icon-only summary with no alternative text
<details>
<summary>
<span class="icon-chevron"></span>
</summary>
</details>CSS or icon fonts do not provide accessible names.
Broken aria-labelledby
<details>
<summary aria-labelledby="missing-id"></summary>
</details>
If the referenced ID does not exist or has no text, the name computation fails.
Why This Matters
The <summary> element controls access to hidden content.
Without a discernible name:
- Screen reader users cannot predict what will be revealed
- Navigation becomes trial-and-error
- Important content may never be discovered
Visually obvious controls are not automatically accessible.
Without an accessible name, the summary has no usable identity.
Common Causes of Failure
- Icon-only summaries without text alternatives
- Empty
<summary>elements used for styling - Relying on CSS-generated content
- Broken or empty aria-labelledby references
- Assuming
<details>provides labelling automatically
A simple rule of thumb:
If a summary has no readable text, it has no accessible name.
How This Is Tested
Accessibility tools and manual audits verify that:
- Every
<summary>resolves to a non-empty accessible name - The name is announced consistently by screen readers
- ARIA references point to real, readable text
- The control is understandable without a visual context
Missing or empty summary names are reliable WCAG failures under SC 4.1.2.
Wrapping Up
The <summary> element is not decorative. It is a control that must clearly communicate its purpose. Every summary must expose discernible text so that assistive technologies can announce what content will be shown when it is activated.
Use visible text whenever possible. Use ARIA only when necessary, and only when it resolves to real, readable content. A summary without an accessible name does not guide users. It hides information instead of revealing it.
