Accessibilité Web 14 outils pour tester votre site gratuitement
23 mn de lecture

Accessibilité Web 14 outils pour tester votre site gratuitement

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

Google Lighthouse

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

Test accessibilité Lighthouve via les Chrome DevTools

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

résultat test accessibilité lighthouse

 🇫🇷  Pour afficher Lighthouse en français, cliquez sur la roue dentée et dans Préférences/langue, choisissez français.

💡 Par défaut, l’analyse est faite pour le mode ordinateur, alors pensez à effectuer le test pour le mode mobile, car d’autres problèmes peuvent être relevés. N’oubliez pas non plus de passer en revue toutes les pages de votre site.

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

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.

Le test est disponible via le site de WebAIM ou une extension de navigateur.

Test d’accessibilité Wave en ligne

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.

Test d'accessibilité Wave

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

détails des résultats du test d'accessibilité wave

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 détails accessibilité du site Web : ordre, structure et contraste

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 accessibility sans styles affichés

Extensions Wave pour un test d’accessibilité via un navigateur

WAVE propose également des extensions pour les navigateurs Chrome, Firefox et Edge.

Installez l’extension selon le navigateur que vous utilisez. Puis, allez sur la page du site pour lequel vous souhaitez effectuer un test d’accessibilité web et cliquez sur l’extension.

Vous obtiendrez alors exactement la même interface que celle du test en ligne.

💡 ​​ 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 test d'accessibilité

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 :

  • Cliquables (boutons, liens…)
  • Titres
  • Orientation
  • Menus
  • Éléments graphiques (images, icônes…)
  • Formulaires
  • Document HTML (viewport, langage…)
  • Lisibilité (couleurs, tailles des polices…)
  • Carrousels
  • Tableaux
  • Général/Divers

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

Résultat test d'accessibilité accessScan

💡​​ 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 test accessibilité Web

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

Résultat du test d'accessibilité d'Accessibility Checker

💡​​ 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 test accessibilite web

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 :

  • Navigation
  • ARIA
  • Noms et étiquettes
  • Internationalisation et localisation
  • Contraste
  • Tableaux et listes
  • Audio et vidéo

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

Résultat test accessibilité web Experte

🙂​​ Bien que ce soit un site allemand, il est disponible également en français, italien et anglais.

🏆  Il est possible de tester en une seule fois 500 URL.

AChecker

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.

Achecker test accessibilité Web

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.

Résultat du test d'accessibilité Achecker

💡​​ 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”.

ACHECKS, un test d'accessibilité qui compile AChecker, Lighthouse et Tingtun for PDF

Silktide

Silktide rapport d'accessibilité site Web

Silktide est un site qui aide les entreprises et les organisations à améliorer leurs sites Web.

Il propose notamment de fournir un rapport interactif gratuit sur l’accessibilité de 25 pages de votre site Web selon les critères du WCAG 2.2.

Pour l’obtenir, entrez l’URL du site à analyser, votre email professionnel, sélectionnez votre secteur d’activité et cliquez sur “Scan Now”.

Il est à noter que le résultat de l’analyse n’est pas immédiat. En effet, vous recevrez le lien vers le rapport à consulter en ligne par email dans un délai d’un jour ouvrable et il sera consultable pendant 15 jours. Mais franchement ça vaut le coup d’attendre un peu.

Dans ce rapport interactif, vous obtiendrez des recommandations spécifiques pour l’accessibilité Web des pages testées de votre site :

  • Problèmes d’accessibilité mobile
  • Problèmes de contraste des couleurs
  • Navigation au clavier et compatibilité des lecteurs d’écran
  • Et beaucoup plus encore

Pour vous donner une petite idée du rapport, consultez le rapport démo de Silktide.

MAUVE++

Mauve++ évaluateur d'accessibilité

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.

Mauve++ test accessibilité d'une 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 : 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
MAUVE++ validation accessibilité site Web 50 pages

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.

Comme il en existe beaucoup, je ne vais lister que celles que je préfère.

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

Access Assistant extension de test d'accessibilité

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.

Access Assistant détails de l'erreur d'accessibilité et emplacement

💡​​ 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”.

Extension Chrome Accessible Web Helper

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

Tableau de bord du résultat du test d'accessibilité Lera

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

Détails d'une erreur d'accessibilité dans Lera

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

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.

Thématiques et choix de l'emplacement de l'assistant RGAA

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.

Extension Chrome Assistant RGAA

À 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 15 outils de contraste de couleurs.

S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires