Référence de l'API JavaScript du navigateur pour axe DevTools for Web

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Traite des API JavaScript du navigateur pour axe DevTools for Web et de leur utilisation

Not for use with personal data

Introduction

L'API axe DevTools est conçue pour être une amélioration par rapport à la génération précédente d'API d'accessibilité. Il offre les avantages suivants :

  • Fonctionne dans n'importe quel navigateur moderne
  • Conçu pour fonctionner avec l'infrastructure de test existante
  • Fonctionne localement ; aucune connexion à un serveur tiers n'est nécessaire
  • Effectue une vérification des violations sur plusieurs niveaux d'iframes imbriqués
  • Fournit une liste de règles et d'éléments qui ont passé avec succès la vérification d'accessibilité, garantissant que les règles ont été exécutées sur l'ensemble du document

Pour commencer

Cette section décrit brièvement comment utiliser les API axe DevTools pour analyser le contenu des pages Web et renvoyer un objet JSON qui répertorie toutes les violations d'accessibilité détectées.

L'API axe DevTools peut être utilisée dans le cadre d'un processus plus large exécuté sur de nombreuses pages, voire toutes, d'un site Web. L'API analyse le contenu de la page Web et renvoie un objet JSON qui répertorie toutes les violations d'accessibilité détectées. Voici comment commencer :

  1. Charger la page dans le système de test
  2. Vous pouvez également configurer les options de configuration de l'API JavaScript (AxeDevTools.configure)
  3. Appeler l'API JavaScript d'analyse (AxeDevTools.run)
  4. Soit vérifier les résultats, soit les enregistrer pour un traitement ultérieur

Référence API

Aperçu

Les API axe DevTools sont fournies dans le fichier JavaScript axe-devtools.js. Il doit être inclus dans la page Web testée. Les paramètres sont envoyés sous forme de paramètres de fonction JavaScript. Les résultats sont renvoyés au format JSON.

Notes sur l'API

  • Un test de règle est composé de sous-tests. Chaque sous-test est renvoyé dans un tableau de « vérifications »
  • Le "helpUrl" lien dans l'objet de résultats renvoie vers une description plus large du problème d'accessibilité et vers une solution suggérée. Tous les liens pointent vers les pages d'aide de Deque University.

AxeDevTools.init

note

Cette API n'est disponible via aucune des liaisons spécifiques au langage telles que @axe-devtools/script-builder, car ces liaisons ont leurs propres API pour réaliser la même chose.

Objectif

Initialisez l’API axe DevTools pour utiliser l’un des ensembles de règles standard intégrés.

Description

Initialise le moteur axe DevTools, remplaçant l'ensemble de règles par défaut et activant l'un des sous-ensembles de règles standard.

note

Vous devez utiliser soit AxeDevTools.configure soit AxeDevTools.init mais pas les deux, car ils s'écraseront mutuellement.

Résumé

AxeDevTools.init(ruleSetID);

Paramètres

  • ruleSetID - Chaîne facultatif identifiant l'ensemble de règles. Les valeurs valides actuelles sont :

    • 508
    • en301549
    • ttv5
    • wcag2
    • wcag21
    • wcag22
    • wcag2aaa
    • wcag21aaa
    • wcag22aaa

Renvoie : undefined

AxeDevTools.ruleSets

note

Cette API n'est disponible via aucune des liaisons spécifiques au langage telles que @axe-devtools/script-builder car ces liaisons ont leurs propres API pour réaliser la même chose.

Objectif

Un tableau de définitions d'ensembles de règles standard

Description

Donne un accès direct au tableau de définition de l'ensemble de règles standard. Le tableau est composé d'objets JavaScript avec la structure suivante :

{
  id: String identifier for the rule set,
  defn: Object containing the rule set definition
}

Exemple Un

Comment filtrer le tableau pour trouver la définition du jeu de règles WCAG 2 de niveau A et AA.

var rsets = AxeDevTools.ruleSets;
var wcag2 = rsets.filter(function (item) {
  return item.id === 'wcag2';
})[0].defn;

AxeDevTools.getRules

Objectif

Pour obtenir des informations sur toutes les règles du système

Description

Renvoie une liste de toutes les règles avec leur ID et leur description.

Résumé

AxeDevTools.getRules([Tag Name 1, Tag Name 2...]);

Paramètres

  • tags - facultatif Tableau de balises utilisées pour filtrer les règles renvoyées. S'il est omis, il renverra toutes les règles.

Renvoie :  Tableau de règles qui correspondent au filtre d'entrée, chaque entrée ayant un format de règle {ruleId: <id>, description: <desc>}

L'ensemble actuel des balises prises en charge est répertorié dans le tableau suivant :

Nom de la balise Norme d'accessibilité
wcag2a WCAG 2.0 Niveau A
wcag2aa WCAG 2.0 Niveau AA
wcag2aaa WCAG 2.0 Niveau AAA
wcag21a WCAG 2.1 Niveau A
wcag21aa WCAG 2.1 Niveau AA
wcag21aaa WCAG 2.1 Niveau AAA
wcag22a WCAG 2.2 Niveau A
wcag22aa WCAG 2.2 Niveau AA
wcag22aaa WCAG 2.2 Niveau AAA
section508 Section 508
EN-301-549 EN 301 549
TTv5 Trusted Tester v5
best-practice Bonnes pratiques endossées par Deque

Exemple 1

Dans cet exemple, nous passons les balises WCAG 2 A et AA dans AxeDevTools.getRules pour récupérer uniquement ces règles. L'appel de fonction renvoie un tableau de règles.

Appel: AxeDevTools.getRules(['wcag2aa', 'wcag2a']);

Données renvoyées :

[
  { ruleId: "area-alt", description: "Checks the <area> elements of image…" },
  { ruleId: "aria-allowed-attr", description: "Checks all attributes that start…" },
  { ruleId: "aria-required-attr", description: "Checks all elements that contain…" },]

AxeDevTools.configure

Objectif

Pour configurer le format des données utilisées par axe DevTools. Cela peut être utilisé pour ajouter de nouvelles règles, qui doivent être enregistrées auprès de la bibliothèque pour être exécutées.

Description

L'utilisateur spécifie le format de la structure JSON transmise au callback de AxeDevTools.run.

Résumé

AxeDevTools.configure({
  branding: {
    brand: String,
    application: String
  },
  reporter: 'option',
  checks: [Object],
  rules: [Object]
});

Paramètres

  • configurationOptions - Objet d'options où les paires nom/valeur valides sont :
    • branding - variable de type quelconque (facultatif) Utilisé pour définir l'image de marque du helpUrls.
      • brand - chaîne de caractères (facultatif) définit la chaîne de marque - par défaut : « worldspace »
      • application - chaîne (facultatif) définit la chaîne d'application - par défaut : « AxeDevToolsAPI »
    • reporter - Utilisé pour définir le format de sortie que la fonction AxeDevTools.run passera à la fonction de rappel
      • v1 pour utiliser le format de la version précédente : AxeDevTools.configure({ reporter: "v1" });
      • v2 pour utiliser le format de la version actuelle : AxeDevTools.configure({ reporter: "v2" });
    • checks - Utilisé pour ajouter des contrôles à la liste des contrôles utilisés par les règles ou pour remplacer les propriétés des contrôles existants.
      • L'attribut checks est un tableau d'objets de contrôle.
      • Chaque objet de contrôle peut contenir les attributs suivants :
      • id - chaîne (obligatoire). Cela identifie le contrôle de manière unique. Si le contrôle existe déjà, toutes les propriétés du contrôle fournies seront remplacées. Les propriétés ci-dessous marquées requis si nouveau sont facultatives si la vérification est annulée.
      • evaluate - fonction (requis si nouveau). Il s'agit de la fonction qui implémente la fonctionnalité du contrôle.
      • after - fonction (facultatif). Cette fonction est appelée pour les contrôles qui fonctionnent au niveau de la page pour traiter les résultats des iframes.
      • options - mixte (facultatif). Cette options fonction reçoit cet evaluate objet et est destiné à être utilisé pour configurer les contrôles. Il s’agit de la propriété la plus courante destinée à être remplacée pour les contrôles existants.
      • matches - chaîne (facultatif). Cette chaîne de sélecteur CSS filtrera les nœuds que la fonction evaluate reçoit.
      • enabled - booléen (facultatif, par défaut true). Cela indique si la vérification est activée ou désactivée par défaut. Les tests désactivés ne sont pas évalués, même lorsqu'ils sont inclus dans une règle. La surcharge de cette option est un moyen courant de désactiver une vérification particulière sur plusieurs règles.
    • rules - Utilisé pour ajouter des règles à l'ensemble de règles existant ou pour remplacer les propriétés des règles existantes. L'attribut rules est un tableau d' rule objets. Chaque rule objet peut contenir les attributs suivants :
    • id - chaîne (obligatoire). Cela identifie la règle de manière unique. Si la règle existe déjà, elle sera écrasée par tous les attributs fournis. Les attributs ci-dessous marqués comme obligatoires ne sont requis que pour les nouvelles règles.
    • selector - chaîne (facultatif, par défaut *). Un sélecteur CSS utilisé pour identifier les éléments passés dans la règle pour évaluation.
    • excludeHidden - booléen (facultatif, par défaut true). Cela indique si les éléments cachés doivent être transmis à la règle pour évaluation.
    • enabled - booléen (facultatif, par défaut true). Si la règle est activée (un attribut courant pour le remplacement).
    • pageLevel - booléen (facultatif, par défaut false). Cela indique si la page fonctionne uniquement lorsque la portée est la page entière. Un exemple d'une règle comme celle-ci est la règle lien d'évitement . Il n'est pas recommandé de remplacer cette propriété, sauf si l'implémentation est également modifiée.
    • any - tableau (facultatif, par défaut []). Voici la liste des contrôles qui doivent tous être réussis, sinon il y a violation.
    • all - tableau (facultatif, par défaut []). Il s'agit de la liste des contrôles qui, si l'un d'eux échoue, généreront une violation.
    • none - tableau (facultatif, par défaut []). Il s'agit d'une liste de contrôles qui, si aucun n'est réussi, généreront une violation.
    • tags - tableau (facultatif, par défaut []). Une liste des balises ** qui classent la règle. En pratique, vous devez fournir des balises valides, sinon l'évaluation par défaut n'invoquera pas la règle. L'usage est d'inclure la norme (WCAG 2 et/ou section 508), le niveau WCAG 2, le paragraphe Section 508 et les critères de réussite WCAG 2. Les balises sont construites en convertissant toutes les lettres en minuscules, en supprimant les espaces et les points et en concaténant le résultat. Par exemple, les critères de réussite WCAG 2 A 1.1.1 deviendraient ["wcag2a", "wcag111"]
    • matches - chaîne (facultatif, par défaut *). Un sélecteur CSS qui exclura les éléments qui ne lui correspondent pas.

Renvoie : Rien

AxeDevTools.reset

Objectif

Réinitialiser la configuration à la configuration par défaut.

Description

Ignorez tous les appels précédents à AxeDevTools.configure ou AxeDevTools.reset et réinitialisez la configuration à la configuration par défaut.

note

Cela n'annulera pas l'enregistrement des nouvelles règles ou vérifications qui ont été enregistrées, mais réinitialisera la configuration à la configuration par défaut pour tout le reste.

Résumé

AxeDevTools.reset();

Paramètres

Aucun

Renvoie : undefined

AxeDevTools.run

Objectif

Analyser la page actuellement chargée.

Description

Exécute plusieurs règles sur la page HTML fournie et renvoie la liste des problèmes.

Résumé

AxeDevTools.run(context, options, callback);

Paramètres pour AxeDevTools.run

  • context : (facultatif) définit la portée de l'analyse : la partie du DOM que vous souhaitez analyser. Il s'agira généralement du document [missing part] ou d'un sélecteur spécifique tel que le nom de la classe, l'ID, le sélecteur, etc.
  • options : (facultatif) Ensemble d'options passées dans les règles ou les contrôles, les modifiant temporairement. Cela contraste avec AxeDevTools.configure, qui est plus permanent. Voir ci-dessus pour plus d'informations
  • callback : (facultatif) La fonction de rappel qui reçoit soit null soit un résultat d'erreur comme premier paramètre, et l'objet de résultats lorsque l'analyse s'est terminée avec succès ou undefined si elle a échoué.
context Paramètre

Par défaut, AxeDevTools.run testera l'intégralité du document. L'objet context est un paramètre facultatif qui spécifie quel élément doit être testé et lequel ne doit pas l'être. Il peut être transmis l'un des éléments suivants :

  1. Une référence d'élément qui représente la partie du document qui doit être analysée
    • Exemple : Pour limiter l'analyse à l'élément <div id="content"> document.getElementById("content") :
  2. Une NodeList telle que renvoyée par document.querySelectorAll.
  3. Un sélecteur CSS qui sélectionne la partie du document qui doit être analysée. Cela comprend :
    • Un sélecteur CSS comme nom de classe (par exemple, .classname)
    • Un sélecteur CSS comme nom de nœud (par exemple, div)
    • Un sélecteur CSS d'un identifiant d'élément (par exemple, #tag)
  4. Un objet d'inclusion-exclusion (voir ci-dessous)
include et exclude Objets

L'objet include-exclude est un objet JSON avec deux attributs : include et exclude. L'un include ou l'autre exclude est requis. Si seul exclude est spécifié, include sera par défaut l'ensemble du document.

  • Un nœud, ou
  • Un tableau de tableaux de sélecteurs CSS

Dans la plupart des cas, les tableaux ne contiendront qu'un seul sélecteur CSS. Plusieurs sélecteurs CSS ne sont requis que si vous souhaitez inclure ou exclure des régions d'une page qui se trouvent à l'intérieur d'iframes (ou des iframes dans des iframes dans des iframes). Dans ce cas, les n-1 premiers sélecteurs sélectionnent les iframes, et le nième sélecteur sélectionne les régions dans l'iframe.

context Exemples de paramètres
  1. Inclure le premier élément dans la $fixture NodeList mais exclure son premier enfant

    {
      include: $fixture[0],
      exclude: $fixture[0].firstChild
    }
  2. Inclure l'élément avec l'ID de fix mais exclure tous les divs qu'il contient

    {
      include: [['#fix']],
      exclude: [['#fix div']]
    }
  3. Inclure l'intégralité du document à l'exception de toutes les structures dont le parent contient la classe exclude1 ou exclude2

    {
      exclude: [['.exclude1'], ['.exclude2']];
    }
options Paramètre

Le options paramètre est un moyen flexible de configurer comment AxeDevTools.run fonctionne. Les différents modes de fonctionnement sont :

  • Exécuter toutes les règles correspondant à l'une des normes d'accessibilité.
  • Exécuter toutes les règles définies dans le système à l'exception de la liste de règles spécifiée.
  • Exécuter un ensemble spécifique de règles fourni sous forme de liste d'ID de règles.
options Exemples de paramètres
  1. Exécuter uniquement les règles pour une norme d'accessibilité

    Certaines normes définies peuvent être utilisées pour sélectionner un ensemble de règles. Les normes et la chaîne de balises sont définies comme suit :

    Nom de la balise Norme d'accessibilité
    wcag2a WCAG 2.0 Niveau A
    wcag2aa WCAG 2.0 Niveau AA
    wcag2aaa WCAG 2.0 Niveau AAA
    wcag21a WCAG 2.1 Niveau A
    wcag21aa WCAG 2.1 Niveau AA
    wcag21aaa WCAG 2.1 Niveau AAA
    wcag22a WCAG 2.2 Niveau A
    wcag22aa WCAG 2.2 Niveau AA
    wcag22aaa WCAG 2.2 Niveau AAA
    section508 Section 508
    EN-301-549 EN 301 549
    TTv5 Trusted Tester v5
    best-practice Bonnes pratiques endossées par Deque

    Pour exécuter uniquement les règles WCAG 2.0 de niveau A, spécifiez options :

    {
      runOnly: {
       type: "tag",
       values: ["wcag2a"]
      }
    }

    Pour exécuter les règles WCAG 2.0 de niveau A et de niveau AA, vous devez spécifier à la fois wcag2a et wcag2aa :

    {
      runOnly: {
        type: "tag",
        values: ["wcag2a", "wcag2aa"]
      }
    }
  2. Exécuter uniquement une liste spécifiée de règles

    Si vous souhaitez uniquement exécuter certaines règles, spécifiez les options suivantes :

    {
      runOnly: {
        type: "rule",
        values: [ "ruleId1", "ruleId2", "ruleId3" ]
      }
    }

    Cet exemple exécutera uniquement les règles avec l'ID de ruleId1, ruleId2 et ruleId3. Aucune autre règle ne sera exécutée.

  3. Exécuter toutes les règles activées à l’exception d’une liste de règles

    L'opération par défaut pour AxeDevTools.run consiste à exécuter toutes les règles WCAG 2.0 de niveau A et de niveau AA. Si certaines règles doivent être désactivées, indiquez options comme :

    {
      "rules": {
        "color-contrast": { enabled: false },
        "valid-lang": { enabled: false }
      }
    }

    Cet exemple désactivera les règles avec l'ID color-contrast ou valid-lang . Toutes les autres règles seront exécutées. La liste des identifiants de règles valides est spécifiée dans la section ci-dessous.

  4. Exécutez un ensemble de règles modifié à l'aide de balises et d'activation de règle

    Un ensemble modifié peut être défini en combinant runOnly avec type ensemble avec les balises souhaitées et en utilisant l'option rules . Cela vous permet d'inclure des règles avec des balises non spécifiées et d'exclure des règles avec la ou les balises spécifiées.

    {
      runOnly: {
        type: "tag",
        values: ["wcag2a"]
      },
      "rules": {
        "color-contrast": { enabled: true },
        "valid-lang": { enabled: false }
      }
    }

    Cet exemple inclut toutes les règles de niveau A à l'exception de valid-lang, et il inclura également la règle de contraste de couleur de niveau AA.

  5. Exécuter uniquement certaines règles, mais en exclure d’autres

    L'option runOnly peut accepter un objet avec une include et une exclude propriété. Seules les vérifications correspondant à une balise incluse seront exécutées, à l'exception de celles qui partagent une balise de la liste d'exclusion.

    {
      runOnly: {
        type: 'tags',
        value: {
          include: ['wcag2a', 'wcag2aa'],
          exclude: ['experimental']
        }
      }
    }

    Cet exemple inclut d'abord toutes les règles wcag2a et toutes les règles wcag2aa . Toutes les règles marquées comme experimental sont ensuite supprimées des règles à exécuter.

callback Paramètre

Le callback paramètre est une fonction qui sera appelée lorsque la fonction asynchrone AxeDevTools.run se terminera. La callback fonction reçoit deux paramètres. Le premier paramètre sera une erreur renvoyée dans axe DevTools si AxeDevTools.run ne peut pas être terminé. Si axe DevTools s'exécute correctement, le premier paramètre sera nul et le deuxième paramètre sera l'objet de résultats.

Retourner une promesse

Si le rappel n'a pas été défini, axe DevTools renverra une promesse à la place. Cependant, axe DevTools n'effectue pas de polyfill sur la bibliothèque de promesses. Ainsi, sur les systèmes sans prise en charge des promesses, cette fonctionnalité n'est pas disponible. Si vous n'êtes pas sûr que les systèmes sur lesquels vous aurez besoin d'axe DevTools prennent en charge des promesses, nous vous suggérons d'utiliser plutôt le rappel fourni par AxeDevTools.run .

error Résultat

Ce sera soit null ou un objet qui est une instance de Error. Si vous recevez constamment des erreurs, veuillez signaler ce problème à Deque Systems.

results Objet

La fonction de rappel transmise en tant que troisième paramètre de AxeDevTools.a11yCheck s'exécute sur l'objet results . Cet objet possède deux composants : un passes tableau et un violations tableau. passes Le tableau garde une trace de tous les tests réussis et des informations détaillées sur chaque test. Cela conduit à des tests plus efficaces, en particulier avec les tests manuels, car l'utilisateur peut facilement déterminer les tests déjà réussis. De même, violations le tableau garde une trace de tous les tests ayant échoué et des informations détaillées sur chacun d'eux.

url

L'URL de la page qui a été testée.

timestamp

La date et l’heure à laquelle l’analyse a été terminée.

passes et violations tableau
  • description - Une chaîne de texte qui décrit ce que fait la règle
  • help - Texte d'aide décrivant le test qui a été effectué
  • helpUrl - Une URL qui fournit plus d'informations sur les spécificités de la violation. Liens vers une page sur le site de Deque University.
  • id - Un identifiant unique pour la règle ; voir la liste des règles
  • impact - La gravité de la violation. Peut être l'un des suivants mineure, modérée, grave ou critique si la règle a échoué ou null si le test a été passé.
  • tags - Un tableau de balises attribuées à cette règle. Les balises peuvent être utilisées option dans l'objet pour sélectionner les règles à exécuter (voir [Paramètre Options] ci-dessus).(#options-parameter)
  • nodes - Un tableau de tous les éléments testés par la règle
    • html - Un extrait de code HTML de l'élément
    • impact - La gravité de la violation. Il peut s'agir de mineure, modérée, grave ou critique si le test a échoué ou null si le test a passé.
    • target - Un tableau de sélecteurs où chaque élément correspond à un niveau d'iframe ou de cadre. S'il y a un iframe ou un cadre, il doit y avoir deux entrées in target. S'il y a trois niveaux d'iframe, il doit y avoir quatre entrées in target.
    • any - Un ensemble de vérifications dont au moins une doit avoir passé. Chaque entrée du tableau contient :
      • id - Identifiant unique pour ce contrôle. Les identifiants de vérifications peuvent être identiques aux identifiants de règle.
      • impact - La gravité de la vérification. Il peut s'agir de mineur, modéré, grave ou critique. Chaque vérification faisant partie d'une règle peut avoir des impacts différents. L'impact le plus élevé de tous les tests qui échouent est signalé pour la règle.
      • message - La description de la raison pour laquelle ce test a réussi ou échoué.
      • data - Informations complémentaires facultatives spécifiques au type de test. Par exemple, une vérification du contraste des couleurs inclurait la couleur de premier plan, la couleur d'arrière-plan, le rapport de contraste, etc.
      • relatedNodes - Un tableau facultatif d'informations sur d'autres nœuds liés à ce test. Par exemple, une violation de vérification d'ID en double répertorierait les autres sélecteurs avec le même ID en double. Chaque entrée du tableau contient les informations suivantes :
        • target - Un tableau de sélecteurs pour le nœud associé
        • html - La source HTML du nœud associé
    • all - Un tableau de contrôles effectués où tous doivent avoir réussi. Chaque entrée du tableau contient les mêmes informations que le any tableau.
    • none - Un tableau de contrôles effectués dont aucun ne doit avoir réussi. Chaque entrée du tableau contient les mêmes informations que le any tableau.

Exemple Deux

Dans cet exemple, nous allons transmettre le sélecteur pour l'ensemble du document, ne transmettre aucune option, ce qui signifie que toutes les règles activées seront exécutées, et disposer d'une fonction de rappel simple qui enregistre l'intégralité de l'objet de résultats dans le journal de la console :

AxeDevTools.run(document, function (err, results) {
  if (err) throw err;
  console.log(results);
});
passes tableau
  • passes[0] ...

    • help - "Elements must have sufficient color contrast"
    • helpURL - "https://dequeuniversity.com/courses/html-css/visual-layout/color-contrast"
    • id - "color-contrast"
      • nodes
      • target[0] - "#js_off-canvas-wrap > .inner-wrap >.kinja-title.proxima.js_kinja-title-desktop"
  • passes[1] ...

Dans l'exemple ci-dessus, le passes tableau contient deux entrées correspondant aux deux règles testées. Le premier élément du tableau décrit une vérification du contraste des couleurs. Les champs help, helpUrl et id sont retournés pour chaque entrée dans le passes tableau. Le target tableau contient un élément avec une valeur de :

#js_off-canvas-wrap > .inner-wrap >.kinja-title.proxima.js_kinja-title-desktop

L'élément sélectionné par target[0] a été vérifié pour la règle de contraste de couleur et a réussi.

Chaque entrée suivante dans le tableau des passes a le même format mais détaillera les différentes règles qui ont été exécutées.

violations tableau
  • violations[0]

    • help - "<button> elements must have alternate text"
    • helpURL - "https://dequeuniversity.com/courses/html-css/forms/form-labels#id84_example_button"
    • id - "button-name"
      • nodes
      • target[0]
      • "post_5919997 > .row.content-wrapper > .column > span > iframe" * target[1]
      • "#u_0_1 > .pluginConnectButton > .pluginButtonImage > button"
  • violations[1] ...

Le violations tableau contient une entrée pour un test qui vérifie si les boutons ont un texte alternatif valide (la button-name règle). Cette première entrée dans le tableau a les help, helpUrl, et id champs.

Le target tableau démontre comment nous spécifions les sélecteurs lorsque le nœud spécifié est à l'intérieur d'un iframe ou frame. Le premier élément dans le target tableau (target[0]) spécifie le sélecteur pour le iframe contenant le bouton. Le deuxième élément dans le target tableau (target[1]) spécifie le sélecteur pour le bouton réel mais commence à l'intérieur de l'iframe sélectionné dans target[0].

Chaque entrée suivante dans le tableau des violations a le même format mais détaillera les règles qui ont généré des violations d'accessibilité.

Exemple Trois

Dans cet exemple, nous transmettons le sélecteur pour l'ensemble du document, activons deux règles de bonnes pratiques supplémentaires et disposons d'une fonction de rappel simple qui enregistre l'intégralité de l'objet de résultats dans le journal de la console :

AxeDevTools.run(
  document,
  {
    rules: {
      'heading-order': { enabled: true },
      'label-title-only': { enabled: true }
    }
  },
  function (err, results) {
    if (err) throw err;
    console.log(results);
  }
);