Índice de páginas
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 #
- Título: Encabezado que describe el contenido del componente. Debe estar visible o sólo para lectores de pantalla en su defecto.
- 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.
- Subtítulo opcional: Breve descripción que acompaña al título.
- Contenido: Puedes incluir texto o cualquier otro componente.
- 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. - 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 unid
único, unaria-controls
que apunta al contenido del item y unaria-expanded
que cambia a true o false según si está contraído o no. - La etiqueta de texto
Mostrar/Ocultar
tiene unaria-hidden
para ocultarla a lectores de pantalla. Tras el encabezado se encuentra una etiqueta sólo visible para lectores de pantalla que anunciaHaz 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
Qué usar | Dónde | Función |
---|---|---|
idPrefix |
Parámetro Nunjucks dentro del componente. | Permite crear id únicos para los items. |
id |
Dentro del parámetro Nunjucks attributes |
Identifica todo el componente. |
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.
1
Acordeón
2
Contraíble
3
Detalles
Título
Contenido
4
Interruptor
- 1Acordeó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.
- 2Contraí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.
- 3Detalles: Funciona como un colapsible pero es un elemento nativo de los navegadores, se recomienda su uso cuando el contenido no se quiere destacar especialmente.
- 4Interruptor: Funcionalmente nos permite activar o desactivar elementos u opciones, se pueden usar para mostrar funcionalidades más complejas como filtros, búsquedas avanzadas, etc.