Aujourd’hui nous vous présentons des outils qui permettent de tester l’accessibilité de vos sites. Aucun outil automatisé ne peut vous dire si votre page est complètement accessible, mais les outils suivants facilitent l’évaluation humaine et informent sur les problèmes d’accessibilité.
Si vous découvrez tout juste l’accessibilité du web, nous vous proposons de découvrir d’abord notre précédent article : A11y, ca vous parle ?
Axe
C’est un plugin disponible sur Chrome et Firefox. Il se présente sous la forme d’un nouvel onglet “Axe DevTools” dans l’inspecteur du navigateur :
En cliquant sur “Scan all of my page”, vous lancez un test sur toute la page. Vous pouvez cependant choisir d’analyser qu’une partie de votre page, mais il faut souscrire pour accéder à cette fonctionnalité.
Les résultats du test se présentent ainsi :
À gauche, la liste des critères non respectés avec leur niveau de criticité. Lorsque vous cliquez sur un critère, le détail s’affiche dans le panneau de droite. On y trouve une description du problème avec la solution pour le corriger. Il est possible de naviguer parmi les erreurs rencontrées en utilisant les flèches en haut à droite.
C’est un outil facile à installer, rapide à lancer, les résultats sont compréhensibles et détaillés. Il donne également accès à la documentation WCAG pour chaque critère.
L’onglet Lighthouse de Chrome
Sous Chrome, vous avez accès à Lighthouse depuis la console du navigateur. Voici comment ouvrir la console de Chrome.
Lighthouse permet également de tester les performances et les bonnes pratiques d’une page.
Cliquez sur “Generate report” pour lancer les vérifications. Vous pouvez choisir de lancer les tests sur l’accessibilité uniquement. Une fois le test terminé, vous obtenez un score sur 100. On retrouve la liste des vérifications qui ont échouées avec les éléments HTML qui posent problème.
Cet outil liste également les vérifications qui ne peuvent pas être testées automatiquement et qui demandent une vérification manuelle. Par exemple, vérifier que la navigation au clavier est correcte : le focus ne doit pas être perdu lorsqu’on utilise la tabulation.
Web Developer tool bar
Dans les outils de la Web Developer tool bar (plugin disponible sous Chrome ou Firefox), il y a un lien “validate Accessibility”.
Cela va lancer WAVE : Celui-ci fournit des informations visuelles sur l’accessibilité du contenu en injectant des icônes et des indicateurs dans la page.
La Web developer tool bar permet aussi de tester des critères spécifiques.
Par exemple :
- Désactiver le style CSS pour vérifier que les contenus sont bien linéarisés
- Désactiver le javascript
- Vérifier les formulaires (type de champs, auto-complétion, etc.)
- Vérifier la présence des attributs alt sur les images
- Afficher les rôles ARIA, les titles, etc.
Cet outil est pratique car, il facilite les tests d’accessibilité en mettant en évidence les éléments directement dans la page.
HeadingMaps
Ce plugin génère la structure de la page à partir des titres trouvés. HeadingMaps identifie les titres qui ne sont pas dans le bon ordre ou mal utilisés. Il permet aussi d’identifier rapidement les titres vides, sans intitulés. Il est disponible sur Chrome ou Firefox.
WebAIM
Une des erreurs les plus fréquentes que l’on retrouve dans les résultats d’audit d’a11y, c’est le contraste insuffisant entre la couleur du texte et celle de son arrière-plan. Pour vérifier si le contraste est bien conforme, WebAIM offre deux outils de validation de contraste :
- Link Contrast Checker pour comparer 3 couleurs (lien, texte et arrière-plan)
- Contrast Checker pour comparer 2 couleurs (texte et arrière-plan)
En comparant deux couleurs, un indice (chiffre) est donné afin qu’on puisse déterminer si le contraste entre deux couleurs est suffisant. S’il l’est, on peut s’attendre à obtenir un grade AA ou AAA, selon le ratio obtenu l’indice :
- est au-dessous de 4.5 : le contraste n’est donc pas assez élevé et ne remplit aucune conformité au niveau du WCAG.
- dépasse 4.5 : on entre dans la conformité AA.
- dépasse 7.0 : le grade d’accessibilité respecte la conformité AAA.
W3C validator
C’est une étape qui peut certainement vous faire gagner du temps. En effet, si vous faites valider votre page HTML au W3C, vous résoudrez déjà plusieurs problèmes d’accessibilité, notamment les erreurs liées à la sémantique. Mais attention, un site avec un code valide n’est pas forcément un site accessible.
Lecteurs d’écran
Ils feront l’objet d’un prochain article, mais tout de même, voici les lecteurs d’écrans gratuits que vous pouvez installer. Vous saurez comment votre site est vocalisé grâce aux tests effectués avec les “lecteurs d’écran”.
Si vous êtes sous Windows avec le navigateur Firefox :
Si vous êtes sous MacOs avec le navigateur Safari :
- VoiceOver (logiciel natif sous Mac) : Voici les raccourcis clavier pour utiliser VoiceOver
On vous en reparle plus en détails prochainement.
Nous le répétons, mais les outils que nous venons de parcourir ne garantissent pas que votre site sera entièrement accessible. Ce sont des outils d’aide très pratiques pour repérer les erreurs d’a11y. Une vérification manuelle sera nécessaire pour valider la conformité d’une page.
Maintenant que vous êtes outillés pour l’a11y, à vous de jouer !
