4 outils en ligne pour tester l'accessibilité de votre site web
Des solutions simples et gratuites pour un site plus accessible
L’accessibilité d’un site web repose sur des dizaines de critères : le référentiel RGAA en recense par exemple 106, tandis que les ressources de la Web Accessibility Initiative (WAI) lancée par le World Wide Web Consortium comptabilisent des dizaines de milliers de pages web.
Heureusement, des outils gratuits ou freemium vous aident à gagner un temps précieux lors de la vérification de l’accessibilité de votre site web, en accord avec les bonnes pratiques de la WAI et les critères RGAA. Je vous propose ici une sélection de 4 outils qui vous seront bien utiles pour tester rapidement l’accessibilité de votre site. Ces solutions ne remplacent pas un audit complet réalisé par un professionnel.
1. Lighthouse, un test d'accessibilité pédagogique
L’extension Lighthouse éditée par Google permet d’obtenir un rapport d’accessibilité pour l’URL de votre choix.
Cet outil gratuit fait partie des plus exhaustifs, car il analyse 57 critères en accordant à chacun une valeur comprise entre 1 et 10. La somme des notes obtenus permet d’établir un score d’accessibilité compris entre 0 et 100. Lighthouse est pédagogique, avec des explications claires.
Lighthouse fonctionne par URL. Mon conseil : testez au moins une URL par type de page. Par exemple, une page catégorie peut être accessible, alors qu’une page produit ne l’est pas du tout. Pour un site e-commerce, vous devrez tester par exemple la page d’accueil, une page listing de produits, une page catégorie, une page éditoriale, etc. L’outil permet également d’auditer une page qui demande une authentification.
Note : vous pouvez accéder aux fonctionnalités Lighthouse avec PageSpeed Insights
Les critères analysés par Lighthouse peuvent être rassemblés en six grandes thématiques :
- ARIA et rôles : les « étiquettes techniques », qui décrivent clairement aux lecteurs d’écran la fonction de chaque élément de la page, sont corrects, logiques, compréhensibles et placés au bon endroit.
- Structure du document :la page doit être bien rangée, avec des titres dans l’ordre, des listes et des tableaux bien formés, une explicitation de la langue, des identifiants uniques.
- Formulaires et contrôles : tous les champs, boutons et liens expliquent clairement ce qu’ils font, avec des étiquettes visibles.
- Médias : les images et les vidéos doivent être compréhensibles même pour les personnes malvoyantes ou malentendantes, grâce à des textes alternatifs et des sous-titres.
- Navigation & focus : l’internaute doit pouvoir se déplacer facilement au clavier, sans pièges ou impasses.
- Contraste et zoom : Le texte est lisible, les couleurs entre fond et texte sont contrastées et l’internaute a la possibilité d’agrandir sans gêne.
Un score de 100 n’est pas la garantie d’un site accessible au sens du référentiel RGAA ou des recommandations de la WAI.
D’ailleurs, Google liste un ensemble de points à vérifier en complément du rapport :
- Les contrôles interactifs peuvent recevoir le focus au clavier
- Les éléments interactifs indiquent leur fonction et leur état
- La page a un ordre de tabulation logique
- L’ordre visuel sur la page suit l’ordre du DOM
- Le focus de l’utilisateur n’est pas accidentellement piégé dans une région
- Le focus de l’utilisateur est dirigé vers le nouveau contenu ajouté à la page
- Les éléments de repère HTML5 sont utilisés pour améliorer la navigation
- Le contenu hors écran est masqué aux technologies d’assistance
- Les contrôles personnalisés ont des étiquettes associées
- Les contrôles personnalisés ont des rôles ARIA
En d’autres termes, vous ne serez pas accessible si vous échouez au rapport Lighthouse, mais un score de 100 % n’est pas pour autant un gage d’accessibilité : il indique simplement que vous êtes sur la bonne voie.
Utiliser Lighthouse
Vous pouvez utiliser Lighthouse depuis les outils pour les développeurs Chrome, ou installer l’extension Lighthouse sur votre navigateur préféré (Chrome, Firefox, Edge…).
2. Wave, un outil de test d'accessibilité complet et intuitif
Utiliser Wave
Vous pouvez utiliser Wave en ligne sur le site de l’outil, installer l’extension ou vous inscrire pour utiliser l’API. Vous pouvez également demander une licence pour une version Stand Alone
Wave est un outil développé par WebAIM (web accessibility in mind), un projet porté par l’Université d’État de l’Utah.
Cet outil en ligne est plus “sensible” que Lighthouse et offre une interface originale, avec à gauche la liste des problèmes rencontrés, et à droite l’affichage de votre page (ou de votre code source) avec une surcouche d’informations. Vous pouvez ainsi facilement identifier dans votre page web ou votre code HTML les zones précises qui méritent une attention particulière.
Seul bémol : l’outil peut remonter des faux positifs, notamment en indiquant des liens surlignés alors que c’est une pratique compatible avec les directives WCAG.
Wave offre un aperçu pertinent et facile à comprendre de la structure de votre page web, en tenant compte des balises HTML5 (<header>, <main>, <nav>, <footer>, <aside>, etc.).
Pour moi, les deux outils sont complémentaires. Lighthouse est plus abordable, Wave se montre un brin plus technique.
Astuces et tutoriels sur l'accessibilité Web
3.WCAG Contrast Checker, un outil de test du contraste
Les outils de test d’accessibilité en ligne mettent en lumière des contrastes insuffisants entre l’élément en première (police ou icône) et l’arrière-plan. Mais comment mesurer le contraste ? Des outils conformes aux référentiels WCAG vous permettent d’obtenir le score de contraste entre deux couleurs.
J’ai sélectionné WCAG Contrast Checker pour sa facilité d’utilisation et son ergonomie. Vous pouvez facilement obtenir le score de contraste, mais vous pouvez surtout visualiser le résultat avec deux tailles de police et quatre icônes très présentes sur les sites web.
Les personnes malvoyantes ou présentant une basse vision rencontrent des difficultés à lire un texte dont la couleur est trop proche du fond.
Le contraste est mesuré par un ratio.
Plusieurs ratios permettent d’obtenir la note minimale (AA) ou maximale (AAA) :
- Texte de corps : 4,1 : 1 (AA) et 7 : 1 (AAA) ;
- Texte grande échelle : 3 : 1 (AA) et 4,5 : 1 (AAA) ;
- Icônes, boutons, etc. : 3 : 1 (AA / AAA).
Ces ratios sont des scores minimum. Vous pouvez très bien obtenir un ratio de 21 (#ffffff vs #000000)
Utiliser WCAG Contrast Checker
Cet outil est facilement en ligne. Vous pouvez facilement l’utiliser en saisissant vos deux codes de couleur hexadécimaux.
4. Whocanuse, un test pour chaque déficience visuelle
Utiliser Whocanuse
Vous pouvez utiliser Whocanuse en ligne sur leur site web.
Whocanuse est un outil incontournable quand il s’agit de valider un choix de couleur. Au-delà du contraste, il simule l’accessibilité pour un grand nombre de problèmes de visions, en détaillant notamment les différents types de daltonisme. Il simule également des difficultés liées à l’environnement, avec par exemple une utilisation en extérieur et des reflets sur l’écran.
Une estimation du pourcentage de la population mondiale affectée est précisée pour chaque problème de vision : vous connaîtrez ainsi l’impact de vos choix !
Simuler les différentes pathologies ophtalmologistes permet de mieux saisir des enjeux particuliers. En ouvrant deux fenêtres côte à côte, vous pourrez par exemple vérifier que deux couleurs peuvent être distinguées par des personnes souffrant de daltonisme afin d’éviter une confusion.
Au-delà la création ou de la refonte d’un site web, je vous conseille de recourir à ce type d’outil dès que vous envisagez de repenser l’identité graphique de votre marque (notamment votre logo). Ces outils sont également utiles pour d’autres supports de communication, tels que l’impression de flyers.