Accessibilité Web 14 outils pour tester votre site gratuitement

Avez-vous pensé à tester l’accessibilité Web de votre site Web ?

En France, l’accessibilité d’un site Web est régie par le Référentiel Général d’Amélioration de l’Accessibilité (RGAA). Et, elle n’est obligatoire au sens légal que pour les services publics et les entreprises privées qui génèrent un certain chiffre d’affaires.

Mais, il est évident que faire en sorte de rendre le Web accessible à tous est un devoir pour tous.

En effet, l’accessibilité d’un site Web n’est pas qu’une question de handicap comme on pourrait le croire. Un site Web accessible offre aussi une meilleure expérience utilisateur pour tout le monde.

Ainsi, d’une façon générale, en améliorant l’accessibilité de votre site, vous améliorez également son UX et son SEO et accessoirement votre clientèle potentielle.

Alors, n’attendez plus, testez l’accessibilité Web de votre site Web selon les WCAG (Web Content Accessibility Guidelines) avec ces outils gratuits et corrigez les erreurs les plus fragrantes.

💡 Pour info, la plupart des outils sont en anglais. 😉

(Article publié en juillet 2023 et mis à jour en juillet 2024)

Google Lighthouse pour un audit d’accessibilité rapide

Pour commencer, vous pouvez utiliser Google Lighthouse. pour effectuer un audit d’accessibilité rapide. Il s’agit d’un outil open source de Google permettant de tester la qualité d’un site Web et notamment son accessibilité.

Pour utiliser Lighthouse, il existe trois alternatives :

• Les Chome DevTools
• L’extension de navigateur Lighthouse
• PageSpeed Insights

Pour accéder à l’audit d’accessibilité via les Chrome DevTools, tapez l’URL de la page que vous souhaitez auditer.

Puis, faites un clic droit et choisissez “Inspecter”. Cliquez ensuite sur “Lighthouse” et ne cochez qu’accessibilité dans les catégories. Enfin, cliquez sur “Analyser le chargement de la page”.

Un score d’accessibilité s’affiche avec les éventuels problèmes à corriger et juste en dessous les éléments à vérifier manuellement, les audits réussis et les éléments non applicables.

Pour chaque test qui a échoué, vous obtenez :

• Une brève description du problème
• Un lien pour accéder à des informations complémentaires
• Des captures d’écran des éléments posant problèmes
• Le code associé vous permettant de voir ce qui ne va pas afin de résoudre le problème

Si vous souhaitez télécharger un PDF de votre audit, cliquez sur les trois points en haut à droite et sélectionnez “Imprimer le résumé” ou “Imprimer la version complète”.

Voici pour exemple un site comportant des problèmes d’accessibilité :

Enfin, si vous souhaitez accéder à Lighthouse via une extension ou PageSpeed Insights, cliquez sur les boutons ci-dessous.

7 sites proposant des tests d’accessibilité Web gratuits

WAVE le test d’accessibilité Web de WebAIM

WAVE est l’outil de test d’accessibilité que j’utilise le plus. Il a été créé par WebAIM (Web Accessibility In Mind), une organisation à but non lucratif basée en Utah, experte en accessibilité Web.

Pour commencer, entrez simplement l’adresse de la page Web de votre page et cliquez sur la flèche ou faites entrée avec votre clavier.

Vous accédez alors aux résultats du test d’accessibilité de la page Web selon les critères de réussite WCAG 2.1 avec un résumé des erreurs éventuelles à gauche. Les icônes rouges indiquent les erreurs d’accessibilité nécessitant une correction et les oranges, celles nécessitant un examen. Pour voir les détails, cliquez sur le bouton “View details”.

À droite, se trouve votre page avec des icônes pour chaque élément. Le fait de cliquer sur une icône permet d’avoir des informations sur l’élément sélectionné.

En cliquant sur référence, vous avez un aperçu de la signification de chaque icône ainsi qu’un lien d’accès vers sa documentation.

En cliquant sur Code, le code correspondant à l’élément sélectionné apparait.

Il est à noter que le code de la page entière peut être affiché juste en cliquant sur l’icône </> Code.

Pour avoir les informations détaillées du test d’accessibilité, rendez-vous sous l’onglet Details.

Ensuite, naviguez dans les onglets :

• Order : affiche l’ordre de la navigation vu par un lecteur d’écran
• Structure : montre la structure de la page
• Contrast : pour tester les erreurs de contraste et y remédier

WAVE permet également d’afficher la page en désactivant les styles. Ainsi, vous pouvez voir l’ordre dans lequel les utilisateurs qui utilisent un clavier ou un lecteur d’écran accède à la page.

💡 ​​ Wave propose une documentation détaillée de toutes ses icônes et éléments.

accessScan, l’outil de test d’accessibilité Web d’accessiBe

AccessScan est un outil gratuit développé par accessiBe.

Pour tester l’accessibilité de votre site web, entrez l’URL et cliquez sur “Get Audit”.

AccessScan effectue alors un audit complet de la page afin de détecter sa conformité selon les WCAG 2.1 niveau AA.

L’outil évalue votre site Web au travers de 11 catégories différentes afin de vous attribuer une note sur 100 pour chacune :

Une fois terminé, accessScan vous indique si votre site est conforme ou non aux WCAG et lui attribue l’un de ces trois scores :

• Conforme (Compliant) : votre site est accessible.
• Semi-conforme (Semi-Compliant) : votre site est sur la bonne voie, mais vous devez améliorer certains points pour qu’il soit conforme aux normes d’accessibilité.
• Non conforme (Non-Compliant) : votre site nécessite d’être revu, car il ne répond pas à plusieurs critères des directives WCAG 2.1.

En dessous du score, se trouvent les diverses catégories avec la possibilité d’avoir plus de détails sur les performances de votre site par rapport à ces critères.

Enfin, il est possible de télécharger un PDF en marque blanche qui détaillera toutes les lacunes d’accessibilité Web de votre site (en anglais).

💡​​ Il faut fournir votre email pour recevoir le lien de téléchargement de l’audit. Néanmoins, accessiBe est conforme au RGPD  et au CCPA  et ne collecte pas les données personnelles.

Accessibility Checker

Accessibility Checker est un outil de test d’accessibilité Web développé par Intent Based.

Ici, vous pouvez auditer votre site Web par rapport aux principales législations des autres pays dont la France, les États-Unis, le Canada, l’Europe, l’Allemagne, l’Australie, le Royaume-Uni et le monde entier.

Pour commencer, tapez l’URL de votre site Web et concernant le pays. Choisissez Worldwide (monde entier) pour que votre site soit testé selon les normes d’accessibilité définies par le WCAG 2.1.

Cliquez ensuite sur “Check website” et vous obtenez un audit détaillé avec les :

• Problèmes critiques (Critical Issues) : les erreurs à corriger obligatoirement
• Audits réussis (Passed audits) : les éléments qui ont réussi le test WCAG 2.1 niveau AA
• Audits manuels requis (Required Manual Audits) : les éléments qui nécessitent une analyse humaine

Pour chaque problème relevé, vous accédez à des explications et des solutions recommandées juste en cliquant dessus.

Enfin, vous pouvez exporter l’audit en PDF en cliquant sur “Download audit”.

💡​​ Le téléchargement de l’audit en PDF n’est normalement disponible qu’en mode premium. Néanmoins, vous pouvez requérir un export gratuit pour une seule fois.

Test d’accessibilité Web d’EXPERTE.com

EXPERTE.com est un site d’outils et de guides autour du thème “transformation numérique”.

Il propose un test d’accessibilité Web basé sur Lighthouse qui peut examiner jusqu’à 500 URL à la fois.

Pour effectuer le test, saisissez l’URL du site Web ou listez-en plusieurs et cliquez sur “Commencer le test”.

Le vérificateur d’accessibilité évalue alors l’accessibilité technique des pages selon 41 fonctionnalités réparties dans huit catégories, par exemple :

Ensuite un score de 0 à 100 s’affiche pour chaque page.

Pour chaque problème d’accessibilité relevé, cliquez sur “Report”. Cela ouvrira une fenêtre Lighthouse avec les informations pour y remédier.

Enfin, si vous le souhaitez, téléchargez le rapport contenant la liste des pages analysées et les erreurs relevées (au format CSV).

AChecker le test d’accessibilité open source

AChecker est un test d’accessibilité open source en anglais assez ancien.

Il est beaucoup moins user friendly que les autres et s’avère plus destiné aux développeurs.

Pour effectuer le test, entrez l’URL de la page à tester, téléchargez un fichier HTML ou collez du code HTML. Puis cliquez sur “Check it”.

Par défaut, AChecker effectue simplement une analyse selon les WCAG 2.0 niveau AA avec un rapport qui s’affiche par critères de réussite des directives (View by Guideline).

Mais, en cliquant sur “Options”, vous pouvez en affiner l’affichage. Ainsi, il est possible d’activer le validateur HTLM ou CSS et de voir le code source. Vous pouvez également afficher le rapport des erreurs dans le code HTML, ligne par ligne (View by Line Number).

AChecker divise les erreurs d’accessibilité en problèmes connus (Known Problems), problèmes probables (Likely Problems) et problèmes potentiels (Potential Problems). Les problèmes potentiels sont ceux qui nécessitent qu’un humain prenne la décision finale.

Pour chaque erreur, vous avez deux liens : un lien vers la documentation WCAG avec des exemples de bonnes pratiques et l’emplacement de l’erreur dans le code source.

💡​​ AChecker fournit un rapport selon les normes WCAG 2.0 et non pas WCAG 2.1. Toutefois, cela peut vous aider à déceler certains problèmes d’accessibilité.

ACHECKS

ACHECKS est un outil 3 en 1 qui regroupe les tests d’accessibilité AChecker, Lighthouse et Tingtun pour les PDF.

Cet outil est intéressant, car il peut fournir les erreurs d’accessibilité pour les PDF.

Pour faire une analyse, entrez l’URL à analyser, choisissez le test à effectuer et cliquez sur “Check it”.

MAUVE++

MAUVE++ (Multiguideline Accessibility and Usability Validation Environment) est un projet du HIIS Lab de l’ISTI et du CNR. Il permet d’évaluer l’accessibilité des sites Web selon les directives WCAG 2.0 ou 2.1.

Vous pouvez tester l’accessibilité d’une page Web sans inscription et un site entier (jusqu’à 50 pages) en créant un compte gratuit.

Pour tester une seule page, renseignez l’URL de la page.

Pour tester un site entier avec un maximum de 50 pages, enregistrez-vous, puis créez un projet en renseignant :

• Un titre de projet
• Un type de projet : une seule page, simplifié ou en profondeur
• Le nombre de pages maximum à analyser et leur profondeur
• La fréquence de l’analyse : juste une fois, chaque semaine, toutes les 2 ou 4 semaines
• L’appareil utilisé (bureau, tablette, smartphone)
• La norme choisie pour le test : WCAG 2.1 ou WCAG 2.0
• Le niveau de conformité : A, AA ou AAA

Enfin, cliquez sur “Create project”. L’audit démarre et dure environ 10 minutes. Ensuite, vous recevez un email incluant le rapport d’évaluation de l’accessibilité de votre site en PDF (en anglais).

Il s’agit d’un rapport très complet. Pour ma part, il comporte 338 pages.

Hormis les sites pour tester l’accessibilité Web, il existe aussi des extensions sympas à intégrer à votre navigateur... Voici celles qe je préfère…

6 extensions de navigateur pour tester l’accessibilité Web d’un site

Wave de WebAIM

Wave de WebAIM que j’ai détaillé dans les sites proposant des test d’accessibilité, offre également la possibilité d’effectuer le test via des extensions pour les navigateurs Chrome, Firefox et Edge.

Pour l’utiliser, installez l’extension, puis ouvrez une page à analyser et cliquez sur l’extension. L’interface sera exactement la même que sur le site.

Silktide accessibility checker pour Chrome

En juillet 2023, lorsque cet article a été publié, Silktide proposait de fournir un rapport interactif gratuit sur l’accessibilité de votre site Web via un formulaire directement sur le site. Cela n’existe plus.

A présent, pour tester l’accessibilité de votre site Web, il suffit d’utiliser son outil gratuit disponible sous forme d’extension Chrome. Franchement, vous n’y perdrez pas au change car l’outil est très complet. En effet, il contient plus de 200 tests WCAG et surtout il inclut des outils que vous ne trouverez pas via d’autres tests d’accessibilité !

Pour commencer, installez l’extension Chrome Silktide accessibility checker. Puis, ouvrez une page Web et cliquez sur le logo Silktide dans la zone des extensions en haut de Chrome. Immédiatement, le panneau de l’outil de vérification d’accessibilité s’ouvre avec tous les tests disponibles.

En premier lieu, en haut du panneau, vous avez la possibilité de tester le responsive de la page Web. La prévisualisation peut se faire sur un ordinateur de bureau, un ordinateur portable et plusieurs sortes de tablettes ou de mobiles.

D’autre part, en cliquant sur le bouton “HTML”, le code de la page testée s’affiche.

Pour commencer le test, cliquez sur Accessibility checker. Les résultats pour la norme WCAG 2.1 niveau AA s’affichent. Cliquez alors sur chaque problème relevé pour le localiser sur la page ou dans le code et obtenir des conseils pour le résoudre.

💡 Vous pouvez également visualiser les erreurs sous une autre norme WCAG en la choisissant via le menu déroulant (de WCAG 2.0 A à WCAG 2.2 A).

Mais Silktide accessibility checker ne se limite pas à un simple test d’accessibilité d’une page Web, d’autres outils qualitatifs sont disponibles :

• Color contrast checker pour identifier les problèmes de contraste des couleurs
• Alt text pour vérifier les balises Alt de vos images
• Screen reader simulator pour tester la navigation au clavier et la compatibilité des lecteurs d’écran
• Focus order pour vérifier si l’ordre de la navigation est logique pour une navigation au clavier
• Landmarks pour vérifier si les attributs role sont bien définis en tant que points de repère
• Impaired vision simulator pour simuler l’apparence de votre site pour un visiteur malvoyant
• Color blindness simulator pour simuler l’apparence de votre site pour un visiteur atteint de daltonisme
• Dyslexia simulator pour simuler l’apparence de votre site pour un visiteur atteint de dyslexie

Access Assistant pour Chrome

Access Assistant est une extension très conviviale créée par Level Access.

Au démarrage, Access Assistant s’ouvre dans une nouvelle fenêtre modale. Il existe deux outils différents que vous pouvez exécuter dans Access Assistant : Quick Test et Preview Modes.

Les Preview Modes permettent d’activer et de désactiver certains éléments de la page : styles CSS, images d’arrière-plan. Ils permettent également de mettre en surbrillance tous les éléments de la page dans certaines catégories comme : images, listes, iframes, tableaux, en-têtes et l’attribut Lang.

Quick Test, quant à lui, exécute un test automatisé de la page que vous avez ouverte afin d’identifier les problèmes d’accessibilité les plus prioritaires de la page.

Lorsque vous êtes sur la page à analyser, activez Access Assistant, puis cliquez sur “Quick Test“. Ensuite, dans la fenêtre qui s’affiche, cliquez sur “Run“.

Quelques secondes après, le résultat apparait. Ici, il n’y a pas de score.

Les résultats des tests sont regroupés en catégories de problèmes similaires. En cliquant sur l’en-tête de chaque groupe, une explication du problème global, ainsi qu’une recommandation sur la façon de le résoudre apparait.

En cliquant sur l’icône en forme d’œil, pour chaque problème individuel trouvé, vous obtenez le détail de l’erreur et l’élément concerné sur la page est mis en surbrillance.

💡​​ Cette extension accède aux URL de tous les onglets ouverts.

Accessible Web Helper pour Chrome

Accessible Web Helper est une extension créée par Accessible Web.

En premier lieu, ouvrez la page à tester. Puis, choisissez dans le menu déroulant les règles WCAG pour l’analyse de votre site. Vous avez le choix entre WCAG 2.0 A ou AA, WCAG 2.1 A ou AA ou encore les meilleures pratiques + WCAG 2.1 AA. Puis cliquez sur “Scan Page“.

L’analyseur affiche un score sur 100 ainsi que la liste des éléments défaillants classés par gravité.

Pensez à cocher la case “Highlight All Elements”afin de mettre en surbrillance les éléments défaillants et leur emplacement sur la page.

Pour découvrir les éléments concernés par une erreur, cliquez sur le bouton indiquant le nombre d’éléments. Vous obtenez alors les noms des éléments et les détails de l’erreur.

Enfin, cliquez sur le point d’interrogation de l’élément en surbrillance pour analyser les détails de l’erreur.

LERA pour Chrome

LERA est une extension de navigateur Chrome d’AdvancedBytez qui permet d’effectuer un test d’accessibilité selon les WCAG 2.1 Niveau A et AA.

Pour exécuter le test, rendez-vous sur la page à tester, cliquez sur l’extension, puis sur le bouton “Automatic Audit“. Une nouvelle fenêtre s’ouvre alors et affiche les résultats sous la forme d’un tableau de bord avec un résumé et un graphique du nombre d’erreurs détectées par gravité.

En cliquant sur une erreur relevée, vous accéderez à l’onglet “Automated Issues“.

Les erreurs d’accessibilité peuvent être filtrées par gravité et critères de réussite.

De plus, chaque erreur peut être développée pour afficher le chemin, l’extrait de code et des recommandations pour la corriger. Et, si vous cliquez sur l’icône en forme d’œil, l’élément concerné sera mis en surbrillance sur la page du site.

Enfin, vous pouvez télécharger le rapport sous forme de feuille Excel.

💡​​ En créant un compte gratuit, vous pourrez enregistrer et archiver les rapports.

Pour finir cette liste, je veux vous présenter un dernier outil. Celui-ci ne teste pas l’accessibilité Web de votre site, mais vous aide à le rendre accessible selon le RGAA.

Assistant RGAA pour Firefox et Chrome

L’Assistant RGAA est une extension de navigateur téléchargeable gratuitement. Elle existe pour Firefox et Chrome.

Elle vous aidera à réaliser des audits d’accessibilité selon les 106 critères de la version 4.1 du RGAA (adaptation opérationnelle des WCAG 2.1.)

Pour vous servir de l’assistant, c’est simple, positionnez-vous sur la page à tester, puis cliquez sur l’extension. Vous verrez alors votre page Web ainsi que les tests d’accessibilité à effectuer et à valider.

L’extension peut être positionnée à différents endroits du navigateur ou ouverte dans une fenêtre séparée en cliquant sur l’icône “Dock”.

“Voir les thématiques” regroupe tous les tests par thème et “Référentiel”, les critères à valider.

Pour commencer, choisissez un test, lisez les instructions à suivre pour le valider et cochez la case située dans le test.

Cette case permet d’activer certaines fonctions selon les tests effectués, par exemple :

• Mettre en évidence sans style tous les éléments concernés avec leurs attributs afin que vous puissiez les contrôler
• Activer un analyseur de contraste des couleurs,…

En cliquant sur “Description du test”, vous avez l’information de la fonctionnalité activée pour ce test en particulier.

Lorsque vous considérez un test comme terminé, cliquez sur le petit drapeau afin de le marquer comme déjà effectué et passez à un autre.

À vous de jouer maintenant !

Le verdict sur les tests d’accessibilité Web

Vouloir rendre un site Web accessible est un acte de citoyenneté.

Mais, le problème avec les tests automatisés pour vérifier l’accessibilité numérique d’un site est qu’ils ne remplaceront jamais les tests humains.

Alors, rappelez-vous que, même si vous obtenez un score d’accessibilité de 100 % à un test, cela ne veut pas dire que votre page/site est accessible pour autant. En effet, la plupart des tests gratuits ont des fonctionnalités limitées et ne pourront trouver que les problèmes de conformité de base. De plus, tous les outils ne se valent pas. Certains ne vérifient qu’une seule page, tandis que d’autres vérifient plusieurs pages, voire un site entier.

En conclusion, les outils d’évaluation de l’accessibilité du Web ne peuvent pas déterminer l’accessibilité d’un site Web, ils peuvent seulement aider à le faire.

De ce fait, si vous souhaitez un site entièrement accessible, contactez un expert en accessibilité Web qui pourra effectuer les tests manuels nécessaires.

💡​​ Conseil : Lorsque vous rencontrez le problème suivant : “Les couleurs d’arrière-plan et de premier plan ne sont pas suffisamment contrastées”. Exécutez un test au moyen de l’un de ces outils de contraste de couleurs.