Analyser les iframes

Les pages placent souvent un contenu important à l'intérieur des éléments <iframe> : formulaires de paiement, lecteurs multimédias, cartes intégrées, widgets de chat et d'assistance, et composants tiers. Le CLI analyse le contenu de ces cadres dans le cadre d'une analyse de page ordinaire, de sorte que le contenu encadré ne soit pas un manque dans votre couverture.

Il n'y a rien à activer. axe-core est chargé dans les cadres de la page, chaque cadre est analysé en même temps que le document de niveau supérieur, et les résultats sont combinés dans le même fichier de résultats JSON pour la page.

Comment les résultats des cadres sont rapportés

Les résultats des cadres arrivent dans les mêmes tableaux violations, passes, incomplete, et inapplicable que le reste de la page. Ce qui les identifie, c'est le tableau target sur chaque nœud de résultat : il contient un sélecteur par niveau d'imbrication de cadre, suivi d'un sélecteur pour l'élément lui-même.

• Un target avec une seule entrée est un élément dans le document de niveau supérieur.
• Un target avec deux entrées est un élément à l'intérieur d'un cadre : le premier sélecteur trouve le cadre dans le document parent, et le second trouve l'élément à l'intérieur du document de ce cadre.
• Chaque entrée supplémentaire représente un autre niveau d'imbrication de cadre.

Cela signifie qu'un rapport peut pointer vers un élément qui n'existe pas dans le propre HTML de la page. Lisez le tableau target de l'extérieur vers l'intérieur pour trouver où l'élément se trouve réellement.

Ciblage des éléments à l'intérieur d'un cadre

Pour agir ou analyser un élément à l'intérieur d'un cadre, utilisez un fichier de spécifications et fournissez le sélecteur sous forme de liste. Tous les sélecteurs de la liste sauf le dernier identifient les éléments successifs <iframe> à parcourir, et le dernier identifie l'élément cible à l'intérieur du cadre le plus interne. Voir Sélecteurs pour les règles complètes et les exemples.

# 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"]

Écrivez la liste sans espace entre [ et le premier guillemet, sinon le fichier de spécifications échoue à la validation.

Les sélecteurs conscients des cadres fonctionnent pour les actions de page ainsi que pour analyze, de sorte qu'un flux de travail puisse cliquer sur un bouton ou remplir un champ à l'intérieur d'un cadre avant d'analyser le résultat. Voir Actions de page.

Cadres et mode URI

Les options --include et --exclude de axe <url> prennent une liste séparée par des virgules de sélecteurs CSS qui sont évalués uniquement par rapport au document de niveau supérieur, ils ne peuvent donc pas cibler un élément à l'intérieur d'un cadre. Le contenu à l'intérieur des cadres est toujours analysé ; vous ne pouvez simplement pas le délimiter depuis la ligne de commande.

Deux conséquences méritent d'être connues :

• Nommer un élément de cadre, comme dans --include "#checkout-frame", limite l'analyse à ce cadre et à tout ce qu'il contient, car le contenu du cadre est analysé avec lui.
• Les sélecteurs supplémentaires après le premier sont ignorés silencieusement lorsqu'ils ne correspondent à rien dans le document de niveau supérieur. --include "#outer,#inner,#leaf" produit exactement les mêmes résultats que --include "#outer", sans avertissement que le reste du chemin a été ignoré. Un sélecteur qui existe uniquement à l'intérieur d'un cadre échoue carrément avec No elements found for include in page Context.

Utilisez un fichier de spécifications lorsque vous devez cibler quelque chose à l'intérieur d'un cadre.

Sujets connexes

• Analyser les pages à l'aide d'un fichier de spécifications
• Analyser les iframes avec les Axe DevTools for Web API