Técnica General G21 de WCAG 2.1: Garantizar que los usuarios no queden atrapados en el contenido

En el diseño de interfaces accesibles, es fundamental garantizar que los usuarios puedan navegar libremente utilizando un teclado. Algunos elementos interactivos pueden generar trampas de teclado, impidiendo que los usuarios avancen o retrocedan dentro del contenido. Esta problemática afecta principalmente a personas con discapacidades motoras o visuales que dependen del teclado para la navegación.

La técnica G21 se relaciona con el criterio de éxito 2.1.2 de WCAG 2.1: No Keyboard Trap (Sin trampa de teclado). Su objetivo es garantizar que los usuarios puedan moverse fuera de cualquier subconjunto de contenido sin quedar atrapados, proporcionando mecanismos accesibles para salir de él.

Acerca de esta técnica

La técnica G21 busca evitar que los usuarios queden atrapados en contenido interactivo que solo pueda abandonarse con un dispositivo apuntador (ratón, pantalla táctil, etc.). Esto ocurre con frecuencia en contenidos renderizados por complementos o plug-ins, que pueden interceptar eventos del teclado sin permitir una salida.

Para cumplir con este criterio, se pueden aplicar las siguientes estrategias:

• Asegurar que la tecla Tab permita avanzar por el contenido y salir de él una vez alcanzado el último elemento enfocable.
• Proporcionar una combinación de teclas documentada dentro del contenido que permita salir del subconjunto interactivo.
• Usar tecnologías que ofrezcan un comando nativo de «volver al contenido padre» y documentar su uso antes de que el usuario ingrese al subconjunto.

Implementar esta técnica es esencial en aplicaciones web con widgets personalizados, iframes, contenido embebido y aplicaciones de terceros.

Ejemplos

Ejemplo incorrecto 1: Contenido embebido sin salida accesible

Un widget de chat en vivo incrustado en la página intercepta todas las pulsaciones de tecla y no permite que el usuario salga con Tab.

<iframe src="chat-widget.html" title="Chat en vivo" tabindex="0"></iframe>

🔴 Problema:

• El usuario queda atrapado dentro del iframe sin forma de regresar a la navegación principal.
• No se proporciona un mecanismo de salida mediante teclado.

Solución correcta: Permitir salida con Tab

<iframe src="chat-widget.html" title="Chat en vivo" tabindex="0" onblur="document.getElementById('salir-chat').focus()"></iframe>
<button id="salir-chat">Salir del chat</button>

✅ ¿Qué mejora?:

• Se asegura que el usuario pueda salir del iframe cuando pierde el foco.
• Se proporciona un botón accesible para salir del chat.

Ejemplo incorrecto 1: Aplicación embebida que bloquea el teclado

Una aplicación de edición de texto embebida en una página web captura todas las teclas y no permite salir con Tab.

<object data="editor.swf" type="application/x-shockwave-flash"></object>

🔴 Problema:

• Los usuarios de teclado quedan atrapados dentro del objeto Flash sin forma de salir.
• No se proporciona documentación sobre una combinación de teclas para salir.

Solución correcta: Proporcionar un atajo documentado

<object data="editor.swf" type="application/x-shockwave-flash"></object>
<p>Presione `Esc` para salir del editor.</p>

✅ ¿Qué mejora?:

• Se documenta un atajo de teclado (Esc) para salir del contenido embebido.
• Se mejora la navegabilidad para usuarios de teclado.

Errores comunes y cómo evitarlos

Errores comunes:

• No proporcionar una forma de salir del contenido embebido mediante teclado.
• Interceptar eventos de teclado sin permitir la navegación fuera del contenido.
• No documentar atajos de teclado para salir del contenido.

Cómo evitar estos errores:

• Asegurar que Tab y Shift + Tab permitan salir del contenido interactivo.
• Implementar atajos documentados (Esc, Alt + X, etc.).
• Utilizar aria-label y role apropiados para mejorar la navegación.

Preguntas frecuentes sobre esta técnica G21

¿Cómo pruebo si hay una trampa de teclado?
Intenta navegar solo con Tab y Shift + Tab. Si no puedes salir, hay un problema.

¿Se aplica esta técnica a todos los elementos interactivos?
Sí, especialmente a iframes, widgets y aplicaciones embebidas.

¿Qué hacer si la tecnología utilizada no permite salida con Tab?
Implementar una combinación de teclas alternativa y documentarla.

¿Es necesario un botón de salida en todos los casos?
No siempre, pero es una buena práctica proporcionar una opción accesible.

Recursos relacionados

• Guía oficial WCAG 2.1 para la Técnica General G21: Garantizar que los usuarios no queden atrapados en el contenido
• Comprender el criterio de éxito 2.1.2: Sin trampa de teclado

Pruebas y validación

Procedimiento

1. Navegar por el contenido con Tab.
2. Verificar que se puede salir de todos los subconjuntos interactivos.
3. Confirmar la existencia de documentación sobre atajos de teclado si aplica.

Resultados esperados

• ✅ Si el usuario puede salir del contenido con teclado, la técnica está bien implementada.
• ❌ Si el usuario queda atrapado, se requiere una corrección.

Reglas de prueba (Test Rules)

• El elemento enfocable no tiene trampa de teclado

Esta técnica es esencial para una web accesible y garantiza una navegación fluida e inclusiva para todos los usuarios.