Référence de l'API JavaScript du navigateur pour axe DevTools for Web
Traite des API JavaScript du navigateur pour axe DevTools for Web et de leur utilisation
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 :
- Charger la page dans le système de test
- Vous pouvez également configurer les options de configuration de l'API JavaScript (
AxeDevTools.configure
) - Appeler l'API JavaScript d'analyse (
AxeDevTools.run
) - 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
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.
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
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 duhelpUrls
.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 fonctionAxeDevTools.run
passera à la fonction de rappelv1
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). Cetteoptions
fonction reçoit cetevaluate
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 fonctionevaluate
reçoit.enabled
- booléen (facultatif, par défauttrue
). 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'attributrules
est un tableau d'rule
objets. Chaquerule
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éfauttrue
). Cela indique si les éléments cachés doivent être transmis à la règle pour évaluation.enabled
- booléen (facultatif, par défauttrue
). Si la règle est activée (un attribut courant pour le remplacement).pageLevel
- booléen (facultatif, par défautfalse
). 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.
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 dudocument
[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 avecAxeDevTools.configure
, qui est plus permanent. Voir ci-dessus pour plus d'informationscallback
: (facultatif) La fonction de rappel qui reçoit soitnull
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 ouundefined
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 :
- 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")
:
- Exemple : Pour limiter l'analyse à l'élément
- 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 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
)
- Un sélecteur CSS comme nom de classe (par exemple,
- 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
-
Inclure le premier élément dans la
$fixture
NodeList mais exclure son premier enfant{ include: $fixture[0], exclude: $fixture[0].firstChild }
-
Inclure l'élément avec l'ID de
fix
mais exclure tous lesdiv
s qu'il contient{ include: [['#fix']], exclude: [['#fix div']] }
-
Inclure l'intégralité du document à l'exception de toutes les structures dont le parent contient la classe
exclude1
ouexclude2
{ 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
-
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
etwcag2aa
:{ runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] } }
-
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
etruleId3
. Aucune autre règle ne sera exécutée. -
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, indiquezoptions
comme :{ "rules": { "color-contrast": { enabled: false }, "valid-lang": { enabled: false } } }
Cet exemple désactivera les règles avec l'ID
color-contrast
ouvalid-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é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
avectype
ensemble avec les balises souhaitées et en utilisant l'optionrules
. 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. -
Exécuter uniquement certaines règles, mais en exclure d’autres
L'option
runOnly
peut accepter un objet avec uneinclude
et uneexclude
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ègleswcag2aa
. Toutes les règles marquées commeexperimental
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èglehelp
- 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èglesimpact
- La gravité de la violation. Peut être l'un des suivants mineure, modérée, grave ou critique si la règle a échoué ounull
si le test a été passé.tags
- Un tableau de balises attribuées à cette règle. Les balises peuvent être utiliséesoption
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èglehtml
- Un extrait de code HTML de l'élémentimpact
- La gravité de la violation. Il peut s'agir de mineure, modérée, grave ou critique si le test a échoué ounull
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 intarget
. S'il y a trois niveaux d'iframe, il doit y avoir quatre entrées intarget
.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 leany
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 leany
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);
}
);