• 6 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 11/08/2021

Utilisez des outils de test automatisés

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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é.

Une erreur qui montre qu'une image n'a pas de texte alternatif.
Une erreur sur WebAIM WAVE check ("Absence de texte alternatif pour l'image")

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.

Image avec une icône et une icône aria-label et une description.
Lien avec une image à laquelle il manque un texte alternatif mais avec un aria-label à la place

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é.

Une page web contenant des icônes et des descriptions proposées par WebAIM Wave. Les icônes incluent des erreurs et des warnings, des éléments structurel et ARIA.
Le résultat de WebAim WAVE

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.

Représentation visuelle de la structure de la page qui montre les régions de la page et comment elles s'incluent entre elles.
Représentation visuelle de la structure de 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.

Résultat de l'analyse aXe dans l'outil inspecteur. Contient un résumé des résultats ainsi qu'un détail des instructions pour résoudre un des problèmes.
Résultat de l'analyse aXe

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.

Onglet de détails qui montre les catégories de problèmes avec des types spécifiques listés sous chaque catégorie.
Onglet de détails de WebAIM WAVE

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.

Détails sur une erreur incluant la raison pourquoi c'est important, comment la réparer et l'algorithme utilisé pour trouver l'erreur et les standards et règles liés.
Informations de détails sur une erreur

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é.

Problème aXe avec des snippets du code de l'erreur et les instructions pour la réparer.
Description d'un problème détecté par Axe avec des solutions proposées

À 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.

Exemple de certificat de réussite
Exemple de certificat de réussite