Test d'accessibilité automatisé

L'accessibilité sur le Web signifie créer des sites et des applications avec lesquels tout le monde peut naviguer et interagir. La meilleure façon de garantir que nous créons des expériences accessibles est de combiner les tests automatisés avec l'assurance qualité manuelle et les tests utilisateurs.

Nous avons parlé de tester manuellement certains aspects de nos pages dans mon article précédent Tests d'accessibilité manuels: clavier et écran navigation du lecteur .

Dans cet article, nous allons examiner certains des outils les plus populaires et les plus activement entretenus pour les tests d'accessibilité automatisés, et passer en revue certaines de leurs fonctionnalités.

Si vous voulez aller au-delà ces outils, il existe une multitude d'autres options répertoriées dans Sélection des outils d'évaluation de l'accessibilité du Web .

Lighthouse – Google

Lighthouse est un outil développé par Google pour vous aider à auditer certains aspects de votre pages. Il est intégré à Chrome DevTools, sous l'onglet Audits :

webhint – JS Foundation

webhint est un outil de nature très similaire à Lighthouse. Il a été initialement développé par l'équipe Microsoft Edge, puis donné à la Fondation JS.

Vous pouvez l'exécuter en ligne à la même URL:

guide de l'utilisateur Webhint mais nous pouvons créer un .hintrc avec ces contenus pour l'instant:

 {
   "étend"  :   [ "recommandé par le Web" ] 
} 

webhint exécutera les audits correspondants et enregistrera son rapport sur le disque sous hint-report / /index.html que vous pouvez ouvrir dans n'importe quel navigateur.

Accessibility Insights for Web – Microsoft

Accessibility Insights for Web est une extension pour Chrome et Edgium récemment publiée par Microsoft.

Tota11y – Khan Academy

Tota11y est un bookmarklet développé par Khan Academy. Vous pouvez le faire glisser vers votre liste de signets, accéder à la page que vous souhaitez évaluer et cliquer sur le signet. Il ajoutera un petit bouton dans le coin inférieur gauche de votre page, sur lequel vous pourrez ensuite cliquer pour exécuter différents audits d'accessibilité:

ax – Deque

Enfin, il y a ax un moteur de test d'accessibilité développé par Deque Systems, un important fournisseur d'accessibilité.

Fait intéressant, la plupart des outils dont nous avons discuté ci-dessus (Lighthouse, webhint, Accessibility Insights for Web) utilisent ax sous le capot. Vous pouvez le consommer directement dans vos projets sous forme de package npm:

 npm install --save-dev ax-core

Vous pouvez ensuite l'intégrer dans votre suite de tests comme vous le souhaitez. Par exemple, si vous disposez d'une application React et que vous utilisez Jest pour les tests, vous pouvez créer un test unitaire qui vérifie si votre composant répond à vos exigences d'accessibilité:

 import  ax  from   " ax-core "; 
 import  React  de  " react "; 
 import  ReactDOM  de  " react-dom " ; 

 importation  Link  de   "./ Link" ; 

 const  axeConfig  =   {
  
}  ]; 

 const   axeRun   =  composant  => 
   nouveau   Promise  ( ( résoudre  rejeter )   =>   {
    
     const  wrapper  =  document .  createElement  ( "div" [19659022]) ; 
    document .  corps .  appendChild  ( wrapper ) ; 
    ReactDOM .  render  ( component  wrapper ) ; 
    
    ax .  run  ( wrapper  axeConfig   ( err  résultat ) ) [19659065] =>   {
       if   ( err )   {
         rejeter  ( err ) ; 
       ]}   else   {
         résoudre  ( résultat ) ; 
      } 
    } ) ; 
  } ) ; 

 décrivent  ( "Link"   ()   =>   {
   it  ( "rencontre a11y"   async   ()   =>   {
     const   { violations } [19659065] =   attendent   axeRun  (
       < Lien href  =  "https://products.office.com" >  Microsoft Bureau  < /  Lien > 
    ) ; [19659137] s'attendre à  ( violations ) .  àHaveLength  ( 0 ) ; 
  } )  ; 
} ) ; 

Si votre composant présente des problèmes d'accessibilité, le test échoue comme ceci:

Conclusion

Les tests d'accessibilité automatisés sont un outil de plus dans votre boîte à outils. Il fonctionne très bien en combinaison avec une assurance qualité manuelle et des tests utilisateur, mais ne remplace pas ces pratiques. Assurez-vous d'obtenir de véritables commentaires des utilisateurs!