Journalisation avec les API Node d'axe-DevTools

Il existe pratiquement une infinité de façons d'exploiter les résultats d'un scan Axe DevTools

Tous les scans d'accessibilité utilisant axe-core peuvent être configurés pour renvoyer leurs résultats sous forme d'objet JSON. Ce format est facile à utiliser pour les débutants en accessibilité web, offre la profondeur d'informations nécessaire aux experts chevronnés, et permet la génération de rapports automatisés et de tests personnalisés même en dehors d'un format de test standard basé sur des assertions.

Axe DevTools Logger

Si vous ne souhaitez pas générer de rapports dans l'un des formats proposés, mais que vous voulez sauvegarder vos résultats dans un fichier, Deque propose un composant pour gérer cela appelé Axe DevTools Logger. Avec ce module, vous pouvez écrire vos résultats de test dans un fichier directement lors de l'exécution de vos tests.

Pour l'installer, il nécessite les mêmes informations d'authentification que tout autre composant basé sur NodeJS d'Axe DevTools. Reportez-vous au guide d'installation pour la méthode que vous avez utilisée pour installer Axe DevTools à l'origine pour plus d'informations.

Pour installer le logger, exécutez la commande npm install @axe-devtools/logger pour npm ou yarn add @axe-devtools/logger pour yarn.

Utilisation du Axe DevTools Logger

Le logger est importé comme suit :

const { AxeDevToolsLogger } = require('@axe-devtools/logger');

De plus, vous pouvez importer le package en utilisant les modules ES6 :

import { AxeDevToolsLogger } from '@axe-devtools/logger';

Une fois importé, vous pouvez l'instancier comme ceci

const logger = new AxeDevToolsLogger('Report Name', '/path/to/a/directory');

Après avoir exécuté un scan et généré un objet de résultats, vous pouvez enregistrer le résultat dans un fichier avec cette commande

logger.logTestResult('\<test-name>', results-object);

Le fichier enregistré apparaîtra dans le répertoire que vous avez spécifié lors de l'instanciation du logger avec le nom de fichier Test-Reports-<test-name>.json.

Aperçu des résultats

Les sections suivantes décrivent les objets contenus dans le fichier JSON des résultats.

Méta

L'objet des résultats commence par quelques informations méta utiles. Celles-ci incluent le nom du test, l'adresse web de la page testée, la date et l'heure du test, le jeu de règles axe-core utilisé, et plus encore.

Constats

Le début des résultats est marqué par le titre "constats". Il y a quatre types de résultats, chacun avec leur propre tableau. Ces types de résultats sont non applicables, incomplets, réussites et violations. De plus, il y a des données spécifiques au test situées juste avant le tableau des violations.

Non applicables

Non applicable signifie qu'il n'y avait pas de contenu de page pertinent pour ce test particulier, par exemple des tests liés aux formulaires sur une page sans formulaires.

Incomplets

Incomplets sont des tests qui ont été exécutés, mais les résultats nécessitent un examen plus approfondi pour déterminer dans quelle catégorie ils doivent finalement être classés. Un cas fréquent d'incomplet se présente lors de vérifications du contraste de couleur sur des éléments avec des arrière-plans de couleur variable où il n'est pas toujours clair si le contraste est suffisant. Les problèmes de cette catégorie ne doivent pas être automatiquement traités comme des violations, car ils peuvent l'être ou non. Pour les utilisateurs ayant plus de connaissances en accessibilité, un examen approfondi de ces résultats peut aider à trouver des violations supplémentaires qui ne peuvent pas être testées automatiquement.

Réussites

Ce groupe de résultats énumère les règles vérifiées qui n'ont trouvé aucune violation d'accessibilité associée. Pour chaque règle réussie, un tableau d'éléments de page vérifiés par rapport à la règle et réussis est associé.

Violations

Le tableau des violations contient toutes les violations d'accessibilité trouvées lors du scan. Grâce à la politique de zéro faux positif de Deque, tout résultat trouvé ici est garanti d'être authentique. Chaque violation contient des informations supplémentaires sur la nature de la violation, son emplacement sur la page, des suggestions pour la corriger, et plus encore. Consultez la référence de champ ci-dessous pour plus d'informations.

Référence de Champ - Réussites et Violations

Les champs contenus dans les objets réussites et violations sont énumérés ci-dessous :

• description — Chaîne de texte décrivant ce que fait la règle
• help — Texte d'aide décrivant le test effectué
• helpUrl — URL fournissant plus d'informations sur les spécificités de la violation. Lien vers une page du site Deque University.
• id — Identifiant unique pour la règle ; voir la liste des règles.
• impact — Gravité de la violation. Peut être mineur, modéré, sérieux ou critique si le test a échoué ou nul si le test a réussi.
• tags — Tableau de tags assignés à cette règle. Ces tags peuvent être utilisés dans la structure d'options pour sélectionner les règles exécutées (voir paramètres attest.a11yCheck).
• nodes — Tableau de tous les éléments testés par la règle
  • html — Extrait HTML de l'élément
  • impact — Gravité de la violation. Peut être mineur, modéré, sérieux ou critique si le test a échoué ou nul si le test a réussi.
  • target — Tableau de sélecteurs où chaque élément correspond à un niveau d'iframe ou de frame. S'il y a un iframe ou un frame, 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 — Tableau de vérifications effectuées où au moins une doit avoir réussi. Chaque entrée dans le tableau contient :
  • id — Identifiant unique pour cette vérification. Les ids de vérification peuvent être les mêmes que les ids de règle
  • impact — Gravité de cette vérification particulière. Peut être mineur, modéré, sérieux ou critique. Chaque vérification faisant partie d'une règle peut avoir des impacts différents. L'impact le plus élevé parmi toutes les vérifications ayant échoué est rapporté pour la règle
  • message — Description de la raison pour laquelle cette vérification a réussi ou échoué
  • data — Informations supplémentaires spécifiques au type de vérification qui sont optionnelles. Par exemple, une vérification du contraste de couleur inclurait la couleur de premier plan, la couleur de fond, le rapport de contraste, etc.
  • relatedNodes — Tableau optionnel d'informations sur d'autres nœuds liés à cette vérification. Par exemple, une violation de vérification d'identifiants dupliqués listerait les autres sélecteurs ayant ce même identifiant dupliqué. Chaque entrée du tableau contient les informations suivantes :
    • target — Tableau de sélecteurs pour le nœud lié
    • html — Source HTML du nœud concerné
  • all — Tableau de vérifications qui ont été effectuées où toutes doivent avoir réussi. Chaque entrée du tableau contient les mêmes informations que le tableau any
  • none — Tableau de vérifications qui ont été effectuées où aucune ne doit avoir réussi. Chaque entrée du tableau contient les mêmes informations que le tableau any

De plus, l'objet de résultats JSON facilite l'écriture de vos propres tests personnalisés. Au-delà des assertions de violations d'accessibilité standards, vous pouvez découper l'objet de résultats par violations, leur gravité, leur impact, le jeu de règles associé, ou l'un des paramètres dans l'objet de résultats. Toutes les données présentées dans l'objet de résultats peuvent donc être testées.

Prochaines étapes

Deque facilite le partage et l'assimilation des résultats de vos analyses avec notre rapporteur. Il est configurable pour produire des rapports HTML, JUnit XML ou CSV et une fois configuré, renvoie les rapports automatiquement. Voir le guide du rapporteur pour savoir comment configurer et utiliser le rapporteur.

Vous pouvez également télécharger vos résultats sur Axe Developer Hub. Voir Utiliser la CLI pour envoyer les résultats d'accessibilité à Axe Developer Hub.