Summary must have discernible text

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:

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

What this Accessibility Rule Checks

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

Learn more:

Deque Reference

Deque University - How To Fix

→