TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si un <iframe> contiene elementos interactivos en su interior (ej: un mapa de Google, un video de YouTube o un formulario incrustado), aplicarle tabindex="-1" al contenedor padre bloqueará completamente el acceso físico mediante la tecla TAB a dicho contenido.
La barrera perimetral en contenidos de terceros
Muchos desarrolladores aplican tabindex="-1" a contenedores dinámicos o iframes para evitar que el "borde azul" de foco aparezca sobre el bloque grande. Sin embargo, esta práctica quiebra inmediatamente la WCAG 2.1.1 (Teclado), dejando a personas usuarias con problemas motrices severos totalmente aislados de realizar trámites críticos alojados en dominios cruzados.
El patrón erróneo: Código Accesible Deficiente
El teclado se aproxima al iframe y, por orden explícita del tabindex negativo, lo salta, omitiendo todos los campos de texto en su interior.
<!-- MAL: Bloqueo explícito de la tabulación -->
<iframe
src="https://formularios.entidad.gov.co/tramite-1"
tabindex="-1"
title="Formulario de radicación"
></iframe>La Solución Accesible: Código Recomendado
Dejar que el navegador gestione nativamente el flujo del teclado hacia adentro del Iframe. Nunca uses valores negativos en contenedores de interacción.
<!-- BIEN: Flujo natural del teclado -->
<iframe
src="https://formularios.entidad.gov.co/tramite-1"
title="Formulario de radicación"
></iframe>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Desactivar el ratón y navegar la página exclusivamente con Tab, Shift+Tab, Enter y las teclas de flecha. Verificar que todos los elementos interactivos sean alcanzables, que el indicador de foco sea visible, y que no existan trampas de foco donde el cursor quede atrapado.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 2.1.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas de teclado verifican que no existan trampas de foco. Para confirmar la operabilidad completa por teclado, se recomienda una auditoría manual navegando toda la interfaz con Tab y las teclas de flecha.
