Référence de l'API WebDriverJS pour axe DevTools for Web

Constructeur

Dans la configuration standard, le seul argument devant être passé au constructeur axe DevTools est l'instance WebDriverJS. Si vous souhaitez utiliser une version d'axe-core différente de celle incluse à l'origine ou un ensemble de règles personnalisé, vous pouvez passer ces options au constructeur.

Constructeur axe DevTools WebDriverJS :

AxeDevToolsBuilder(driver:WebDriver, String:ruleset|Object:axe (optional))

Vous devez passer une instance d'un Selenium WebDriver comme premier argument. Le deuxième argument facultatif peut être soit un ID d'ensemble de règles, soit un axe objet. Si vous ne fournissez pas de deuxième argument, vous devez configurer le fichier de configuration de règle personnalisée @axe-devtools/script-builder, sinon le constructeur lèvera une exception.

Ces exemples montrent comment utiliser le constructeur :

// instantiate with the Section 508 rule set
const builder = new AxeDevToolsBuilder(driver, '508');

// or with a specific axe instance
const axe = require('../axe-core-2.3.0');
const builder = new AxeDevToolsBuilder(driver, axe);

Règles personnalisées

Pour plus d'informations sur l'utilisation de règles personnalisées avec axe DevTools for Web, lisez le guide sur la génération et l'intégration de jeux de règles personnalisés dans le guide CLI.

analyser

La méthode analyze() exécute l'analyse et renvoie les résultats de l'analyse d'accessibilité.

analyze(): Promise<axe.AxeResults>

Exécute une analyse en utilisant la configuration par défaut sur le client donné. Un objet Promise est renvoyé, qui se résout avec l'ensemble de résultats d'accessibilité renvoyé par axe-core.

Options de chaînage

Il existe deux options pour définir la portée de vos analyses axe DevTools. Vous pouvez choisir d'inclure ou d'exclure des portées CSS spécifiques. Les méthodes de chaîne (ci-dessous) sur le constructeur rendent cela possible.

comprend

new AxeDevToolsBuilder(driver).include('<CSS-Selector>');

Ajoute un sélecteur CSS à la liste des éléments à inclure dans l'analyse. Les éléments hors de la portée passé à include() ne seront pas analysés.

exclure

new AxeDevToolsBuilder(driver).exclude('<CSS-Selector>');

Ajoutez un sélecteur CSS à la liste des éléments à exclure de l'analyse. Seuls les éléments hors de la portée passé à exclude() seront analysés.

Ces méthodes peuvent être enchaînées pour affiner davantage la portée de l'analyse, comme indiqué ci-dessous :

new AxeDevToolsBuilder(driver).include('<CSS-Selector>').exclude('<Inner-CSS-Selector>');

Dans cet exemple, tous les éléments à l'intérieur de <CSS-Selector> seraient analysés, à l'exception des éléments à l'intérieur de <Inner-CSS-Selector>.

Configuration des règles

Les méthodes de configuration des règles remplacent la configuration des règles standard. Les appels supplémentaires avec ces méthodes écraseront les appels précédents.

withRules

La withRules() méthode limite l'analyse uniquement aux règles avec les ID de règle spécifiés. Il accepte une chaîne pour un seul ID de règle ou un tableau de plusieurs ID de règle.

Ces exemples montrent l'utilisation withRules avec un seul ID de règle ou un tableau d'ID de règles :

//with a single rule ID
AxeDevToolsBuilder(driver).withRules('html-lang');

//with an array of rule IDs
AxeDevToolsBuilder(driver).withRules(['html-lang', 'image-alt']);

avecTags

La méthode limite withTags() l'analyse aux seules règles associées à la balise fournie. Accepte une seule balise ou un tableau de balises, comme indiqué ci-dessous :

//with a single tag
AxeDevToolsBuilder(driver).withTags('wcag2a');

//with an array of tags
AxeDevToolsBuilder(driver).withTags(['wcag2a', 'wcag2aa']);

Désactiver les règles

AxeDevToolsBuilder.disableRules(rules: RuleID[]): AxeDevToolsBuilder

La méthode disableRules() fait en sorte que le tableau de règles fourni soit ignoré lors de l'exécution d'une analyse.

Options d'axe-core

options

.options(options: Axe.RunOptions)

La méthode options spécifie les options à utiliser par axe.run. Cela remplacera toutes les autres options configurées, y compris les appels à withRules et withTags. Consultez la documentation de l'API axe-core pour plus d'informations.

new AxeDevToolsBuilder(page).options({
  checks: { 'valid-lang': ['orcish'] }
});

configurer

.configure(config: Axe.Spec)

La méthode configure injecte un objet de configuration d'axe pour modifier l'ensemble de règles avant une analyse. Les appels ultérieurs à cette méthode invalideront les précédents en appelant axe.configure() et en remplaçant l'objet de configuration. Voir la documentation de l'API axe-core pour la structure de l'objet.

L'exemple suivant crée une nouvelle configuration axe-core et la transmet à axe DevTools pour être utilisée pour l'analyse :

const config = {
  checks: [Object],
  rules: [Object]
};
const results = await new AxeDevToolsBuilder(page).configure(config).analyze();

Service d'utilisation

Par défaut, le service d'utilisation est désactivé et l'URL par défaut est https://usage.deque.com.

Variables d’environnement

Cette méthode permet aux utilisateurs de modifier des valeurs spécifiques du service d'utilisation via des variables d'environnement.

Activer le suivi

Cette méthode permet aux utilisateurs de choisir d’envoyer des données au service d’utilisation.

.enableTracking(state: boolean)

AxeDevToolsBuilder(driver).enableTracking(true)

setTrackingUrl

Cette méthode permet aux utilisateurs de modifier l’endroit où les données des mesures d’utilisation sont envoyées.

.setTrackingUrl(url: string)

AxeDevToolsBuilder(driver).setTrackingUrl('https://foobar.biz')

définirDistinctId

Cette méthode permet aux utilisateurs de modifier l’ID distinct stocké ou utilisé.

.setDistinctId(distinctId: string)

AxeDevToolsBuilder(driver).setDistinctId('foobar')