Lors d'un premier article appelé "Introduction à l'accessibilité web : l'enjeu des couleurs", j'ai pu introduire le concept de l'a11y ainsi que des pistes d'amélioration du web design en terme de couleurs.

Mais aujourd'hui nous allons rentrer dans le côté pratique, puisque je vais vous donner une liste d'outils qui vous permettront d'effectuer des audits d'accessibilité sur les sites que vous développez, facilement, et gratuitement.

Attention néanmoins, toutes les vérifications ne peuvent pas forcément être effectuées de manières automatiques, mais certains des outils présentés vous guideront pour effectuer ces contrôles qui requièrent un œil humain.

Tous ces outils sont des extensions pour Google Chrome, certaines sont disponibles pour les autres navigateurs, d'autres sont exclusives, mais toutes sont gratuites !

1 - ChromeVox

Cette extension est tout simplement un lecteur d'écran pour les personnes souffrant de défiences visuelles importantes, et vous permet de tester l'état actuel de l'accessibilité votre site.

L'outil ne permet pas de faire d'audit, mais en parcourant votre site vous pourrez vite détecter des problèmes de sémantiques ou d'éléments absents de la retranscription vocale et vous permettra de faire les modifications nécessaire.

Lien de l'extension : https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=fr

2 - ChromeLens

Cette extension est en lien direct avec mon précédent article, car il permet de simuler l'affichage de votre site selon différentes pathologies visuelles (mauvaise vision avec différents niveaux, tous les types de daltonisme) mais aussi de connaitre les statistiques de chacune de ces pathologies à traver le monde.

En choisissant une pathologie puis en raffrachissant la page, vous verrez donc les éléments changer de couleurs ou se flouter plus ou moins fort selon ce que vous aurez choisi de tester.

A noter que l'extension propose aussi une fonctionnalité d'audit, malheureusement elle refuse de se lancer sur mon navigateur.

Lien de l'extension : https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd

3 - IBM Equal Access Accessibility Checker

Cette extension développée par IBM est très complète et vous permet pour chaque page web de votre site de lancer un audit complet sur l'accessibilité en vérifiant par exemple : Le rendu des contraste de la page, les règles CSS, les balises ARIA, la conformité des normes HTML, etc...

L'outil classe les retours dans trois catégories : Les violations, les choses à vérifier manuellement ainsi que des recommandations de bonnes pratiques.

Lien de l'extension : https://chrome.google.com/webstore/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp

4 - Google Lighthouse

Cette extension est comparable à l'outil d'IBM cité précédemment dans son fonctionnement, mais elle prend aussi en compte les problématiques de performances du site.

Car oui, un site accessible à tous doit aussi pouvoir l'être pour les gens ayant une connexion internet faible ou déficiente.

Lien de l'extension : https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=fr


Si vous connaissez d'autres outils complets pour améliorer l'accessibilité d'un site, n'hésitez pas à m'en parler dans les commentaires ou sur les réseaux sociaux !

J'espère que cet article vous aura plu, à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage de d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Daniel Ali sur Unsplash