El summary debe tener texto perceptible

Todos los elementos summary que se usan como control para un elemento details deben tener un nombre accesible y perceptible.

Los usuarios de lectores de pantalla no pueden discernir el propósito de los elementos summary que carecen de un nombre accesible. Esto les impide entender el propósito del control y probablemente significa que no encontrarán la información oculta dentro del elemento details.

El método más confiable para crear un elemento summary accesible es colocar texto dentro del elemento summary, como en este ejemplo:

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

Como alternativa, también puedes dar a un elemento summary un texto alternativo oculto. Esto es ideal para situaciones donde el summary no tiene texto visible, como cuando se usa una imagen de fondo CSS. Hay varias formas de proporcionar una alternativa oculta, incluyendo:

• Usar el atributo aria-label="texto alternativo aquí".
• Usar el atributo aria-labelledby="id-del-elemento-con-texto".
• Usar el atributo title="alternativa de tooltip aquí".

Qué verifica esta regla de accesibilidad

Esta regla asegura que todos los elementos summary usados como control para un elemento details tengan un nombre perceptible y accesible.

Learn more:

Deque Reference

Deque University - How To Fix

→