Names, roles & states
A Disclosure's Summary Has No Text a Screen Reader Can Read
When a `<summary>` has no readable text, screen reader users hear only "collapsed" or "button" and can't tell what the section holds.
summary-nameWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevContentTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
The <details> and <summary> elements make a section that opens and closes. The <summary> is the clickable heading, and its text is the control's name.
If the summary is empty, or holds only an icon or image with no text alternative, the control has no name. Screen reader users hear a nameless control and must guess what it does.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "collapsed, button" or similar, with no clue what opens. | High impact |
| Voice control users | They can't say a name to open it, so they must use slower grid or number commands. | High impact |
| Low-vision users (magnification) | Affected if they use a screen reader, and an icon alone may be hard to make out when zoomed. | Partial impact |
| Cognitive and neurodivergent users | An unlabelled icon makes them guess what the section contains. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It fails WCAG 2.2 at Level A, the minimum. Complaints under Australia's Disability Discrimination Act and EN 301 549 point to WCAG. | High impact |
| Conversion | FAQs, shipping details and product specs often sit in these sections. If people can't find them, they may leave. | Moderate impact |
| SEO | Search engines read the summary text, but the gain is small — don't sell it as an SEO fix. | Low impact |
| Brand trust | Unlabelled controls signal that some customers weren't considered. | Moderate impact |
| Cost to fix | Adding text is quick. Fix it once in the shared accordion component. | High impact |
Fixing it in code
A summary with only an icon
Don't
<details>
<summary><svg aria-hidden="true" class="icon-info"></svg></summary>
<p>Free returns within 30 days.</p>
</details>A screen reader says: “collapsed, button”
Do
<details>
<summary><svg aria-hidden="true" class="icon-info"></svg> Returns policy</summary>
<p>Free returns within 30 days.</p>
</details>A screen reader says: “Returns policy, collapsed, button”
Visible text gives the control a name everyone can use.
A summary with an image
Don't
<summary><img src="plus.png" alt=""></summary>A screen reader says: “collapsed, button”
Do
<summary><img src="plus.png" alt="Show delivery options"></summary>A screen reader says: “Show delivery options, collapsed, button”
The image's alt text becomes the summary's name.
Designer's handoff note
Give every expandable section a short visible heading, like "Returns policy". Don't rely on a plus sign or chevron alone.
Quick test
Tool
NVDA (opens in a new tab) (free on Windows)
Checklist
- Pass
- You hear a clear name, like "Returns policy, collapsed, button".
- Fail
- You hear only "collapsed" or "button" with no name.
Check these at the same time
- A button has no name a screen reader can say
button-name - An image has no text alternative
image-alt - A link has no text a screen reader can read
link-name
What a green scan still misses
A scanner checks that some text exists. It can't tell whether that text clearly describes what the section holds.
Reference
- Rule ID
summary-name- Raised by
- axe-core: “Summary elements must have discernible text”
- WCAG
- 4.1.2 Name, Role, Value (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.4.1.2
- Last reviewed
- 14 October 2026