Índice de páginas
Acordeón histórico
La diferencia entre el acordeón histórico y el acordeón reside en que en este primero, la información que se presenta tiene un orden cronológico y habitualmente está referido a pasos que debe realizar el usuario. Al igual que en el caso del acordeón, puede haber varios elementos desplegados.
Í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.
- Línea cronológica: Indica el orden de los items y puede transmitir en qué situación o estado se encuentra cada uno de ellos a través del color de la marca y discontinuidad de la línea.
- 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.
- Líneas de separación: Aísla el contenido entre contraíbles.
- 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.
Items #
Estado: pasado
Estado: actual
Estado: pasado
Estado: actual
Estado: pendiente
Item silenciado #
Se muestra de color gris, ya que la información en su interior se encuentra cerrada o expirada.
Item pasado #
Se muestra de color azul, ya que la información se encuentra vigente aunque la persona que lo consulta se encuentre en un item posterior.
Item actual #
Se muestra de color blanco con borde azul, con un tamaño mayor que el resto. También puede encontrarse silenciado. Es la información que al usuario le interesa consultar en el presente.
Item pendiente #
Se muestra de color blanco con borde gris y alberga información posterior al momento actual.
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
. - Los nodos de cada item tienen un
role=img
y una etiqueta sólo para lectores de pantalla que anuncia el estado que representa: pasado, actual o pendiente. - 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. |