Référence de l'API JavaScript du navigateur pour Axe DevTools pour le 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

Discute des API JavaScript du navigateur pour Axe DevTools pour le 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é. Elle offre les avantages suivants :

Fonctionne dans tous les navigateurs modernes
Conçue pour fonctionner avec l'infrastructure de test existante
Fonctionne localement ; aucune connexion à un serveur tiers n'est nécessaire
Effectue des vérifications de violations sur plusieurs niveaux d'iframes imbriqués
Fournit une liste de règles et d'éléments qui ont passé la vérification d'accessibilité, garantissant que les règles ont été appliquées à l'ensemble du document

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 listant les violations d'accessibilité trouvées.

L'API Axe DevTools peut être utilisée dans le cadre d'un processus plus large qui est effectué sur de nombreuses pages d'un site Web, voire sur toutes. L'API analyse le contenu des pages Web et renvoie un objet JSON listant les violations d'accessibilité trouvées. Voici comment commencer :

Charger la page dans le système de test
Facultativement, définir les options de configuration pour l'API JavaScript (AxeDevTools.configure)
Appeler l'API JavaScript d'analyse (AxeDevTools.run)
Soit valider par rapport aux résultats, soit les enregistrer pour un traitement ultérieur

Référence de l'API

Vue d'ensemble

Les API Axe DevTools sont fournies dans le fichier JavaScript axe-devtools.js. Il doit être inclus dans la page Web à tester. 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 constitué de sous-tests. Chaque sous-test est retourné dans un tableau de 'vérifications'
Le "helpUrl" dans l'objet de résultats renvoie à une description plus large du problème d'accessibilité et des suggestions de remédiation. Tous les liens pointent vers les pages d'aide de Deque University.

`AxeDevTools.init`

note

Cette API n'est pas disponible via l'un des bindings spécifiques aux langages tels que @axe-devtools/script-builder, car ces bindings ont leurs propres API pour réaliser la même chose.

Objectif

Initialiser l'API Axe DevTools pour utiliser l'un des jeux de règles standards intégrés.

Description

Initialise le moteur Axe DevTools, remplaçant le jeu 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 se remplaceraient mutuellement.

Synopsis

AxeDevTools.init(ruleSetID);

Paramètres

ruleSetID - facultatif Chaîne identifiant le jeu de règles. Les valeurs valides actuelles sont :
- 508
- en301549
- rgaav4
- ttv5
- wcag2
- wcag21
- wcag22
- wcag2aaa
- wcag21aaa
- wcag22aaa

Retourne : indéfini

`AxeDevTools.ruleSets`

note

Cette API n'est pas disponible via l'un des bindings spécifiques aux langages tels que @axe-devtools/script-builder car ces bindings ont leurs propres API pour réaliser la même chose.

Objectif

Un tableau des définitions de jeux de règles standards

Description

Donne un accès direct au tableau de définition des jeux de règles standards. Le tableau se compose d'objets JavaScript avec la structure suivante :

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

Premier Exemple

Comment filtrer le tableau pour trouver la définition de l'ensemble de règles des niveaux A et AA de la WCAG 2.

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

`AxeDevTools.getRules`

Objectif

Obtenir des informations sur toutes les règles du système

Description

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

Synopsis

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

Paramètres

tags - optionnel Tableau de tags utilisé pour filtrer les règles renvoyées. Si 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 {ruleId: <id>, description: <desc>}

L'ensemble actuel de tags pris en charge est listé dans le tableau suivant :

Nom du tag	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
RGAAv4	RGAA Version 4
TTv5	Trusted Tester v5
meilleures-pratiques	Meilleures pratiques recommandées par Deque

Exemple 1

Dans cet exemple, nous passons les tags WCAG 2 A et AA dans AxeDevTools.getRules pour récupérer uniquement ces règles. L'appel de la 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

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 dans la bibliothèque pour s'exécuter.

Description

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

Synopsis

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

Paramètres

configurationOptions - Objet Options où les paires nom/valeur valides sont :
- branding - mixte (optionnel) Utilisé pour définir le branding de helpUrls.
  - brand - chaîne (optionnel) définit la chaîne de marque—par défaut : « worldspace »
  - application - chaîne (optionnel) définit la chaîne de l'application—par défaut : « AxeDevToolsAPI »
- reporter - Utilisé pour définir le format de sortie que la fonction AxeDevTools.run transmettra à 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 vérifications à la liste des vérifications utilisées par les règles ou pour remplacer les propriétés des vérifications existantes.
  - L'attribut checks est un tableau d'objets vérification.
  - Chaque objet vérification peut contenir les attributs suivants :
  - id - chaîne (obligatoire). Cela identifie de manière unique la vérification. Si la vérification existe déjà, toutes les propriétés de vérification fournies seront remplacées. Les propriétés ci-dessous marquées requis si nouveau sont optionnelles lorsque la vérification est remplacée.
  - evaluate - fonction (requis si nouveau). C'est la fonction qui implémente la fonctionnalité de la vérification.
  - after - fonction (optionnel). Cette fonction est appelée pour les vérifications qui opèrent au niveau de la page pour traiter les résultats des iframes.
  - options - mixte (optionnel). Cet objet options est passé à la fonction evaluate et est destiné à être utilisé pour configurer les vérifications. C'est la propriété la plus courante à remplacer pour les vérifications existantes.
  - matches - chaîne (optionnel). Cette chaîne de sélecteur CSS filtrera les nœuds passés à la fonction evaluate.
  - enabled - booléen (optionnel, par défaut true). Cela indique si la vérification est activée ou désactivée par défaut. Les vérifications désactivées ne sont pas évaluées, même lorsqu'elles sont incluses dans une règle. Remplacer cette option est un moyen courant de désactiver une vérification particulière dans plusieurs règles.
- rules - Utilisé pour ajouter des règles à l'ensemble existant de règles ou pour remplacer les propriétés des règles existantes. L'attribut rules est un tableau d'objets rule. Chaque objet rule peut contenir les attributs suivants :
  - id - chaîne (obligatoire). Cela identifie de manière unique la règle. Si la règle existe déjà, elle sera remplacée par tous les attributs fournis. Les attributs ci-dessous, marqués comme requis, ne sont requis que pour les nouvelles règles.
  - selector - chaîne (optionnel, par défaut *). Un sélecteur CSS utilisé pour identifier les éléments passés dans la règle pour l'évaluation.
  - excludeHidden - booléen (optionnel, par défaut true). Cela indique si les éléments cachés doivent être passés à la règle pour l'évaluation.
  - enabled - booléen (optionnel, par défaut true). Indique si la règle est activée (un attribut commun pour remplacement).
  - pageLevel - booléen (optionnel, par défaut false). Cela indique si la page fonctionne uniquement lorsque la portée est l'ensemble de la page. Un exemple de règle comme celle-ci est la règle lien de saut. Il n'est pas recommandé de remplacer cette propriété à moins que l'implémentation ne soit également modifiée.
  - any - tableau (optionnel, par défaut []). C'est la liste de vérifications qui doivent toutes réussir ou il y a une violation.
  - all - tableau (optionnel, par défaut []). C'est la liste des vérifications, dont l'échec générera une violation.
  - none - tableau (optionnel, par défaut []). C'est la liste des vérifications qui, si aucune ne réussit, générera une violation.
  - tags - tableau (optionnel, par défaut []). Une liste des balises qui classifier la règle. En pratique, vous devez fournir des balises valides, sinon l'évaluation par défaut n'invoquera pas la règle. La convention est d'inclure la norme (WCAG 2 et/ou section 508), le niveau WCAG 2, le paragraphe Section 508 et les critères de succès 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, WCAG 2 A critères de succès 1.1.1 deviendrait ["wcag2a", "wcag111"]
  - matches - chaîne (optionnel, par défaut *). Un sélecteur CSS qui exclura les éléments qui ne correspondent pas.

Retourne : Rien

`AxeDevTools.reset`

Objectif

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

Description

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

note

Cela ne pas désinscrira pas les nouvelles règles ou vérifications qui ont été enregistrées, mais remettra la configuration à la configuration par défaut pour tout le reste.

Synopsis

AxeDevTools.reset();

Paramètres

Aucun

Retourne : indéfini

`AxeDevTools.run`

Objectif

Analyser la page actuellement chargée.

Description

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

Synopsis

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. Cela sera généralement le document ou un sélecteur spécifique tel que le nom de classe, l'ID, le sélecteur, etc.
options : (facultatif) Ensemble d'options passées dans les règles ou vérifications, 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 en tant que premier paramètre, et le objet des résultats lorsque l'analyse est terminée avec succès ou undefined si ce n'est pas le cas.

Paramètre `context`

Par défaut, AxeDevTools.run testera l'ensemble du document. L'objet context est un paramètre facultatif qui spécifie quel élément doit et ne doit pas être testé. Il peut recevoir l'une des options suivantes :

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")
Une NodeList telle que renvoyée par document.querySelectorAll.
Un sélecteur CSS qui sélectionne la partie du document qui doit être analysée. Cela inclut :
- Un sélecteur CSS en tant que nom de classe (par exemple, .classname)
- Un sélecteur CSS en tant que nom de nœud (par exemple, div)
- Un sélecteur CSS d'un ID d'élément (par exemple, #tag)
Un objet d'inclusion-exclusion (voir ci-dessous)

Objets `include` et `exclude`

L'objet d'inclusion-exclusion est un objet JSON avec deux attributs : include et exclude. Soit include soit exclude est requis. Si seul exclude est spécifié, include se définira par défaut sur l'ensemble de 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 sont à l'intérieur d'iframes (ou d'iframes dans des iframes dans des iframes). Dans ce cas, les n-1 premiers sélecteurs sélectionnent le(s) iframe(s), et le n-ième sélecteur sélectionne la ou les région(s) à l'intérieur de l'iframe.

Exemples de Paramètre `context`

Inclure le premier élément dans le NodeList $fixture mais exclure son premier enfant
```
{
  include: $fixture[0],
  exclude: $fixture[0].firstChild
}
```
Inclure l'élément avec l'ID de fix mais exclure tout div à l'intérieur
```
{
  include: [['#fix']],
  exclude: [['#fix div']]
}
```
Inclure l'ensemble du document sauf toutes les structures dont le parent contient la classe exclude1 ou exclude2
```
{
  exclude: [['.exclude1'], ['.exclude2']];
}
```

Paramètre `options`

Le paramètre options est une façon 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 sauf la liste des règles spécifiées.
Exécuter un ensemble spécifique de règles fournies sous forme d'une liste d'IDs de règles.

Exemples de Paramètre `options`

Exécuter uniquement les Règles pour une norme d'accessibilité

Il existe certaines normes définies qui peuvent être utilisées pour sélectionner un ensemble de règles. Les normes définies 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	Testeur de Confiance v5
meilleure-pratique	Meilleures pratiques approuvées par Deque

Pour exécuter uniquement les règles du WCAG 2.0 Niveau A, spécifiez options comme suit :

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

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

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

Exécuter uniquement une liste spécifiée de règles

Si vous souhaitez exécuter uniquement certaines règles, spécifiez les options comme suit :
```
{
  runOnly: {
    type: "rule",
    values: [ "ruleId1", "ruleId2", "ruleId3" ]
  }
}
```
Cet exemple n'exécutera que les règles avec les identifiants ruleId1, ruleId2 et ruleId3. Aucune autre règle ne sera exécutée.
Exécuter toutes les règles activées sauf pour une liste de règles

L'opération par défaut pour AxeDevTools.run est d'exécuter toutes les règles du WCAG 2.0 Niveau A et Niveau AA. Si certaines règles doivent être désactivées, spécifiez options comme suit :
```
{
  "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.
Exécuter un ensemble modifié de règles en utilisant des balises et l'activation de règle

Un ensemble modifié peut être défini en combinant runOnly avec type réglé sur 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 les 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 sauf pour valid-lang, et inclura également la règle de contraste des couleurs de niveau AA.
Exécuter uniquement certaines balises, mais en exclure d'autres

L'option runOnly peut accepter un objet avec une propriété include et exclude. Seuls les contrôles correspondant à une balise incluse seront exécutés, à l'exception de ceux partageant 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 wcag2aa. Toutes les règles marquées comme experimental sont ensuite retirées des règles à exécuter.

Paramètre `callback`

Le paramètre callback est une fonction qui sera appelée lorsque la fonction asynchrone AxeDevTools.run se termine. La fonction callback reçoit deux paramètres. Le premier paramètre sera une erreur lancée à l'intérieur d'Axe DevTools si AxeDevTools.run ne peut pas se terminer. Si Axe DevTools s'est terminé correctement, le premier paramètre sera nul, et le second sera l'objet des résultats.

Retourner une promesse

Si le rappel n'était pas défini, Axe DevTools retournera une promesse à la place. Cependant, Axe DevTools ne fournit pas de bibliothèque de promesses polyfill. Ainsi, sur les systèmes sans support pour les 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 ont un support pour les promesses, nous vous suggérons d'utiliser le rappel fourni par AxeDevTools.run à la place.

Résultat `error`

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

Objet `results`

La fonction de rappel passée en tant que troisième paramètre de AxeDevTools.a11yCheck s'exécute sur l'objet results. Cet objet a deux composants : un tableau passes et un tableau violations. Le tableau passes garde une trace de tous les tests réussis et fournit des informations détaillées sur chaque test. Cela conduit à un test plus efficace, surtout lors de tests manuels, car l'utilisateur peut facilement déterminer les tests déjà réussis. De même, le tableau violations garde une trace de tous les tests échoués 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é complétée.

`passes` et tableau `violations`

description - Une chaîne de texte qui décrit ce que fait la règle
help - Texte d'aide qui décrit le test effectué
helpUrl - Une URL qui fournit plus d'informations sur les détails de la violation. Lien vers une page sur le site 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 de mineur, modéré, sérieux ou critique si la règle a échoué ou null si le contrôle a réussi.
tags - Un tableau de tags assignés à cette règle. Les tags peuvent être utilisés dans l'objet option pour sélectionner quelles règles sont exécutées (voir Paramètre Options ci-dessus).
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 l'infraction. Peut être l'un des mineur, modéré, sérieux ou critique si le test a échoué ou null si le contrôle a réussi.
- 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 devrait y avoir deux entrées dans target. S'il y a trois niveaux d'iframe, il devrait y avoir quatre entrées dans target.
- any - Un tableau de contrôles où au moins un doit avoir réussi. Chaque entrée du tableau contient :
  - id - Identifiant unique pour ce contrôle. Les identifiants de contrôle peuvent être les mêmes que les identifiants de règle.
  - impact - La gravité du contrôle. Peut être l'un des mineur, modéré, sérieux ou critique. Chaque contrôle faisant partie d'une règle peut avoir des impacts différents. L'impact le plus élevé de tous les contrôles échoués est rapporté pour la règle.
  - message - La description de la raison pour laquelle ce contrôle a réussi ou échoué.
  - data - Informations supplémentaires et optionnelles spécifiques au type de contrôle. Par exemple, un contrôle de contraste des couleurs inclurait la couleur de premier plan, la couleur de fond, le ratio de contraste, etc.
  - relatedNodes - Un tableau optionnel d'informations sur d'autres nœuds liés à ce contrôle. Par exemple, une violation de vérification d'ID en double listerait 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 lié
    - html - La source HTML du nœud lié
- 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 tableau any.
- none - Un tableau de contrôles effectués où aucun n'a dû réussir. Chaque entrée du tableau contient les mêmes informations que le tableau any.

Exemple Deux

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

AxeDevTools.run(document, function (err, results) {
  if (err) throw err;
  console.log(results);
});

tableau `passes`

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 tableau passes contient deux entrées correspondant aux deux règles testées. Le premier élément du tableau décrit un contrôle de contraste des couleurs. Les champs help, helpUrl et id sont renvoyés pour chaque entrée du tableau passes. Le tableau target 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 des couleurs et a réussi.

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

tableau `violations`

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] ...

The violations array contains one entry for a test that checks if buttons have valid alternate text (the button-name rule). This first entry in the array has the help, helpUrl, and id fields.

The target array demonstrates how we specify the selectors when the node specified is inside an iframe or frame. The first element in the target array (target[0]) specifies the selector to the iframe containing the button. The second element in the target array (target[1]) specifies the selector to the actual button but starts from inside the iframe selected in target[0].

Exemple Trois

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

In this example, we pass the selector for the entire document, enable two additional best practice rules, and have a simple callback function that logs the entire results object to the console log:

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

Référence de l'API JavaScript du navigateur pour Axe DevTools pour le Web

Introduction

Commencer

Référence de l'API

Vue d'ensemble

Notes sur l'API

AxeDevTools.init

Objectif

Description

Synopsis

Paramètres

AxeDevTools.ruleSets

Objectif

Description

Premier Exemple

AxeDevTools.getRules

Objectif

Description

Synopsis

Paramètres

Exemple 1

AxeDevTools.configure

Objectif

Description

Synopsis

Paramètres

AxeDevTools.reset

Objectif

Description

Synopsis

Paramètres

AxeDevTools.run

Objectif

Description

Synopsis

Paramètres pour AxeDevTools.run

Paramètre context

Objets include et exclude

Exemples de Paramètre context

Paramètre options

Exemples de Paramètre options

Paramètre callback

Retourner une promesse

Résultat error

Objet results

url

timestamp

passes et tableau violations

Exemple Deux

tableau passes

tableau violations

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

Is this page helpful?

Help us improve this page

Still need help?

`AxeDevTools.init`

`AxeDevTools.ruleSets`

`AxeDevTools.getRules`

`AxeDevTools.configure`

`AxeDevTools.reset`

`AxeDevTools.run`

Paramètres pour `AxeDevTools.run`

Paramètre `context`

Objets `include` et `exclude`

Exemples de Paramètre `context`

Paramètre `options`

Exemples de Paramètre `options`

Paramètre `callback`

Résultat `error`

Objet `results`

`url`

`timestamp`

`passes` et tableau `violations`

tableau `passes`

tableau `violations`