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

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

Esto crea una barrera seria para las personas que dependen del teclado 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 frame inaccesible queda efectivamente oculto para estos usuarios, aunque sea completamente visible en pantalla.

Criterios de éxito WCAG relacionados

Esta regla se corresponde con el 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 de teclas individuales. Cuando el contenido enfocable está bloqueado dentro de un frame 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 sea considerada 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 de forma natural y permitirá que los usuarios de teclado puedan tabular dentro del frame.
2. Usa tabindex="0" si necesitas incluir explícitamente el frame en el orden de tabulación.
3. Solo usa tabindex="-1" en frames que genuinamente no contengan contenido enfocable o interactivo. Aun así, ten cuidado —si el contenido del frame 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 frames completamente. Es fácil que el contenido de los frames cambie con el tiempo, y un tabindex negativo puede convertirse en un problema de accesibilidad accidental después de una actualización rutinaria de contenido.

Ejemplos

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

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

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

Correcto: Frame con contenido enfocable y sin tabindex negativo

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

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

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

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

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

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

Cuando un frame 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 mediante teclado.

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

Learn more:

Deque Reference

Deque University - How To Fix

→