No keyboard trap: detección y solución

Cómo detectar y eliminar bloqueos de teclado en modales, menús y componentes interactivos.

📘 Teoría

Patrones para evitar bloqueos de navegación por teclado.

Un contexto donde el foco entra pero no puede salir con atajos estándar.

En overlays, dropdowns complejos y componentes con listeners de teclado incompletos.

Debe existir salida por teclado y retorno de foco al disparador.

Asegura orden lógico y evita nodos ocultos capturando foco.

Al cerrar, limpia listeners y elementos fuera de flujo.

Dejar activo un trap cuando el modal ya no es visible.

Cómo auditar y corregir traps en componentes reutilizables.

Prueba cada overlay con Tab, Shift+Tab, Escape y navegación rápida entre controles.

Comprueba que el foco no aterriza en elementos ocultos ni salta al fondo de la página.

En componentes compartidos, centraliza la gestión de foco para no repetir errores.

Ejemplo de cierre por Escape y retorno de foco en contexto modal.

Salida segura del modal

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modalAbierto) {
    cerrarModal();
    botonAbrir.focus();
  }
});

Ejemplo Demo guiada Abre un modal y comprueba salida por Escape con foco restaurado.

⌄

Reto Reto práctico Evita que el foco se quede atrapado en un panel lateral.

⌄

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Recursos del curso 25