Expandible

Un componente de colapso es un elemento de interfaz de usuario que se utiliza para ocultar o mostrar contenido de manera dinámica.

Vista Previa

Figma

Usos

Cuándo usar

Para reducir la sobrecarga visual y mejorar la organización del contenido: Los componentes de colapso pueden utilizarse para ocultar contenido no esencial y reducir la sobrecarga visual en una página web o aplicación móvil.

Para mostrar contenido de manera progresiva: Los componentes de colapso pueden utilizarse para mostrar contenido de manera progresiva, permitiendo al usuario acceder a más información a medida que lo necesita.

Para facilitar la navegación: Los componentes de colapso pueden utilizarse para crear menús desplegables o para mostrar contenido relacionado de manera dinámica.

Cuándo no usar

Para facilitar la navegación: Los componentes de colapso pueden utilizarse para crear menús desplegables o para mostrar contenido relacionado de manera dinámica.

Comportamiento

El componente de colapso suele tener un título o descripción que hace una introducción al contenido oculto y un botón que permite al usuario expandir o contraer el contenido. Cuando el usuario hace clic en el botón el contenido se muestra o se oculta, según corresponda.

Los componentes de colapso se utilizan a menudo para reducir la sobrecarga visual y mejorar la organización del contenido en una página web o aplicación móvil. También se pueden utilizar para mostrar contenido de manera progresiva, permitiendo al usuario acceder a más información a medida que lo necesita.

Acciones

Ver menos

Estados

Default

Hover

Focus

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 acordeón tiene un role="button"definido. Esto asegura que las tecnologías de asistencia lo anuncien correctamente.

El acordeón tiene tabindex="0" para hacer posible acceder a él usando la tecla de tabulación o mover el foco mediante programación.

El acordeón reduce el scroll colapsando contenido no esencial.

El acordeón también usa el atributo aria-expanded y aria-controls para transmitir la funcionalidad de expansión y contracción a las tecnologías de asistencia.

El acordeón tiene el atributo aria-label.