Accessibility Guide for section508.22.a
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.