Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Acordeón
Acordeón
El acordeón es una lista desplegable ordenada verticalmente, que oculta o permite ver secciones y contenido.
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
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 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.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
