Detecte las trampas de teclado

Una trampa de teclado es cualquier lugar al que entra el foco pero del que no puede salir con el teclado. Para quien no utiliza ratón, es un callejón sin salida. 🪤

Una persona atrapada quizá tenga que volver a cargar toda la página para escapar. WCAG considera una trampa sin salida un incumplimiento, no un error menor.

Las trampas abundan en los widgets complejos: selectores de fecha personalizados, editores incrustados y complementos de terceros que capturan el foco y nunca lo devuelven.

Un diálogo que intercepta Tab pero no ofrece ninguna forma de salir es la trampa más común. Un modal real debe cerrarse con Escape.

El contenido incrustado, como un vídeo o un mapa, se encuentra en un iframe. Algunos capturan el foco y dejan al usuario dando vueltas dentro sin salida.

Un script que llama a preventDefault en la tecla Tab puede bloquear el movimiento normal del navegador. De repente, el foco simplemente deja de avanzar.

Algunas trampas permiten avanzar con Tab, pero bloquean Shift+Tab. Pruebe ambas direcciones, porque un recorrido de un solo sentido sigue siendo una trampa.

Mantener el foco dentro de un modal abierto es correcto y deliberado. La regla es que siempre debe existir una salida clara, como Escape o un botón de cierre.

La prueba es sencilla y eficaz. Recorra toda la página con Tab usando únicamente el teclado y no intente escapar con el ratón.

Si el foco sigue circulando dentro de un componente y Tab no le permite continuar, ha encontrado una trampa. Anote exactamente dónde quedó atrapado.

La solución es restablecer una salida: permita que Tab continúe, respete Escape y, al cerrar, devuelva el foco al activador que abrió la capa.

Identifique qué define realmente una trampa de teclado.

Una trampa retiene el foco sin una salida mediante el teclado y supone un incumplimiento de WCAG. Recorra todo con Tab en ambas direcciones y proporcione siempre una ruta de escape. ✅