summary-name
Web validation
<summary> elements must have an accessible name that clearly describes the content they control.The <summary> element provides the interactive label for a <details> disclosure widget. Its text becomes the accessible name announced by assistive technologies. If the summary text is missing, empty, or unclear, users may not understand what content will be revealed or collapsed, making the component hard to operate and predict.
Pass Patterns
Accessible name via text content
The summary text clearly describes the content that will be shown or hidden.
<details>
<summary>Shipping and delivery information</summary>
<p>Orders are delivered within 3–5 business days.</p>
</details>Fail Patterns
Missing name
The summary element has no text content, resulting in no accessible name.
<details>
<summary></summary>
<p>Return policy details.</p>
</details>Summary with a non-text content
The summary relies only on non-text content without an accessible name.
<details>
<summary>
<span aria-hidden="true">+</span>
</summary>
<p>Billing information.</p>
</details>ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader.
- Move to the details/summary element with Tab.
- Listen to what the screen reader announces.
Expected result: It speaks the summary’s name (e.g., “Shipping and delivery information”).
Actual result: It announces “details” or nothing at all.
Inspecting the browser dev-tools
- Open the Accessibility Tree panel.
- Select the details/summary element.
Expected result: The Name field shows the text you provided.
Actual result: If unnamed, Name is empty.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires interactive elements to expose a name and role to assistive technologies. The <summary> element is interactive, and its accessible name comes from its text content. Missing or unclear text breaks this requirement.
Why is this issue marked as Serious?
When a summary has no accessible name, assistive technology users cannot identify or understand the purpose of the disclosure control. This directly affects operability and comprehension across screen readers and browsers.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |
| Section 508 | 1194.22(a) | A text equivalent for every non-text element shall be provided (e.g., via “`alt`”, “`longdesc`”, or in-element content). |
| 508 Trusted Tester | 2.4.4-link-purpose, 6.A | The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context. |