El atributo aria-expanded es una propiedad WAI-ARIA que se utiliza para indicar si un elemento interactivo controla actualmente un contenedor colapsable que está expandido o colapsado. Al aplicar este atributo a elementos como botones o enlaces que activan un menú, acordeón o panel oculto, informas a los usuarios de tecnologías de asistencia sobre el estado del contenido con el que están interactuando. El uso correcto garantiza que los lectores de pantalla anuncien si una sección está abierta o cerrada, permitiendo a los usuarios navegar por tu sitio web con confianza.
¿Cuál es el propósito de aria-expanded en el diseño web moderno?
Según las especificaciones W3C WAI-ARIA, aria-expanded indica si un elemento interactivo controla un contenedor colapsable que está actualmente expandido o colapsado. Cuando un usuario hace clic en un botón que alterna un menú de navegación oculto, el lector de pantalla necesita saber si ese menú está visible u oculto en ese momento. Sin este atributo, el navegador no proporciona una señal programática sobre el estado de alternancia, dejando a los usuarios de tecnologías de asistencia adivinando si su acción abrió con éxito la sección deseada. Este estado debe ser alternado dinámicamente por JavaScript cada vez que el usuario interactúa con el controlador.
Cómo implementar aria-expanded correctamente
La implementación requiere tanto marcado estático como actualizaciones dinámicas. Defines el estado inicial del componente en tu HTML, estableciéndolo normalmente en ‘false’ si el contenido está oculto por defecto. Cuando el usuario hace clic en el activador, tu script debe actualizar el valor del atributo a ‘true’ a medida que el contenido se vuelve visible. Este es un patrón común para componentes de acordeón, alternancias de menús móviles y filtros desplegables que se encuentran en páginas de productos de comercio electrónico. Asegúrate siempre de que el elemento activador sea enfocable y de que el cambio de estado sea inmediato.
¿Cuándo debes usar aria-expanded frente a otros atributos?
Decidir entre aria-expanded y otros estados implica entender qué controla el elemento. Utiliza aria-expanded específicamente cuando el elemento es un controlador que cambia la visibilidad de un contenedor. No lo utilices para elementos que no controlan la visibilidad de una región separada. Por ejemplo, un botón simple que abre una nueva página no debe usar este atributo. En su lugar, utilízalo para patrones de UI que modifican el modelo de objetos del documento dentro del mismo contexto de página.
| Atributo | Caso de uso principal | Elemento de destino |
|---|---|---|
| aria-expanded | Secciones colapsables | Botones/Enlaces |
| aria-hidden | Ocultar contenido | Contenedores/Divs |
| aria-haspopup | Activadores de menú | Botones/Divs |
Cómo aplica Alien Road aria-expanded en nuestros flujos de trabajo
En Alien Road, integramos la accesibilidad en nuestro proceso de diseño y construcción desde la etapa inicial del wireframe. Cuando construimos un acordeón o navegación personalizada para un cliente, documentamos los requisitos de cambio de estado en nuestros archivos de especificación de proyectos. Durante la fase de desarrollo, nuestros ingenieros escriben funciones de JavaScript que mapean el evento de clic de un elemento de UI a la actualización del valor aria-expanded de ese mismo elemento. Realizamos comprobaciones manuales utilizando lectores de pantalla para verificar que el estado se anuncia correctamente. Esto garantiza que cada componente interactivo cumpla con los estándares básicos de accesibilidad antes de que el sitio se publique para nuestros clientes.
Errores comunes al usar aria-expanded
Un error frecuente es olvidar actualizar el atributo cuando el usuario interactúa con la interfaz. Si el botón dice ‘expanded=true’ pero el contenido está visualmente oculto, la experiencia del usuario se vuelve confusa. Otro error es aplicar el atributo a elementos estáticos que no activan ninguna expansión. Asegúrate de que tu script maneje casos extremos, como cerrar un menú abierto cuando el usuario hace clic fuera del área activa. Esto evita que el estado se desincronice con la representación visual de la página.
- Usa siempre los valores booleanos correctos: ‘true’ o ‘false’.
- Asegúrate de que tu JavaScript actualice el atributo en el elemento activador, no en el contenedor.
- Verifica que el elemento de control sea enfocable de forma nativa, como una etiqueta de botón.
- Prueba tu implementación con un lector de pantalla para confirmar el anuncio del cambio de estado.
¿Por qué es importante el estado del controlador?
El estado del controlador proporciona contexto al usuario con respecto al resultado de su interacción. Si un usuario presiona una tecla para abrir un menú, el atributo aria-expanded le informa que la acción fue exitosa y que ahora hay una nueva sección de contenido para explorar. Sin esto, el usuario podría asumir que la página no responde o está rota. Al mantener el atributo preciso, creas una experiencia confiable que permite a todos los visitantes navegar por tu contenido sin necesidad de confirmación visual de la transición.
¿Qué patrones de UI requieren aria-expanded?
Varios patrones de UI dependen de este atributo para mantener la accesibilidad. Los acordeones son el ejemplo más común, donde múltiples encabezados controlan la visibilidad de su respectivo contenido de cuerpo. Los menús desplegables en las barras de navegación también utilizan esto frecuentemente para indicar la presencia de submenús. Además, los paneles de filtro en sitios de comercio electrónico suelen utilizar esto para gestionar la visibilidad de los criterios de búsqueda. En una cuenta típica que gestionamos, vemos estos patrones en páginas de listas de productos donde los usuarios necesitan refinar sus búsquedas.
- Acordeones: Alternar la visibilidad de los bloques de contenido.
- Menús de navegación: Indicar si los submenús están visibles.
- Filtros: Gestionar la visualización de los criterios de búsqueda de la barra lateral.
- Diálogos modales: Gestionar el estado de expansión del activador.
Por dónde empezar esta semana
Comienza auditando tus elementos interactivos más utilizados en tu sitio web. Identifica todos los botones o enlaces que alternan la visibilidad de otro contenido. Comprueba si estos elementos tienen actualmente asignado correctamente el atributo aria-expanded y si se actualizan dinámicamente. Si encuentras elementos que carecen de estos atributos, actualiza tus scripts para gestionarlos en consecuencia. Para sitios más grandes, céntrate primero en la navegación principal y en cualquier widget de filtro o acordeón, ya que estos tienen el mayor impacto en la navegación del usuario y en la accesibilidad general del sitio.
Preguntas frecuentes
¿Debo usar aria-expanded en un enlace?
Sí, puedes usar aria-expanded en un enlace, pero generalmente se prefiere usar un elemento de botón si la acción es puramente un cambio de estado de UI. Los enlaces están destinados típicamente a la navegación a una nueva URL. Si debes usar un enlace para una acción de alternancia, asegúrate de que sea totalmente accesible y de que el atributo aria-expanded refleje correctamente el estado actual del contenedor asociado.
¿Maneja aria-expanded automáticamente la ocultación de contenido?
No, aria-expanded no controla la visibilidad real del elemento. Solo comunica el estado a la tecnología de asistencia. Aún debes usar CSS, como display: none o visibility: hidden, para ocultar físicamente el contenido de la pantalla. El atributo simplemente actúa como una etiqueta para describir el estado actual de ese contenedor a los usuarios que dependen de lectores de pantalla.
¿Qué valor debo usar si no hay estado expandido?
Si un elemento no controla una región colapsable, no debes usar el atributo aria-expanded en absoluto. Aplícalo solo a elementos que sirvan como activadores de contenido que se puede alternar entre estados visibles y ocultos. Incluir el atributo en elementos no colapsables puede causar confusión a los usuarios de lectores de pantalla al implicar una funcionalidad que en realidad no existe.
¿Cómo pruebo la implementación de aria-expanded?
Para probar tu implementación, utiliza un lector de pantalla como NVDA o VoiceOver. Navega hasta el elemento activador y observa cómo el lector de pantalla anuncia el estado. Cuando activas el activador, el lector de pantalla debe actualizar su estado para indicar que la sección ahora está expandida. Si el anuncio no cambia, es probable que tu JavaScript esté fallando al actualizar el valor del atributo correctamente durante la interacción.
Sigue leyendo: Diseño y desarrollo web · Diseño web