Niveau Niveau expert

Extension navigateur : Axe

Tutorielaccessibilité

Publié par le (1483 lectures)

accessibilité navigateur extension Firefox wcag outil google chrome

Axe (Chrome et Firefox)

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.

Outil Axe : présentation de l'interface

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é

Outil Axe : présentation du panneau d'informations de gauche

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

outil Axe : présentation du panneau d'informations de droite

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

Outil Axe : raccourcis

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

Outil Axe : tests complémentaires

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

Outil Axe : liste des tests complémentaires
Cliquer sur « Start testing keyboard » pour déclencher le test
Outil Axe : test étape 1
1re étape : une analyse de tous les boutons a été réalisée
Outil Axe : test étape 2
2ème étape : vérifier qu’aucun bouton ne manque
Outil Axe : test étape finale
Dernière étape : s’il y en a, la liste des problèmes s’affiche.

Outil Axe : test étape finale

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.

Outil Axe : enregistrer tests
Cliquer sur le bouton « View saved tests » pour retrouver les tests enregistrés

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.

Commentaires

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.