<summary> must have meaningful visible text
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If it expands content, the user must know **what** they are expanding.
Why this matters and how to fix it
Why this matters
The <summary> element is the interactive label for the <details> disclosure widget. If <summary> has no visible text, assistive technologies cannot announce what the control does, and users will not know what content can be expanded or collapsed.
How to fix this issue
Provide descriptive text inside the <summary> element that clearly conveys what content it reveals. Do not rely on icons alone. If the <summary> should contain only an icon visually, include text visually hidden but still accessible.
Developer guidance
Design systems should enforce that <summary> always accepts a required label prop. When using icon-only disclosure toggles, include a visually hidden text label using a utility class such as `.sr-only`.
Code examples
Incorrect Implementation
<details><summary></summary><p>Details about product</p></details>Correct Implementation
<details><summary>More product information</summary><p>Details about product</p></details>Real-World Examples
Before
<details><summary><svg aria-hidden="true"></svg></summary>Specs here</details>
<!-- Screen reader announces: 'button, collapsed' (no purpose) -->After
<details><summary><svg aria-hidden="true"></svg><span class="sr-only">View specifications</span></summary>Specs here</details>
<!-- Screen reader: 'View specifications, button' → clear and operable -->CSS Example (Guidance)
/* Utility class for visually hidden but accessible text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Manual testing
- 1. Inspect each <summary> element.
- • Expected: Contains readable, descriptive text.
- 2. If <summary> contains only an icon, ensure there is hidden text:
- • e.g., <span class="sr-only">Label</span>
- 3. Turn on a screen reader and navigate to the <summary>.
- • Expected announcement: 'Summary label, button, collapsed/expanded'
- 4. Press Enter/Space using keyboard to toggle.
- • Expected behavior: Content expands/collapses predictably.
Trusted by organizations across Europe working toward WCAG and EAA conformance