Escape para cerrar y restaurar el foco
Ofrezca una salida fiable que devuelva al usuario a su lugar anterior.
Escape para cerrar y restaurar el foco es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Todo modal necesita una salida
Un modal del que no se puede salir es una trampa. Los usuarios esperan una forma rápida y fiable de cerrarlo sin tener que buscar un botón diminuto.
Escape es la tecla universal
La tecla Escape es el atajo establecido para cerrar un diálogo. Los usuarios del teclado y de lectores de pantalla recurren primero a ella, así que debe admitirla siempre.
El dialog nativo gestiona Escape
Un dialog nativo abierto con showModal() se cierra automáticamente al pulsar Escape y activa un evento cancel que puede escuchar si es necesario.
dialog.addEventListener('cancel', onClose);Gestione Escape usted mismo
En un modal personalizado, escuche el evento keydown y ciérrelo cuando la tecla sea Escape. Son unas pocas líneas, pero no debe omitirlas.
if (e.key === 'Escape') closeModal();Recuerde dónde estaba el foco
Antes de abrir el modal, guarde el elemento que tenía el foco. document.activeElement es el elemento activador al que volverá más tarde.
const opener = document.activeElement;Restaure el foco al cerrar
Cuando se cierre el modal, devuelva el foco al activador guardado. Este paso de restaurar el foco hace que el cierre resulte fluido.
closeModal();
opener.focus();Por qué importa restaurarlo
Sin restaurarlo, el foco salta al principio de la página. El usuario pierde su posición y debe recorrerla de nuevo con Tab. Es frustrante y evitable. 😕
Añada también un botón de cierre visible
Escape no basta por sí solo. Ofrezca un botón de cierre claramente etiquetado para que los usuarios del ratón y de dispositivos táctiles también tengan una salida evidente.
<button aria-label="Close dialog">×</button>Hacer clic en el fondo
Muchos modales también se cierran al hacer clic en el fondo atenuado. Es un complemento útil, pero nunca debe sustituir a Escape ni al botón.
Tenga cuidado con las acciones destructivas
En los diálogos que confirman algo arriesgado, puede impedir el cierre rápido para que un Escape accidental no omita una decisión importante.
Pruebe el ciclo completo
Abra el modal con el teclado, pulse Escape y confirme que el foco vuelve exactamente al activador desde el que empezó. Ese recorrido de ida y vuelta es el objetivo. ✅
Comprobación rápida
Un usuario abre un modal desde un botón y pulsa Escape. ¿Dónde debe quedar el foco?
Resumen: cierre correctamente
Ha aprendido a admitir Escape, ofrecer un botón de cierre visible y restaurar el foco en el elemento que abrió el modal, para que el cierre nunca deje al usuario perdido. 🎯
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Escape para cerrar y restaurar el foco» es gratis?
Sí — el texto completo de «Escape para cerrar y restaurar el foco» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Escape para cerrar y restaurar el foco»?
Ofrezca una salida fiable que devuelva al usuario a su lugar anterior. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Escape para cerrar y restaurar el foco»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Roles de diálogo y el elemento nativo dialog
- Atrapar el foco dentro del modal
- Escape para cerrar y restaurar el foco
- Fondo inerte y aria-modal