Acordeón

El acordeón es una lista desplegable ordenada verticalmente, que oculta o permite ver secciones y contenido.

Vista Previa

Figma

Usos

Cuándo usar

En casos en los que deseemos mostrar mucho contenido en poco espacio.

Contenido separado en secciones colapsables.

Dentro de una sección para organizar la información relacionada.

Reduce el desplazamiento colapsando el contenido no esencial.

Los acordeones permiten dividir paso a paso un formulario complejo en secciones más pequeñas.

Cuándo no usar

En los casos en los que necesitamos que el usuario vea o lea información por obligación, ya que podría estar escondida detrás de un clic.

Con poco contenido, porque si es probable que el usuario vea toda la información de una vez, no necesita una división por secciones y un clic más para acceder a ese contenido. Los acordeones aumentan la carga cognitiva y el coste de la interacción, ya que los usuarios tienen que tomar decisiones sobre en qué encabezados hacer clic.

Comportamiento

El componente acordeón tiene dos estados principales: colapsado y expandido. El icono del chevrón al final del acordeón indica en qué estado se encuentra el acordeón. El chevrón apunta hacia abajo para indicar que está colapsado y se puede abrir en esa dirección o hacia arriba para indicar que está expandido y se puede colapsar en la dirección que indica el chevrón.

Los acordeones comienzan por defecto en el estado colapsado con todos los paneles de contenido cerrados. Empezar en un estado colapsado da al usuario una visión general de alto nivel de la información disponible. El usuario puede ampliar cada sección del acordeón de forma independiente, lo que permite abrir varias secciones a la vez.

Comportamiento

Collapse

Expand

Estados

Visualización del componente acordeón en estado por defecto

Default

Hover

Visualización del componente acordeón en estado enfocado

Focus

Visualización del componente acordeón en estado deshabilitado

Disabled

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El título de cada cabecera de acordeón está contenido en un elemento con role="button". Esto asegura que las tecnologías de asistencia lo anuncien correctamente.

Los usos de alternar plegables tabindex="0"hacen posible acceder a él usando la tecla de tabulación o mover el foco mediante programación.

Reduce el scroll colapsando contenido no esencial.

Si el acordeón es visible, el elemento botón tiene el atributo aria-expanded establecido en true. Si el panel no está visible, aria-expanded tiene valor false para transmitir la funcionalidad de expansión y contracción a las tecnologías de asistencia.

Si el panel del acordeón esta deshabilitado, la propiedad aria-disabled se establece en true y no permite expandirlo.