Respuesta corta: usa el elemento dialog y ábrelo con showModal() cuando la persona deba terminar algo antes de volver a la página. El navegador deja entonces inerte el resto de la página, pone el foco dentro y permite cerrarlo con Escape. Dale un nombre y un botón visible para cerrarlo, y devuelve el foco a donde estaba.
Modal o no modal
MDN describe el elemento dialog como un cuadro de diálogo modal o no modal. Uno modal bloquea el resto de la página y lo deja inerte. Uno no modal deja seguir usando la página que lo rodea.
| Cómo lo abres | El resto de la página | Escape |
|---|---|---|
| showModal() | Inerte, detrás de un fondo | Lo cierra |
| show() | Se puede seguir usando | No lo cierra |
| El atributo open | Se puede seguir usando | No lo cierra |
| Un div con role="dialog" | Lo que haga tu script | Solo si tu script lo gestiona |
De MDN y web.dev, consultados el 5 de noviembre de 2026.
web.dev añade que un diálogo modal se muestra encima de la página, y el resto queda tapado por un fondo semitransparente. Ese fondo se puede cambiar con el pseudoelemento ::backdrop. MDN desaconseja abrir un diálogo con el atributo open: así siempre es no modal.
El foco entra y vuelve
Cuando showModal() abre un diálogo, el foco pasa al primer elemento de dentro que puede recibirlo. MDN recomienda el atributo autofocus en el control que la persona necesita primero, o en el botón de cerrar cuando no hay otro antes.
Con un diálogo modal abierto, web.dev señala que pulsar Tab una y otra vez solo recorre lo que hay dentro. Al cerrarse, el foco vuelve al elemento que lo abrió. Nuestra guía de navegación con teclado muestra cómo se recorre una página sin mouse.
Cómo se cierra
Escape cierra un diálogo abierto con showModal(), y MDN pide mantenerlo así, porque quien usa el teclado lo espera. Escape no cierra un diálogo no modal, así que su propio botón de cerrar importa todavía más.
web.dev aconseja tomar como obligatorio un botón visible para cerrarlo, aunque la especificación no lo pida. El atributo closedby de MDN decide el resto: con el valor any, un clic o un toque fuera también cierra el diálogo, lo que MDN llama light dismiss.
Un nombre y el rol correcto
Los navegadores presentan el elemento dialog casi igual que uno hecho a mano con role="dialog". MDN señala que un diálogo abierto con showModal() recibe aria-modal="true" por sí solo.
Dale un nombre al diálogo, normalmente apuntando aria-labelledby a su título, como describe el patrón del W3C para diálogos modales. Nuestra guía de aria-label explica cuándo nombrar un elemento con un texto visible.
Si lo haces sin el elemento dialog
MDN advierte que el elemento dialog trae funciones que tienes que rehacer si usas un div. aria-modal="true" por sí solo avisa a las tecnologías de apoyo de que el diálogo es modal, pero no lo vuelve modal.
Tienes que mantener el foco dentro con un script, cerrarlo con Escape y dejar inerte todo lo demás. El atributo inert hace esto último: el contenido inerte no se puede pulsar ni enfocar, y sale del árbol de accesibilidad. Un diálogo que no es modal debe quitar aria-modal o ponerlo en false. Nuestra guía de qué es ARIA explica por qué ARIA deja el comportamiento en manos de tu script.
Cómo hacer una ventana modal accesible
- Usa el elemento dialog y ábrelo con showModal().
- Dale nombre apuntando aria-labelledby a su título.
- Pon dentro un botón visible para cerrarlo.
- Mantén Escape, y decide si un clic fuera también lo cierra.
- Añade autofocus al control que se necesita primero.
- Devuelve el foco al botón que lo abrió cuando se cierre.
- Comprueba con el teclado y un lector de pantalla que no se llega a nada de detrás.
Nuestro aviso de cookies como diálogo
El 5 de noviembre de 2026 leímos en el árbol de accesibilidad de Chrome nuestro aviso de cookies, en la página de inicio y en una guía de cada idioma. Es un div con role="dialog" que toma el nombre de su título, «Tus opciones de privacidad». El aviso compacto no es modal: no toma el foco y la página se puede seguir usando.
Las preferencias, que se abren desde el enlace del pie, sí son modales. El foco pasa al primer control de dentro, y doce pulsaciones de Tab no salieron de ellas. Escape las cierra y devuelve el foco al enlace del pie.
Esa mañana la página de detrás seguía respondiendo: en una guía, un clic en nuestro logo te sacaba de la página, y Chrome la mantenía en su árbol. Ahora la página de detrás queda inerte mientras las preferencias están abiertas, y un clic fuera las cierra igual que Escape.
Antes de publicar
- El diálogo tiene un nombre que coincide con su título.
- El foco entra en el diálogo al abrirse.
- Tab y Mayús+Tab se quedan dentro de un diálogo modal.
- Escape y un botón visible lo cierran.
- El foco vuelve al control que lo abrió.
- Nada de lo que hay detrás de un diálogo modal se puede pulsar ni leer.
RecuerdaUn diálogo modal es una promesa: hasta que se cierra, solo funciona lo de dentro. showModal() la cumple por ti; con un div, la tiene que cumplir tu script.
Nuestro servicio de diseño web hace diálogos que cumplen esa promesa.
Respuestas rápidas sobre el elemento dialog
¿Qué diferencia hay entre show() y showModal()?
showModal() abre el diálogo como modal: el resto de la página queda inerte, un fondo lo cubre y Escape lo cierra. show() lo abre como no modal, así que se puede seguir usando la página, y Escape no lo cierra, como explica web.dev.
¿Un diálogo necesita un botón para cerrarlo?
Tómalo como obligatorio. web.dev señala que la especificación no lo pide, pero un botón visible que recibe el foco ayuda a todo el mundo. MDN considera un botón explícito de cerrar, cancelar o confirmar la forma más segura de que cualquiera pueda cerrarlo.
¿Basta aria-modal para que un diálogo sea modal?
No. MDN dice que aria-modal="true" avisa a las tecnologías de apoyo de que el diálogo es modal, pero no lo vuelve modal. Tienes que mantener el foco dentro, cerrarlo con Escape y dejar inerte el resto de la página, que es lo que showModal() hace por ti.
¿Adónde va el foco cuando un diálogo se abre y se cierra?
Al abrirse, entra en el diálogo: showModal() lo pone en el primer elemento que puede recibirlo, y autofocus puede elegir otro. Al cerrarse, según web.dev, el foco vuelve al elemento que lo abrió.
¿Puede cerrarse un diálogo con un clic fuera?
Sí, si lo decides. MDN describe el atributo closedby: con closedby="any", un clic o un toque fuera cierra el diálogo, igual que Escape. Un diálogo modal abierto con showModal() no se cierra así salvo que lo indiques.
Fuentes
Consultadas el 5 de noviembre de 2026. web.dev: Cuadro de diálogo. En inglés: MDN Web Docs, <dialog> HTML dialog element, ARIA: aria-modal attribute e inert HTML global attribute; Iniciativa de Accesibilidad Web del W3C, Dialog (Modal) Pattern. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.