DESY

Sistema de Diseño del Gobierno de Aragón.

Detalles

Son elementos desplegables que incluyen información adicional generalmente en forma de texto.

Índice de apartados de esta página

Anatomía

Título

Contenido

  • Título: Indica el contenido que se va a encontrar.
  • Flecha: Indica si el elemento está abierto o cerrado según su posición.
  • Contenido: Es libre pudiendo incluir cualquier otro componente.

Accesibilidad

Cómo funciona

Dentro de la etiqueta details conviven la etiqueta summary, que contiene el texto con apariencia de enlace, y el contenido del desplegable.

Qué tener en cuenta

Todos los atributos de accesibilidad se encuentran por defecto en la configuración del componente.

Buenas prácticas

  • El título debe ser explicativo del contenido que se va a desplegar.
  • Se recomienda que el título no sea especialmente largo.
  • En general se recomiendo que el contenido no incluya interacciones muy complejas, como buscadores, acordeones, otros componentes de detalles, etc. para ello usar Toggles.