Los frames deben ser probados con axe-core

Por qué es importante

Las páginas web a menudo incluyen contenido usando elementos iframe o frame — para anuncios, widgets de terceros, formularios integrados, reproductores de video, o incluso componentes internos de aplicaciones. Cada frame es esencialmente su propio documento con su propio DOM. Si axe-core no se está ejecutando dentro de esos frames, cualquier violación de accesibilidad dentro de ellos pasa completamente desapercibida.

Esto se clasifica como un problema de impacto de usuario crítico — no porque el frame en sí sea inaccesible, sino porque las violaciones no detectadas dentro de los frames pueden afectar a todos los usuarios con discapacidades. Los usuarios ciegos que dependen de lectores de pantalla, usuarios videntes que solo usan teclado, y usuarios sordociegos podrían encontrar barreras ocultas dentro del contenido de frames no validados. Las etiquetas de formulario faltantes, la gestión de foco rota, el contraste de color insuficiente, o el texto alternativo faltante dentro de los frames permanecerían invisibles para tu proceso de validación.

Esta regla es una buena práctica de Deque más que un criterio específico de las WCAG. Sin embargo, las violaciones que pasan desapercibidas dentro de frames no validados pueden relacionarse con numerosos criterios de las WCAG, incluyendo 1.1.1 (Contenido no textual), 1.3.1 (Información y relaciones), 2.1.1 (Teclado), 2.4.3 (Orden del foco), 4.1.2 (Nombre, función, valor), y muchos otros. La validación integral de accesibilidad requiere que todo el contenido de una página sea analizado, incluyendo el contenido dentro de frames.

Cómo funciona la regla

Cuando la propiedad de configuración iframes está establecida en true, axe-core intenta ejecutarse dentro de cada elemento iframe y frame en la página. La regla usa selectores tanto de frame como de iframe para verificar si el script de axe-core está presente en el documento de cada frame. Si axe-core no se encuentra dentro de un frame, la regla devuelve un resultado de “necesita revisión” para ese elemento.

La regla opera a nivel de página — lo que significa que los resultados de nodos a través de diferentes frames se combinan en un solo resultado cuando se valida toda la página. Una función opcional after procesa los resultados de todos los frames juntos.

Cómo solucionarlo

Hay varios enfoques para asegurar que los frames sean validados correctamente:

1. Usa el soporte integrado de iframe de axe-core. Cuando ejecutes axe-core programáticamente, establece la opción iframes en true (esto es el valor por defecto). axe-core intentará automáticamente comunicarse con los frames para recopilar resultados — pero el script de axe-core debe estar presente en cada frame para que esto funcione.

2. Inyecta axe-core en todos los frames. Si controlas el contenido del frame, incluye el script de axe-core en esos documentos. Si estás usando un framework de validación como Selenium, Puppeteer, o Playwright, inyecta el script de axe-core en cada frame antes de ejecutar el análisis.

3. Usa la extensión de navegador axe DevTools. La extensión axe DevTools maneja la inyección de frames automáticamente en la mayoría de los casos, haciéndola la opción más simple para validaciones manuales.

4. Para frames de terceros que no controlas, reconoce que la cobertura de validación es limitada y considera validar el contenido de terceros por separado, o documentarlo como un área que requiere revisión manual.

Ejemplos

Frame que desencadena el problema

Un iframe está presente en la página, pero axe-core no está cargado dentro de él. El contenido dentro del frame permanece sin validar:

<main>
  <h1>Nuestra aplicación</h1>
  <iframe src="https://example.com/embedded-form" title="Formulario de contacto"></iframe>
</main>

Si https://example.com/embedded-form no tiene axe-core cargado, axe marcará este frame como que necesita revisión.

Configuración correcta con axe-core inyectado

Cuando uses una herramienta de validación como Playwright, asegúrate de que axe-core se inyecte en todos los frames:

const { AxeBuilder } = require('@axe-core/playwright');

// AxeBuilder automáticamente analiza el contenido del iframe
const results = await new AxeBuilder({ page })
  .analyze();

Contenido de frame que incluye axe-core

Si controlas la fuente del frame, incluye el script de axe-core directamente:

<!-- Contenido dentro del documento del iframe -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Formulario integrado</title>
  <script src="/vendor/axe-core/axe.min.js"></script>
</head>
<body>
  <form>
    <label for="email">Dirección de email</label>
    <input type="email" id="email" name="email">
    <button type="submit">Suscribirse</button>
  </form>
</body>
</html>

Frame correctamente estructurado en la página padre

Siempre asegúrate de que tus frames tengan atributos title descriptivos para que los usuarios entiendan su propósito:

<iframe src="/embedded-form.html" title="Formulario de suscripción al boletín"></iframe>

Esto no solucionará el problema de inyección de axe-core por sí solo, pero asegura que el frame sea accesible mientras trabajas en obtener cobertura de validación completa dentro de él.

Learn more:

Deque Reference

Deque University - How To Fix

→