Summary must have discernible text

The <summary> element serves as a built-in disclosure widget in HTML. It functions like a button: users click or activate it to expand or collapse the associated <details> content. Because it’s an interactive control, it must communicate its purpose to all users, including those who rely on assistive technology.

When a <summary> element has no accessible name — for example, when it’s empty or contains only a non-text element without an alternative — screen readers will announce it as something generic like “disclosure triangle” or simply “button” with no label. This leaves blind and deafblind users unable to understand what the control does or what information it reveals. They may skip it entirely, missing potentially important content.

This rule maps to WCAG 2.0, 2.1, and 2.2 Success Criterion 4.1.2: Name, Role, Value (Level A), which requires that all user interface components have a programmatically determinable name. It also applies under Section 508, Trusted Tester guidelines, and EN 301 549 (9.4.1.2). The user impact is considered serious because it directly blocks access to content for assistive technology users.

How to fix it

The simplest and most reliable approach is to place descriptive text directly inside the <summary> element. This text should clearly indicate the topic or purpose of the hidden content.

If the <summary> element cannot contain visible text — for instance, when it uses a CSS background image or an icon — you can provide a hidden accessible name using one of these methods:

• aria-label: Provide the accessible name directly as an attribute value.
• aria-labelledby: Point to another element’s id that contains the accessible name text.
• title: Supply a tooltip that also serves as the accessible name. Note that title is the least reliable option, as it’s not consistently exposed across all assistive technologies.

Note that the summary-name rule is separate from the button-name rule because <summary> elements have different inherent semantics than <button> elements, even though both are interactive controls.

Examples

Failing: empty <summary> element

This <summary> has no text or accessible name, so screen readers cannot convey its purpose.

<details>
  <summary></summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Failing: <summary> with only a non-text element and no alternative

The image inside the <summary> has no alt text, so there is still no accessible name.

<details>
  <summary>
    <img src="info-icon.png">
  </summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passing: <summary> with visible text

The most straightforward fix — place clear, descriptive text inside the <summary>.

<details>
  <summary>Return policy</summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passing: <summary> with an image that has alt text

When using an image inside <summary>, the alt attribute provides the accessible name.

<details>
  <summary>
    <img src="info-icon.png" alt="Return policy">
  </summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passing: <summary> with aria-label

When visible text isn’t feasible, aria-label provides a hidden accessible name.

<details>
  <summary aria-label="Return policy"></summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passing: <summary> with aria-labelledby

The aria-labelledby attribute references another element that contains the name text.

<span id="return-heading" hidden>Return policy</span>
<details>
  <summary aria-labelledby="return-heading"></summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Learn more:

Deque Reference

Deque University - How To Fix

→