iframe-focusable-content
Los marcos con tabindex="-1" no deben contener contenido enfocable
Comprueba que los elementos <iframe>/<frame> del mismo origen con tabindex="-1" no contengan contenido enfocable, al que las personas usuarias de teclado no pueden llegar: el tabindex negativo saca todo el contenido del marco del orden de tabulación.
Ámbito de aplicación. Se aplica a los elementos <iframe>/<frame> con un tabindex negativo explícito, cuyo documento incrustado es del mismo origen y alcanzable mediante contentDocument. En un marco de origen cruzado o inalcanzable por otro motivo no se puede mirar dentro, así que no se afirma nada sobre él.
Resultado esperado. El documento incrustado del marco no contiene ningún elemento en su orden de navegación secuencial del foco. Un tabindex negativo en el <iframe> saca todo su contexto de navegación del orden de tabulación: la tecla Tab se salta todo lo que hay dentro, así que un enlace o control situado ahí no se puede alcanzar con el teclado (ACT akn7bn; en Chromium, Tab pasa del elemento anterior al marco al siguiente). Un elemento está en el orden según las reglas de HTML, leídas en el propio documento del marco: no lo está cuando está deshabilitado (:disabled, que cuenta un <fieldset> deshabilitado pero no su primer <legend>) o es inert; un tabindex que se interpreta como entero decide, y uno no válido ("", "abc") se ignora; en otro caso, sí lo están los enlaces con href, los controles de formulario salvo los inputs hidden, los marcos, los elementos multimedia con controls, un <area> de un mapa de imagen que usa un <img> renderizado (con usemap coincidiendo exactamente), el primer <summary> de un <details> y los anfitriones de edición (contenteditable "", "true" o "plaintext-only"). Excepción: un iframe con un atributo HTML width y height de 2px o menos (un patrón habitual de "píxel de seguimiento") no puede renderizar ningún contenido perceptible, por lo que el contenido enfocable en su interior nunca cumple el requisito de "visible" de ACT akn7bn y no cuenta.
Ejemplos
<iframe tabindex="-1" width="300" height="150" srcdoc="<p>No focusable content</p>"></iframe>
tabindex="-1" saca el marco del orden de tabulación, y tampoco hay nada enfocable en su interior.
<iframe tabindex="-1" width="300" height="150" srcdoc="<a href='/x'>Link inside</a>"></iframe>
El marco anfitrión se omite mediante tabindex="-1", pero el enlace en su interior sigue siendo alcanzable con Tab: el navegador no propaga el tabindex negativo al documento incrustado.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
IFRAME_TABINDEX_NEGATIVE_CONTENT_RUNTIME_REDIRECT
- Hacer clic en la página justo antes del marco que indica el informe y pulsar Tab para avanzar hacia él.
- Seguir pulsando Tab y observar si el foco llega alguna vez dentro del marco, y adónde va cuando debería llegar allí.
- Inspeccionar el elemento enfocable de dentro del marco en el panel Elements: anotar si es una guarda de foco vacía o un enlace o control real con contenido.
- Si es un enlace o control real, probar todas las demás vías de teclado para llegar a él (Mayús+Tab, los controles propios del marco) para ver si se puede alcanzar y usar.
Se cumple. El único elemento enfocable dentro del marco es una guarda de foco vacía que pasa el foco adelante, y nada de lo que el usuario necesita dentro del marco queda fuera del alcance del teclado.
No se cumple. Un enlace o control real dentro del marco no se puede alcanzar ni usar con el teclado porque el foco lo salta o rebota, lo que incumple WCAG 2.1.1.