Acordeones con button y aria-expanded

Un acordeón es un conjunto de encabezados que se expanden y contraen para mostrar contenido. Cada sección puede abrirse por separado, a diferencia de las pestañas.

Convierta cada encabezado del acordeón en un button real. Los botones se pueden enfocar, funcionan con Enter y Space y se anuncian automáticamente a los lectores de pantalla.

Tenga cuidado con usar un div en el encabezado como elemento pulsable. No se puede enfocar, ignora el teclado y no informa a la tecnología de asistencia sobre su función.

Añada aria-expanded al botón para que los lectores de pantalla anuncien si está contraído o expandido. Este único estado es lo que hace accesible un acordeón.

Cuando el usuario active el botón, cambie aria-expanded entre true y false. Manténgalo sincronizado con la visibilidad real del panel.

Use aria-controls en el botón y asígnele el id del panel que abre. Así, los usuarios sabrán qué contenido muestra este encabezado.

Cuando una sección esté cerrada, añada el atributo hidden a su panel. Esto lo elimina de la página y del árbol de accesibilidad hasta que vuelva a abrirse.

Coloque cada botón dentro de un encabezado real, como h3. Así, los usuarios de lectores de pantalla podrán saltar de una sección a otra mediante la navegación por encabezados.

Un único elemento para mostrar y ocultar es una disclosure, no un conjunto de pestañas. Solo necesita un botón con aria-expanded; no necesita roles tablist ni tab.

Después de cambiar el estado, deje el foco en el button que pulsó el usuario. No lleve el foco al panel; esto desorienta a los usuarios de teclado.

Como el botón contiene su propio state, el lector de pantalla anuncia «expandido» o «contraído» cada vez. Los usuarios siempre saben qué ocurrirá al activarlo.

Ha aprendido que el encabezado de un acordeón es un button with aria-expanded dentro de un encabezado. Cambie el estado, señale el panel y ocúltelo cuando esté cerrado.