Outils de tests d'accessibilité
Tests modernes pour des composants modernes
Les outils et pratiques de test plus anciens peuvent ne pas fonctionner correctement avec les composants modernes. Voici comment vous assurer que votre produit numérique est accessible :
- Utilisez nos composants Web modernes que nous avons testés.
- Suivez les conseils en matière d'accessibilité sur nos pages de composants.
- Testez votre produit numérique dans votre contexte pour vous assurer qu'il est clair et qu'il fonctionne pour les personnes utilisant des technologies d'assistance.
Outils de test
Si vous voulez faire vos propres tests, voici quelques outils et processus que vous pouvez utiliser pour obtenir une meilleure couverture pour votre site Web ou votre application.
Ces outils ne sont pas fournis ni approuvés par le gouvernement du Canada. Référencez nos Conditions d'utilisation lorsque vous consultez des sites Web qui n'appartiennent pas au gouvernement du Canada.
Tests automatisés
Utilisez des outils automatisés pour détecter les problèmes d'accessibilité courants.
Code
-
Axe DevTools -
Google Lighthouse -
Pa11y CLI -
Firefox Accessibility Inspector -
Axe-core seul ou avec des cadres d’automatisation de navigateurs comme:-
Playwright -
Puppeteer
-
Figma
Stark contrast and accessibility checker
Code
Axe DevTools Pro Siteimprove Level Access
Arborescence d'accessibilité
Utilisez l'arborescence d'accessibilité pour le débogage des problèmes d'accessibilité Web. Elle affiche une version simplifiée des points d'arrêt DOM que les lecteurs d'écran et les technologies d'assistance utilisent pour interpréter le contenu.
Voici comment accéder à l'aborescence d'accessibilité dans différents navigateurs :
- Ouvrez les outils de développement en appuyant sur ctrl+maj+i sur PC ou cmd+option+i sur Mac.
- Sélectionnez l'onglet éléments.
- Sélectionnez le panneau Accessibilité.
- Si vous ne le voyez pas, sélectionnez (») puis Accessibilité.
- Ouvrez les outils de développement en appuyant sur ctrl+maj+i sur PC ou cmd+option+i sur Mac.
- Sélectionnez l'onglet Inspecteur.
- Sélectionnez un élément dans la structure HTML.
- Sélectionnez l'onglet Accessibilité dans la barre horizontale.
- Si vous ne voyez pas l'onglet Accessibilité, sélectionnez le menu à trois points (…) dans la barre des outils de développement, puis Paramètres.
- Sous la rubrique Outils de développement par défaut, activez l'onglet Accessibilité.
- Ouvrez les outils de développement en appuyant sur ctrl+maj+i sur PC ou cmd+option+i sur Mac.
- Sélectionnez l'onglet Elements.
- Sélectionnez le panneau Accessibility.
- Activez le menu développeur.
- Dans la barre de menu MacOS, sélectionnez Safari, puis Paramètres, puis Avancés.
- Cochez la case Afficher les fonctionnalités de développement Web.
- Ouvrez l'inspecteur Web en appuyant sur option+cmd+i.
- Sélectionnez l'onglet Éléments.
- Sélectionnez un élément, puis accédez à la section Noeud dans le menu de droite et faites défiler jusqu'au bas pour trouver la section Accessibilité.
Évaluations et tests d'utilisabilité
Il est important d'effectuer des tests auprès de personnes handicapées pour s'assurer que votre produit numérique est accessible. Vous pouvez le faire en utilisant un service gouvernemental pour évaluer votre produit, en recrutant vous-même des personnes handicapées pour la recherche ou en utilisant des services payants qui le feront pour vous.
Boîte à outils de l'accessibilité numérique
Fable
Contactez-nous
Si vous avez des questions ou rencontrez des obstacles lors de tests d'accessibilité supplémentaires visant Système de design GC, contactez-nous.