Los marcos con contenido enfocable no deben tener tabindex=-1

Cuando un <frame> o <iframe> tiene tabindex="-1", el navegador lo elimina del orden de navegación secuencial por teclado. Esto significa que cualquier elemento enfocable dentro del marco — como enlaces, botones, controles de formulario u otros elementos interactivos — se vuelve completamente inaccesible a través del teclado. Si el marco también tiene contenido desplazable, los usuarios de teclado tampoco pueden desplazarlo, ya que el foco nunca puede entrar al marco para empezar.

Esto crea una barrera seria para las personas que dependen de teclados para navegar, incluyendo usuarios ciegos que usan lectores de pantalla y personas con discapacidades motoras que no pueden usar un ratón. El contenido atrapado dentro de un marco inaccesible queda efectivamente oculto de estos usuarios, aunque pueda estar completamente visible en pantalla.

Criterios de éxito de WCAG relacionados

Esta regla se mapea al Criterio de Éxito 2.1.1 de WCAG 2.1: Teclado (Nivel A), que requiere que toda la funcionalidad sea operable a través de una interfaz de teclado sin requerir tiempos específicos para pulsaciones individuales. Cuando el contenido enfocable queda bloqueado dentro de un marco con tabindex="-1", se viola este criterio porque los usuarios de teclado no pueden acceder o interactuar con ese contenido.

Este es un requisito de Nivel A — el nivel más fundamental de accesibilidad — lo que significa que debe cumplirse para que una página se considere mínimamente accesible.

Cómo solucionarlo

1. Elimina tabindex="-1" de cualquier <frame> o <iframe> que contenga contenido enfocable. Sin un tabindex explícito, el navegador manejará el foco naturalmente y permitirá que los usuarios de teclado puedan tabular hacia el marco.
2. Usa tabindex="0" si necesitas incluir explícitamente el marco en el orden de tabulación.
3. Solo usa tabindex="-1" en marcos que genuinamente no contengan contenido enfocable o interactivo. Incluso así, sé cauteloso — si el contenido del marco cambia más tarde para incluir elementos interactivos, el tabindex negativo creará silenciosamente una barrera de accesibilidad.

Como buena práctica general, evita usar tabindex="-1" en marcos por completo. Es fácil que el contenido del marco cambie con el tiempo, y un tabindex negativo puede convertirse en un problema de accesibilidad accidental después de una actualización rutinaria del contenido.

Ejemplos

Incorrecto: Marco con contenido enfocable y tabindex="-1"

El botón dentro de este iframe es inaccesible por teclado porque tabindex="-1" impide que el foco entre al marco.

<iframe
  srcdoc="<button>Click me</button>"
  tabindex="-1"
  title="Interactive widget">
</iframe>

Correcto: Marco con contenido enfocable y sin tabindex negativo

Eliminar tabindex="-1" permite que los usuarios de teclado puedan tabular hacia el marco y alcanzar el botón.

<iframe
  srcdoc="<button>Click me</button>"
  title="Interactive widget">
</iframe>

Correcto: Marco con contenido enfocable y tabindex="0"

Usar tabindex="0" coloca explícitamente el marco en el orden natural de tabulación.

<iframe
  srcdoc="<button>Click me</button>"
  tabindex="0"
  title="Interactive widget">
</iframe>

Correcto: Marco sin contenido enfocable y tabindex="-1"

Cuando un marco contiene solo contenido estático y no interactivo (sin enlaces, botones o controles de formulario), usar tabindex="-1" es aceptable porque no hay nada dentro que requiera acceso por teclado.

<iframe
  srcdoc="<p>Hello world</p>"
  tabindex="-1"
  title="Static content display">
</iframe>

Learn more:

Deque Reference

Deque University - How To Fix

→