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.

Índice de apartados de esta página

• Anatomía
• Accesibilidad
• Buenas prácticas
• Diferencias entre componentes

Anatomía #

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: Puedes cambiar el texto o sustituirlo por un icono con los parámetros "show" y "hide". 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.

Accesibilidad #

Cómo funciona #

• Encabezados de nivel configurable (<h1>-<h6>) seguidos del panel de contenido contraído.
• Dentro de cada encabezado hay un elemento <button> con un id único, un aria-controls que apunta al contenido del item y un aria-expanded que cambia a true o false según si está contraído o no.
• La etiqueta de texto Mostrar/Ocultar tiene un aria-hidden para ocultarla a lectores de pantalla. Tras el encabezado se encuentra una etiqueta sólo visible para lectores de pantalla que anuncia Haz click en el botón anterior para mostrar u ocultar.
• Cuando el primer item recibe el foco, la persona puede desplazarse entre ellos con las flechas del teclado y expandir el contraíble accionado la tecla enter o espacio.

Basado en el patrón accordion de W3C

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.

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.