<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.
Overview
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 `<summary>` that clearly states what content toggles open/closed. Do not rely on icon-only summary controls. If visual design requires icon emphasis, keep an accessible text label within summary.
Developer Guidance
Enforce required summary label text in disclosure/accordion components. Keep labels action-oriented and specific (for example, 'Shipping details' not 'More'). Ensure collapsed and expanded state is still communicated by native details/summary behavior.
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 Implementation
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.
- 2. Expected: Contains readable, descriptive text.
- 3. If <summary> contains only an icon, ensure there is hidden text:
- 4. e.g., <span class="sr-only">Label</span>
- 5. Turn on a screen reader and navigate to the <summary>.
- 6. Expected announcement: 'Summary label, button, collapsed/expanded'
- 7. Press Enter/Space using keyboard to toggle.
- 8. Expected behavior: Content expands/collapses predictably.
Related Robust Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance