# Summary must have discernible text

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/summary-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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.

```html
<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.

```html
<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>`.

```html
<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.

```html
<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.

```html
<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.

```html
<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>
```