DESY

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

Índice de apartados de esta página

Acordeón

Se trata de un listado de elementos organizados verticalmente que permite mostrar y ocultar el contenido de dichos elementos. En general se usan para agrupar información que se consume por bloques, como preguntas frecuentes, detalles de un elemento, fases de un proceso, etc.

Anatomía

Anatomía de un acordeón
  1. Título: Encabezado que describe el contenido del componente. Debe estar visible o sólo para lectores de pantalla en su defecto.
  2. Título del item: Describe el contenido del contraíble. Si se ha definido un nivel de encabezado del componente, éste será de nivel siguiente.
  3. Subtítulo opcional: Breve descripción que acompaña al título.
  4. Contenido: Puedes incluir texto o cualquier otro componente.
  5. Botón: Abre y cierra el contenido. Usa la variable "showControl": true para añadir un botón superior que accione todos al mismo tiempo.
  6. Líneas de separación: Aísla el contenido entre contraíbles.

Diferencias entre componentes

Existen varios componentes que tienen una apariencia y funcionamiento similar, aunque deben usarse uno u otro dependiendo de la finalidad y el contexto.

1

Acordeón

2

Contraíble

3

Detalles

Título

Contenido

4

Interruptor

  1. 1
    Acordeón: Debe tener múltiples elementos relacionados entre sí, y tiene opciones para ajustar el comportamiento de cuando se abren o cierran al interactuar con uno de ellos. Si existe una cronología entre ellos utilizamos el acordeón histórico.
  2. 2
    Contraíble: Es un solo elemento que se usa de manera aislada. Su uso es similar a un detalles, pero el colapsible es un elemento con más peso visual y que necesita Javascript para funcionar.
  3. 3
    Detalles: Funciona como un colapsible pero es un elemento nativo de los navegadores, se recomienda su uso cuando el contenido no se quiere destacar especialmente.
  4. 4
    Interruptor: Funcionalmente nos permite activar o desactivar elementos u opciones, se pueden usar para mostrar funcionalidades más complejas como filtros, búsquedas avanzadas, etc.

Buenas prácticas

  • El título tienen que hacer referencia clara al contenido que del elemento.
  • El contenido del acordeón no debe incluir interacciones muy complejas, como buscadores, otro acordeón, etc. para estos casos usar un toggle.
  • Si hay más de 7 elementos se recomienda incluir un botón de desplegar todos que facilite la búsqueda de contenido. especialmente si el contenido está relacionado entre sí.
  • Existe la posibilidad de que el elemento activo se cierre al abrir otro o que se mantenga abierto, esto dependerá del tipo de contenido que contenga.
  • Cerrado automático: si el contenido es independiente entre si o si la información se va a consumir principalmente desde el móvil.
  • Mantener elementos abiertos: si el contenido está relacionado entre sí, por ejemplo las fases de un proceso.