Extension navigateur : Axe

Comme l'indique le site de l’outil, Axe est une extension utilisée par Microsoft, Google, et bien d’autres, et se considère comme l’outil “leader” d’analyse de conformité de pages web.

L’extension est disponible sur Chrome et Firefox, et, après l'avoir ajouté, s’ajoute directement en tant qu'onglet dans votre console de développement.

Il est alors possible de scanner :

• la page entière
• une partie de la page (en échange d’une inscription).

L'outil fonctionne également pour une page hébergée en local.

Après l'analyse de la page, beaucoup d'éléments s'affichent mais pas de panique, nous allons décortiquer ces informations.

Présentation de l'outil

A gauche s’affiche :

• l’URL analysée (oui, nous vérifions le site du gouvernement…)
• le total de critères non conformes : ici 4, avec leur niveau de conformité : 1 “moderate” (moyen), et 3 “review” (problème à vérifier)
• et en dessous, une liste des erreurs qui est regroupée par critère non respecté

En cliquant sur un critère, s'affiche dans la partie droite :

• sa description
• l’élément HTML qui provoque l’erreur
• et en dessous le moyen pour résoudre le problème

Malgré l'apparence discrète de la barre du haut, chacun des liens représente une fonctionnalité indispensable pour mieux comprendre le critère qui a échoué :

• le premier lien « Highlight » va permettre de mettre en surbrillance l’élément de manière visuelle sur la page web.
• le second lien « Inspect » va permettre de se positionner dans l’inspecteur d’éléments HTML exactement où le problème se trouve.
• le lien « More info » renvoie vers la documentation Axe qui donne une explication beaucoup plus complète, avec le critère WCAG qui correspond.

Ne pas hésiter à s'appuyer sur la documentation officielle WCAG, en se référant au critère donné.

• Les flèches tout à droite vont permettre de naviguer d’erreurs en erreurs.

Tests complémentaires (en étant inscrit)

Axe met également à disposition des tests qui ne peuvent pas être automatiquement réalisés par l'audit.

Après s’être inscrit, il suffit de cliquer sur « Guided Tests  », une liste de tests apparaît alors dans la partie de droite.

Vérifions le premier test d'accessibilité qui consiste à vérifier les tabulations et le focus de tous les boutons de la page :

En étant connecté(e), en plus d’avoir ces tests complémentaires, il est possible d’enregistrer les résultats, utile pour les retrouver et reprendre la suite des tests.

Conclusion

L'outil est complet en matière de tests, il permet de correctement vérifier la conformité de ses pages web. De plus, l'accès à une documentation complémentaire avec le numéro de critère WCAG correspondant, est très utile.