Tous les navigateurs Web modernes intègrent des outils de développement indispensables au développement Web. À ce jour, vous avez sans doute déjà entendu parler, voire utilisé, l'extension de navigateur « axe DevTools » pour Google Chrome, Microsoft Edge ou Mozilla Firefox. L'extension « axe DevTools » est extrêmement utile pour détecter et corriger les problèmes d'accessibilité, sans qu'il soit nécessaire d'être un expert en la matière.
En associant les outils de développement web intégrés à la puissance de l'extension Axe DevTools, vous pouvez multiplier l'efficacité de vos travaux de développement et de test web. Dans cet article, je me concentrerai principalement sur des conseils relatifs à Google Chrome DevTools, mais gardez à l'esprit que la plupart de ces astuces s'appliquent également à d'autres navigateurs.
Avant de commencer, il est important de savoir comment ouvrir les outils de développement de Chrome. Il existe des raccourcis clavier ou des commandes à la souris pour ouvrir le volet des outils de développement. Je trouve que le moyen le plus rapide consiste à faire un clic droit n'importe où sur la page Web que vous souhaitez tester, puis à sélectionner « Inspecter » dans le menu. Une fois les outils de développement ouverts, vous pouvez basculer sur l'onglet « axe DevTools » et vous lancer. Consultez cet article pour plus de détails.
Astuce n° 1 – Modifier les paramètres de l'extension du navigateur
Lors de la première installation de l'extension de navigateur axe DevTools, celle-ci ne disposera pas des autorisations nécessaires pour fonctionner dans une session de navigation privée (mode incognito). Elle ne sera pas non plus autorisée à s'exécuter à partir d'une URL de fichier. Vous pouvez accorder ces autorisations en accédant au gestionnaire d'extensions (chrome://extensions/) et en cliquant sur le bouton « Détails » correspondant à l'extension « axe DevTools – Web Accessibility Testing ». Une fois sur la page de détails, vous pouvez activer les options « Autoriser en mode incognito » et « Autoriser l'accès aux URL de fichiers ».
Désormais, même si vous ouvrez un document HTML qui n'est pas hébergé par un serveur web, vous pouvez toujours exécuter les tests automatisés et les tests guidés intelligents ! Vous pouvez également le faire en mode incognito.
Astuce n° 2 – Simuler des appareils
Dans mon dernier article, j'ai expliqué comment utiliser les DevTools de Chrome pour émuler des appareils afin de tester des pages ou des mises en page adaptatives. Peu de choses ont changé depuis, mais il est bon de rappeler que vous pouvez émuler les dimensions de la fenêtre d'affichage de nombreux appareils populaires tels que l'iPhone X, l'iPad Pro, le Galaxy S5, etc. Un bouton permet de basculer de l'orientation portrait à l'orientation paysage ou de limiter la vitesse du réseau. Astuce de pro supplémentaire : ouvrez le menu à trois boutons pour accéder à encore plus d'options et de fonctionnalités.
Astuce n° 3 – Inspecteur d'éléments
Il s'agit d'un sujet très vaste, car l'inspecteur d'éléments comporte de nombreuses fonctionnalités importantes.
3.1 Modifier au format HTML
Saviez-vous que le code de mise en page côté client peut être modifié ? C'est très simple à faire et cela vous permet de tester vos modifications avant de passer à la phase de mise en œuvre au niveau du code source. Lorsque Axe DevTools détecte un problème, utilisez le lien « Inspecteur d'élément » pour accéder au code source de l'élément.
Vous pourrez ensuite utiliser les solutions proposées pour modifier votre balisage et tester la correction.
3.2 Éditeur de styles
Au début, l'apprentissage du CSS peut s'avérer fastidieux. L'éditeur CSS facilite grandement la compréhension de ce langage. Utilisez le volet « Styles » de l'inspecteur d'éléments pour modifier et définir de nouvelles propriétés en temps réel ! D'autres outils pratiques, tels que les widgets « box-shadow », « flex » et « color », vous aident à choisir les valeurs adaptées à votre conception. Cela s'avère également très utile pour résoudre les problèmes d'accessibilité nécessitant des ajustements de style.
3.3 Masquer ou supprimer des éléments
J'ai souvent constaté que tester un élément ou un composant individuel d'une page permettait d'affiner les résultats. Il m'arrive toutefois parfois de devoir tester l'intégralité de la page, à l'exception d'un composant spécifique. Pour ce faire, il suffit d'utiliser les actions « Masquer l'élément » ou « Supprimer l'élément ». Pour utiliser ces actions, accédez à l’inspecteur d’éléments et repérez l’élément que vous souhaitez supprimer. Ouvrez le menu contextuel accessible par un clic droit et sélectionnez les options « Masquer l’élément » ou « Supprimer l’élément ». À ce stade, vous pouvez lancer les tests d’axe DevTools et vous ne verrez aucun résultat de test concernant les éléments supprimés.
. 
État de la force
Tout comme pour les fonctions « Masquer » ou « Supprimer des éléments », vous pouvez forcer un état sur un élément donné. Ouvrez à nouveau le menu contextuel et recherchez la liste d’options « Forcer l’état ». Cette fonctionnalité peut servir à plusieurs fins pratiques, mais l’un des cas d’utilisation les plus courants consiste à tester l’état « actif », « focus » ou « survol » des boutons ou des liens. Il est important de tenir compte du contraste des couleurs de ces états afin de garantir une expérience accessible. Vous pouvez également utiliser cette fonctionnalité pour afficher des infobulles ou d’autres éléments qui ne s’affichent que lors de ces états.
Vous trouverez ci-dessous une capture d'écran de l'inspecteur de styles de Google Chrome, avec des cases à cocher permettant de basculer l'état de l'élément « Force » entre les états « actif », « survol », « focus », « visité », « focus-within » et « focus-visible ».
Conclusion
L'extension de navigateur Axe DevTools est puissante, mais une compréhension de base du fonctionnement des outils de développement intégrés à votre navigateur rendra vos tests encore plus efficaces. Faites-vous une faveur et familiarisez-vous avec ces outils et les fonctionnalités des outils de développement de vos navigateurs préférés : ils augmenteront de manière exponentielle votre productivité et vous faciliteront grandement la vie, tout en vous aidant à créer une expérience accessible pour vos utilisateurs.
