Respuesta corta: aria-expanded va en el botón que abre y cierra algo: true mientras el contenido está a la vista y false mientras no lo está. Así el lector de pantalla puede anunciar el estado. MDN recomienda acompañarlo de aria-controls, y no va en elementos que no controlan nada.
Qué hace aria-expanded
MDN describe aria-expanded como el atributo que indica si un control está expandido o contraído, y por tanto si los elementos que controla se ven o están ocultos. Va en el control enfocable que los muestra u oculta, no en el contenido.
Los menús, los diálogos y los paneles de un acordeón funcionan así. aria-controls marca la relación entre el control y el contenido, y aria-expanded da el estado. Los elementos nativos como details y summary informan de su estado sin él, como midió nuestra guía de details y summary.
Dónde va
| Control | aria-expanded va en | Además |
|---|---|---|
| Una sección que se muestra y se oculta | El botón que la abre y la cierra | aria-controls con el id de la sección |
| Un desplegable de navegación | El botón que abre la lista de enlaces | Normalmente sin rol menu de ARIA: un botón desplegable |
| Un menú de acciones | El botón de menú | aria-haspopup en menu o true |
| Contenido que nunca se pliega | En nada | El atributo indica control, así que no lo pongas |
Según MDN y los patrones de autoría ARIA del W3C, en inglés, consultados el 5 de noviembre de 2026.
La regla de MDN para los botones: un botón que muestra u oculta un widget lleva aria-controls con el id del widget y aria-expanded con su estado actual. En un menú, el botón lleva aria-expanded en true mientras el menú se ve, y en false o nada mientras está oculto.
Los desplegables de navegación son desplegables, no menús
El ejemplo de navegación del W3C usa la palabra menú en sentido coloquial, pero evita el rol menu de ARIA. Ese rol promete el comportamiento de teclado complejo que las tecnologías de apoyo esperan de un menú de aplicación, y la navegación típica de una web no lo necesita.
Así que cada desplegable es un botón que muestra una lista de enlaces y lleva aria-expanded. Nuestra guía de navegación web trata qué va en esas listas.
Teclas y foco
El patrón del W3C para desplegables pide dos teclas en el botón: Enter y Espacio, las dos, abren y cierran el contenido. Su ejemplo de navegación añade dos detalles: Escape cierra el desplegable abierto cuando el foco está dentro, y mover el foco fuera también lo cierra.
El estado debe actualizarse con cada forma de abrir y cerrar. Si un script cierra el panel pero deja aria-expanded en true, el lector de pantalla anuncia una sección abierta que ya no está. Nuestra guía de qué es ARIA explica por qué un estado equivocado es peor que ninguno.
Cómo añadir aria-expanded
- Usa un elemento button para el control que abre y cierra el contenido.
- Dale un id al contenido y apunta a él con aria-controls desde el botón.
- Pon aria-expanded en false mientras el contenido está oculto.
- Cámbialo a true cuando el contenido se ve, y de vuelta cuando se oculta.
- Usa un button para que Enter y Espacio lo activen, y que el mismo script actualice aria-expanded.
- En la navegación, sigue el ejemplo del W3C: cierra el desplegable con Escape y cuando el foco sale de él.
- Tras cada forma de abrir y cerrar, mira el estado en el árbol de accesibilidad.
Qué encontramos en nuestra cabecera
El 5 de noviembre de 2026 probamos el botón de Servicios de nuestra cabecera, en la página de inicio y en una guía, en los dos idiomas. Es un elemento button con aria-controls apuntando al panel que abre.
Un clic, Enter y Espacio abrieron y cerraron el panel, y cada vez aria-expanded coincidió con lo que se veía: true con el panel abierto y false con el panel cerrado. El árbol de accesibilidad de Chrome dio el mismo estado.
También sigue el ejemplo de navegación del W3C. Escape cerró el panel abierto y dejó el foco en el botón, y al pasar con Tab del último enlace del panel, este se cerró también.
Antes de publicar
- aria-expanded está en el control, no en el contenido.
- Su valor coincide con lo que se ve tras cada acción.
- El control apunta al contenido con aria-controls.
- Los desplegables de navegación son botones desplegables, salvo que de verdad necesiten comportamiento de menú.
- Enter, Espacio y Escape hacen lo que se espera.
- Los elementos que no controlan nada no llevan aria-expanded.
Recuerdaaria-expanded es una promesa sobre lo que se ve. Ponlo en el botón, déjalo en true solo mientras el contenido se ve y prueba cada forma de cerrar.
Nuestro servicio de diseño web hace menús y paneles que informan así de su estado.
Respuestas rápidas sobre aria-expanded
¿Qué hace aria-expanded?
Indica si un control está expandido o contraído, y por tanto si el contenido que controla se ve o está oculto. Así lo describe MDN, y el lector de pantalla puede anunciar el estado cuando la gente llega al control.
¿Dónde va aria-expanded?
En el control que abre y cierra el contenido, normalmente un botón, no en el contenido. MDN añade que el botón debe llevar aria-controls con el id del contenido que muestra u oculta.
¿Un desplegable de navegación debe usar el rol menu?
Normalmente no. El ejemplo de navegación del W3C usa botones desplegables. La navegación típica de una web no necesita el comportamiento de teclado complejo que las tecnologías de apoyo esperan de un menú.
¿Qué teclas deben abrir y cerrar un desplegable?
Enter y Espacio, según el patrón desplegable del W3C. En su ejemplo de navegación, Escape también cierra el desplegable abierto cuando el foco está dentro, y mover el foco fuera también lo cierra.
¿Puedo poner aria-expanded en cualquier elemento?
Solo en los elementos que controlan algo que se expande. MDN avisa de que el atributo indica control, así que no debe aparecer en elementos que no abren ni cierran nada.
Fuentes
Consultadas el 5 de noviembre de 2026. En inglés: MDN Web Docs, ARIA: aria-expanded attribute; Iniciativa de Accesibilidad Web del W3C, Disclosure (Show/Hide) Pattern, Example Disclosure Navigation Menu y Menu Button Pattern. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.