Acordeón
El acordeón es un componente de interfaz de usuario interactivo que se usa para mostrar una lista de encabezados. Al hacer clic en un encabezado, se muestra u oculta el panel de contenido asociado, un mecanismo conocido como divulgación progresiva. El objetivo principal es estructurar el contenido, ayudando a los usuarios a escanearlo y comprender su organización.
Cuándo usar un acordeón:
Use el componente de acordeón principalmente para gestionar grandes cantidades de información, limitando y priorizando el contenido visible y reduciendo así la carga cognitiva del usuario. Permite a los visitantes explorar información más detallada a su propio ritmo.
- Organice secciones de preguntas frecuentes o de preguntas frecuentes donde solo sea necesario que la pregunta sea visible inicialmente.
- Agrupe contenido o información relacionada que sea secundaria al propósito principal de la página.
- Divida la información compleja en fragmentos lógicos y fáciles de digerir.
Cuándo evitar un acordeón:
Evite usar acordeones para información que los usuarios deban ver de inmediato o contenido que necesite comparar fácilmente, ya que ocultar contenido requiere una interacción adicional.
Anatomía y especificaciones visuales
En esta sección, documentamos los elementos específicos que requieren un estilo coherente, usando la paleta de colores y los estándares tipográficos definidos por IKN.
Anatomía de los componentes:
Un acordeón consta de las siguientes partes principales:
- Encabezado/Título del acordeón: la región en la que se puede hacer clic y que contiene el texto de resumen.
- Panel de contenido: el área expandible que contiene la información detallada.
- Ícono indicador: El elemento visual (por ejemplo, una flecha) que señala el estado de contracción o expansión del componente.
Acordeones IKN
Interacción y comportamiento
Esta sección documenta cómo debe comportarse el acordeón para cubrir las expectativas del usuario y los principios de coherencia.
- Comportamiento de alternancia: Al hacer clic o pulsar en cualquier parte del área del encabezado de un acordeón contraído, se expandirá el panel de contenido asociado. Al hacer clic o pulsar en un encabezado expandido, se contraerá el panel de contenido.
- Indicación de estado: El ícono indicador debe cambiar o voltear (por ejemplo, pasar de un signo más a uno menos, o voltear un chevrón) para proporcionar una indicación visual clara del estado del componente (expandido o contraído).
- Animación: los paneles de contenido deben abrir y cerrar suavemente (por ejemplo, mediante animación vertical) para evitar transiciones bruscas y proporcionar una experiencia de usuario previsible.
Notas sobre accesibilidad e implementación
Dado que IKN es un sitio web gubernamental, la accesibilidad es un estándar de diseño fundamental. El cumplimiento de las normas de accesibilidad es un requisito para el lanzamiento de productos.
Requisitos de accesibilidad (Sección 508 / WCAG):
- Contraste de color: mantenga una relación de contraste mínima de 4.5:1 entre el texto y el color de fondo en todos los estados (predeterminado, al pasar el cursor y al enfocar) para cumplir con las Pautas de Accesibilidad para el Contenido Web (WCAG).
- Navegación mediante teclado: El encabezado del acordeón debe poder enfocarse y ser totalmente operable mediante los controles del teclado (teclas Espacio o Intro). La navegación mediante teclado es una prueba fundamental de accesibilidad.
- Atributos ARIA: Los desarrolladores deben incluir los roles y atributos ARIA apropiados (por ejemplo, aria-expanded) para comunicar el estado actual del componente a los usuarios de lectores de pantalla.
- Zoom y reajuste del contenido: El diseño debe permitir a los usuarios ampliar el texto hasta un 200% sin que se altere el diseño ni se pierda contenido.
Notas de implementación:
- Reutilización: el acordeón es un componente, definido como una "parte reutilizable de una interfaz de usuario". El objetivo es proporcionar fragmentos de código limpios y reutilizables para que los desarrolladores no tengan que escribir código para cada elemento desde cero.
- Clases de utilidad: use las clases de utilidad de estilo USWDS para anular estilos o para la creación rápida de prototipos, ya que estas clases se asignan directamente a tokens de diseño y tienen un alcance limitado a una única propiedad CSS (por ejemplo, background-color, border-style).
Pruebas y control de calidad (para evaluadores):
Probar el componente garantiza que sea consistente y accesible.
- Pruebas funcionales: verifique que el componente abra y cierre el contenido de forma fiable en diferentes navegadores y puntos de interrupción.
- Pruebas de accesibilidad: realice pruebas de accesibilidad básicas, incluidas pruebas automatizadas (por ejemplo, con axe DevTools), comprobaciones manuales del contraste de color y la navegación con teclado, y comprobación del zoom y el reajuste del contenido.
- Coherencia visual: verifique que el estilo (colores, fuentes, espaciado) se ajuste estrictamente a las especificaciones definidas por IKN y a las pautas establecidas por USWDS.
Especificaciones adicionales
Para obtener información adicional sobre especificaciones, pautas, accesibilidad y uso, consulte el componente acordeón en el sitio web de USWDS:
USWDS - Acordeón