Análisis de iframes
Cómo la CLI de Axe DevTools for Web analiza el contenido dentro de los iframes, y cómo acceder a los elementos dentro de un marco.
Las páginas a menudo colocan contenido sustancial dentro de elementos <iframe>: formularios de pago, reproductores de medios, mapas incrustados, widgets de chat y ayuda, y componentes de terceros. La CLI analiza el contenido de esos marcos como parte de un análisis de página ordinario, por lo que el contenido enmarcado no es una laguna en tu cobertura.
No hay nada que activar. axe-core se carga en los marcos de la página, cada marco se analiza junto con el documento de nivel superior, y los resultados se combinan en el mismo archivo de resultados JSON para la página.
Cómo se reportan los resultados de los marcos
Los resultados de los marcos llegan en los mismos arreglos violations, passes, incomplete y inapplicable que el resto de la página. Lo que los identifica es el arreglo target en cada nodo de resultado: contiene un selector por cada nivel de anidamiento de marcos, seguido de un selector para el propio elemento.
- Un
targetcon una entrada es un elemento en el documento de nivel superior. - Un
targetcon dos entradas es un elemento dentro de un marco: el primer selector encuentra el marco en el documento padre, y el segundo encuentra el elemento dentro del documento de ese marco. - Cada entrada adicional representa otro nivel de anidamiento de marcos.
Esto significa que un informe puede señalar un elemento que no existe en el propio HTML de la página. Lee el arreglo target de afuera hacia adentro para encontrar dónde realmente reside el elemento.
Apuntando a elementos dentro de un marco
Para actuar o analizar un elemento dentro de un marco, usa un archivo de especificaciones y da el selector como una lista. Todos los selectores en la lista, excepto el último, identifican sucesivos elementos <iframe> para navegar, y el último identifica el elemento objetivo dentro del marco más interno. Consulta Selectores para conocer las reglas completas y ejemplos.
# Analyze only the card form inside the card-fields frame,
# which is itself inside the payment-widget frame
analyze only element ["iframe.payment-widget", "#card-fields", "form"]
# Analyze the page, but skip everything inside a third-party frame
analyze the page excluding element [".third-party-frame", "html"]Escribe la lista sin espacio entre [ y la primera comilla, o el archivo de especificaciones fallará en la validación.
Los selectores conscientes de marcos funcionan tanto para acciones de página como para analyze, por lo que un flujo de trabajo puede hacer clic en un botón o llenar un campo dentro de un marco antes de analizar el resultado. Consulta Acciones de página.
Debido a que siempre se lee una lista de selectores como un camino a través de marcos, no se puede usar para seleccionar varios elementos no relacionados. Para delimitar un análisis a más de una región de una página, repite la cláusula element.
Marcos y modo URI
Las opciones --include y --exclude de axe <url> toman una lista separada por comas de selectores CSS que se evalúan solo contra el documento de nivel superior, por lo que no pueden apuntar a un elemento dentro de un marco. El contenido dentro de los marcos aún se analiza; simplemente no se puede delimitar desde la línea de comandos.
Dos consecuencias que vale la pena conocer:
- Nombrar un elemento de marco, como en
--include "#checkout-frame", delimita el análisis a ese marco y todo lo que hay dentro, porque el contenido del marco se analiza con él. - Selectores adicionales después de los primeros son ignorados sin notificación cuando no coinciden con nada en el documento de nivel superior.
--include "#outer,#inner,#leaf"produce exactamente los mismos resultados que--include "#outer", sin advertencia de que el resto del camino fue descartado. Un selector que existe solo dentro de un marco falla rotundamente conNo elements found for include in page Context.
Usa un archivo de especificaciones cuando necesites apuntar a algo dentro de un marco.
La regla frame-tested de axe-core informa cualquier marco al que axe-core no pudo acceder, lo cual es la manera de distinguir entre "no hay problemas en este marco" y "este marco nunca fue analizado". Es una regla de mejores prácticas, por lo que no es parte de los conjuntos de reglas WCAG que la CLI ejecuta por defecto; para obtener esos resultados, usa un conjunto de reglas personalizadas que incluya reglas de mejores prácticas. Consulta Reglas personalizadas.