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
• Items
• Accesibilidad

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. 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.
3. 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.
4. Subtítulo opcional: Breve descripción que acompaña al título.
5. Contenido: Puedes incluir texto o cualquier otro componente.
6. Líneas de separación: Aísla el contenido entre contraíbles.
7. 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.

Items #

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 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.
• 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