# Summary must have discernible text

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

All `summary` elements used as a control for a `details` element must have a discernible, accessible name.

Screen reader users are unable to discern the purpose of `summary` elements that lack an accessible name. This prevents them from understanding the purpose of the control and will likely mean they won't find information hidden with the `details` element.

The most reliable method for creating an accessible `summary` element is to put a text inside the `summary` element, like in this example:

```html
<details>
  <summary id="text">Title</summary>
  ...
</details>
```

As an alternative, you can also give a `summary` element a hidden alternative text. This is ideal for situations where the `summary` has no visible text, such as when using a CSS background image. There are a few ways to provide a hidden alternative, including:

* Using the `aria-label="text alternative here"` attribute.
* Using the `aria-labelledby="id-to-element-with-text"` attribute.
* Using the `title="tooltip alternative here"` attribute.

<h3>What this Accessibility Rule Checks</h3>

This rule ensures that all summary elements used as a control for a details element have a discernible and accessible name.