Commencer avec Axe Watcher
Comment commencer à utiliser Axe Watcher avec vos suites de tests
Ce guide vous guide dans la configuration d'Axe Watcher pour ajouter des tests d'accessibilité automatisés à votre suite de tests de bout en bout existante.
Comprendre Watcher et Axe Developer Hub
Axe Watcher est une source d'entrée pour Axe Developer Hub que vous intégrez à votre suite de tests, tandis qu'Axe Developer Hub est la plateforme web où vous visualisez et gérez vos résultats d'accessibilité. Ils travaillent ensemble comme une solution complète de tests d'accessibilité :
Axe Watcher s'exécute avec vos tests automatisés, analysant chaque page visitée par vos tests pour détecter les problèmes d'accessibilité. Il détecte les changements du DOM et capture plusieurs états de la page, ce qui le rend idéal pour tester du contenu dynamique comme les applications à page unique, les flux de connexion et les composants interactifs. Lorsqu'il est intégré à Git, Watcher associe les résultats avec des commits et branches spécifiques.
Axe Developer Hub reçoit les résultats d'accessibilité de sources d'entrée telles que Watcher et les présente dans une interface organisée. Vous pouvez suivre les problèmes d'accessibilité au fil des commits, comparer les branches, filtrer par gravité et surveiller le progrès d'accessibilité de votre projet au fil du temps. La plateforme dédoublonne les problèmes, de sorte que chaque problème unique est visible une seule fois.
Étapes de configuration
Ces étapes supposent que vous avez un Compte Axe et que vous avez accès à un abonnement Axe Developer Hub.
Pour obtenir de l'aide avec votre compte Axe ou votre abonnement Axe Developer Hub, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance, ou envoyez-nous un e-mail.
1. Créez un projet Watcher
Un projet dans Axe Developer Hub contient vos résultats d'accessibilité, vos informations de test et les données Git. Chaque projet dispose d'un identifiant unique qui relie vos exécutions de tests à celui-ci.
Pour créer un projet :
- Visitez la page de démarrage Axe Developer Hub ou cliquez sur Ajouter un nouveau projet depuis votre page Projets.
- Choisissez Axe Watcher sur la page Choisissez votre méthode d'intégration.
- Nommez votre projet.
- Sélectionnez votre langage de programmation.
- Choisissez votre plateforme d'automatisation de navigateur.
Pour des instructions complètes, voir Configurer les projets.
2. Modifiez votre suite de tests
L'intégration de Watcher nécessite peu de modifications à vos tests existants. Le processus général implique :
- Installer le paquet Watcher
- Importer les fonctions de configuration et les classes de contrôleur
- Envelopper votre configuration de navigateur avec la fonction de config de Watcher
- Envelopper votre configuration de navigateur ou votre instance de page avec Watcher
- Purger vos résultats après chaque test pour envoyer les résultats à Axe Developer Hub
La mise en œuvre spécifique varie selon la plateforme. Choisissez votre langage dans les liens ci-dessous pour être dirigé vers des instructions spécifiques à votre plateforme d'automatisation de navigateur :
Si vous n'avez pas de suite de tests existante à modifier, le dépôt d'exemples Axe Watcher fournit des exemples de travail pour chaque plateforme prise en charge.
3. Exécutez vos tests et vérifiez les résultats
Une fois que vous avez modifié votre suite de tests, exécutez-la comme vous le feriez normalement. Watcher analyse automatiquement les pages et envoie les résultats à Axe Developer Hub.
Après que l'exécution du test soit terminée, visitez votre projet dans Axe Developer Hub pour examiner les résultats. Vous verrez :
- Page des branches (projets Git) : Affiche toutes les branches analysées avec des résumés d'accessibilité.
- Page des commits (projets Git) : Affiche les commits dans une branche avec des données de comparaison.
- Page des tests exécutés (projets non-Git) : Affiche chaque exécution de test avec des horodatages et des comptes de problèmes.
- Page récapitulative : Affiche toutes les règles d'accessibilité violées avec des comptes de problèmes par impact.
- Page des détails : Fournit des informations détaillées sur chaque violation, y compris l'emplacement de l'élément, le code source et les conseils de remédiation.
Pour des conseils sur la navigation de vos résultats, consultez Comprendre les résultats.
Prochaines étapes
- Automatiser les vérifications d'accessibilité dans le CI/CD : Utilisez le GitHub Action pour bloquer les pull requests avec des erreurs d'accessibilité, ou intégrez-vous avec d'autres plateformes en utilisant le service REST
- Personnalisez vos tests : Découvrez le mode manuel pour contrôler les pages à analyser
- Configurer des seuils : Configurez le seuil a11y pour définir la tolérance de votre organisation aux erreurs d'accessibilité
- Utiliser une configuration globale : Appliquez des normes d'accessibilité cohérentes à travers votre organisation