Fondo inerte y aria-modal

Aunque el foco esté atrapado, el contenido que queda detrás del modal sigue estando en el DOM. Un lector de pantalla puede acceder a él si no lo impide.

El atributo inert hace que un elemento y todos sus elementos secundarios no puedan recibir el foco ni clics, y que la tecnología de asistencia los omita, todo de una vez.

Cuando se abra el modal, añada inert a todo lo que quede fuera de él. Así, nadie podrá acceder realmente a la página que queda detrás.

Cuando se cierre el modal, elimine el atributo inert para que la página vuelva a ser interactiva. Si lo olvida, la página quedará bloqueada.

Un dialog nativo abierto con showModal() hace que el resto de la página sea inert automáticamente, por lo que obtiene esta protección sin código adicional.

Añadir aria-modal establecido en true informa a la tecnología de asistencia de que el contenido situado fuera de este diálogo no está disponible mientras permanezca abierto.

Tenga cuidado: aria-modal solo informa al lector de pantalla. No bloquea realmente el foco ni los clics, por lo que sigue necesitando inert.

El patrón más sólido combina inert en el fondo con aria-modal en el diálogo. Uno impone el límite y el otro lo comunica.

Antes de que inert tuviera una compatibilidad amplia, los desarrolladores añadían aria-hidden al fondo. Esto ocultaba el contenido a los lectores, pero no impedía el foco del teclado.

Un error clásico consiste en aplicar aria-hidden de forma tan amplia que también cubra el diálogo. Asegúrese de que su modal quede fuera de la región oculta.

Abra el árbol de accesibilidad del navegador con el modal abierto. Confirme que la página que queda detrás ha desaparecido y que solo permanece el diálogo. ✅

Ha aprendido a hacer que la página que queda detrás sea inert y a declarar aria-modal, para que el modal sea realmente lo único a lo que puedan acceder los usuarios. 🎯