Comprenez les limites des tests automatisés
Les outils automatisés peuvent être très pratiques pour effectuer un contrôle rapide ! Toutefois, leurs capacités sont très limitées. Ils peuvent uniquement tester les éléments vérifiables par une machine et, même dans ce cas, ils ne peuvent pas utiliser leur jugement pour aboutir à une conclusion pertinente. Par exemple, un vérificateur automatisé peut identifier si le texte alternatif est manquant pour une image. Or, certains systèmes de gestion de contenu utilisent automatiquement le nom du fichier image en tant qu'attribut de texte alternatif. Dans ce cas, l'image passera le test même si la description qui sera communiquée à l'utilisateur peut ressembler à « IMG3334.PNG ». Pas franchement utile comme description ! De même, un vérificateur ne peut pas savoir si la structure de vos rubriques est pertinente, même lorsqu'elle est présente. Il ne peut pas savoir non plus si le balisage est approprié pour le contenu, tant qu'il est correctement structuré.
Cependant, lorsque je regarde où l'erreur se produit, je peux voir que ce lien d'image avait un aria-label, une méthode différente pour décrire les technologies d'assistance. Comme l'étiquette est là, l'absence de texte alternatif n'est pas un problème, dans ce cas.
Il existe de nombreux problèmes d'accessibilité qu'un vérificateur ne peut simplement pas tester. Par exemple, il ne peut pas vous dire si le site utilise la couleur pour communiquer des informations ou si vos instructions reposent sur des indications sensorielles. La bonne pratique consiste à effectuer des contrôles automatisés afin de voir quels types de problèmes sont signalés, mais gardez à l'esprit que tous les résultats devront être vérifiés manuellement, car vous êtes susceptible d'obtenir des faux positifs et des faux négatifs. De plus, n'oubliez pas que votre travail ne s'arrête pas là.
Exemples d'outils automatisés (WAVE, aXe)
Barre d'outils WebAIM WAVE
Intéressons-nous tout d'abord à WAVE. L'avantage de l'outil WAVE est qu'il affiche les erreurs sous forme visuelle à l'endroit précis où elles se produisent, pour vous permettre de les localiser rapidement sur la page. Outre des erreurs et des avertissements, il affiche également les éléments structurels présents sur la page et les endroits où ARIA est utilisé.
L'onglet Structure est très utile pour comprendre l'organisation du contenu de la page. Cette organisation a une incidence sur la facilité avec laquelle les utilisateurs de TA peuvent naviguer dans la page.
L'inconvénient de cet outil est le suivant : étant donné qu'il affiche visuellement les erreurs, il injecte ces éléments dans le balisage. Par conséquent, lorsque vous approfondissez un peu l'analyse en inspectant le code, le code des icônes d'erreur visuelles s'affiche dans la page de code, et il est donc difficile de dissocier les deux. Vous risquez de vous retrouver à alterner en permanence entre exécuter la page, et l'actualiser pour l'afficher sans toutes les informations supplémentaires de WAVE ; ce qui peut prendre du temps et être un peu déroutant.
De plus, en raison de la surcharge visuelle, il est parfois difficile de voir les choses, et certaines informations dans WAVE et sur le site peuvent être tronquées ou difficiles à inspecter.
aXe
aXe est un outil un peu plus technique. Il ne vous montre pas les caractéristiques structurelles ni l'endroit où le balisage ARIA est utilisé. Au lieu de cela, il présente les erreurs sous la forme d'une liste dans vos outils d'inspection. L'avantage d'aXe est que vous pouvez facilement basculer entre l'inspection de la liste d'erreurs et le code dans lequel les erreurs se trouvent, en cliquant sur « Inspect node » (inspecter le nœud). Pour chaque problème, vous pouvez également accéder à une description plus détaillée et des astuces pour le corriger, ainsi qu'à l'extrait de code correspondant. S'il existe plusieurs instances, vous pouvez cliquer sur chacune d'entre elles.
Interprétation des résultats
Veillez à inspecter manuellement tous les problèmes identifiés par les vérificateurs automatisés avant de les inclure dans votre rapport. Souvent, vous voudrez ajouter des détails allant au-delà de ce qui est inclus dans les résultats des vérificateurs, notamment la manière dont un problème peut influer sur l'expérience, ainsi que des captures d'écran de l'endroit où le problème survient. C'est également un bon moyen de valider les erreurs que vous pouvez rencontrer lors de vos tests manuels et via les TA.
Résultats de WAVE
Dans l'onglet Details (Détails), vous verrez chaque résultat individuel et vous pourrez également basculer entre différents types d'informations afin de réduire la surcharge visuelle sur la page.
En cliquant sur l'icône d'information en regard du problème, vous afficherez les détails de l'erreur correspondante dans l'onglet Reference (Référence). La description détaillée comprend une explication de l'importance de l'erreur, des instructions pour sa correction, ainsi qu'un lien vers le critère WCAG auquel elle est associée.
Résultats d'aXe
Vous pouvez lire un bref résumé du problème dans la section Issue description (Description de l'erreur) ou appuyer sur le bouton Learn more (En savoir plus) pour afficher plus de détails sur le problème. Vous pouvez activer/désactiver l'option de mise en surbrillance pour voir à quel endroit l'erreur se produit sur la page. Prêtez attention aux indications en bas de la fenêtre. Elles vous précisent à quel niveau et à quel critère de succès WCAG le problème est lié.
À vous de jouer : testez vos pages à l'aide d'un vérificateur automatisé
Accédez à chacune des pages que vous avez sélectionnées lors de la configuration de votre session de test. Dans Chrome, exécutez chaque page dans l'outil WAVE et le plug-in aXe. Passez en revue les conclusions et résumez-les dans votre rapport. N'oubliez pas : chaque erreur ne doit pas nécessairement être mentionnée dans le rapport. Vous pouvez également rencontrer des faux positifs, alors faites preuve de bon sens.
En résumé
Les outils de test automatisés sont très limités. L'interprétation des résultats exige toujours une intervention humaine.
WebAIM WAVE est un outil principalement visuel. En plus des erreurs et des avertissements, il identifie les caractéristiques des éléments structurels, ainsi que le balisage ARIA.
aXe est plus technique dans sa présentation des erreurs. Il permet aux utilisateurs de basculer facilement entre la liste des erreurs et le code source dans lequel elles apparaissent, afin d'identifier le contexte des erreurs et de fournir des détails supplémentaires.
Vous êtes prêt à aller plus loin ? Intéressons-nous à présent à certains contrôles manuels. Vous aurez l'occasion d'inspecter du code et de vous pencher plus attentivement sur le contenu du site et les interactions.
