L'extension chrome inspecteurA11y est un outil qui permet de repérer rapidement des problèmes d'accessibilité sur une page web. Son but est de soutenir les auditeurs en matière d'accessibilité numérique et les développeurs dans la détection rapide de certaines erreurs d’accessibilité. Ce n'est pas une alternative aux tests manuels, mais un complément pour les testeurs et les développeurs.
L’outil se présente sous forme de barre d’onglet avec une section qui va donner des informations provenant du code source de la page et une autre section qui va permettre à l’utilisateur de trouver certains éléments sur la page elle-même.
Certains critères nous demandent de vérifier la présence et la pertinence de certaines balises dans le code source de la page. Il nous faut vérifier la présence et pertinence des balises <title>, <doctype> et de la langue sur la balise <html>
Le nom du document est indiqué dans la balise <title>, qui est le premier élément lu par les lecteurs d'écran. Il est donc important que celui-ci soit pertinent et qu'il mentionne clairement le nom du site sur lequel on se trouve ainsi que le nom de la page.
L'extension devra donc récupérer le contenu de la balise et ajouter ce contenu à la partie "Titre de la page". Par la suite, l’utilisateur a la possibilité d'évaluer le critère 8.6 du RGAA 4.1 sans avoir besoin de consulter le code source. Dans le cas contraire, si la balise elle-même n'est pas explicitement mentionnée dans le code source, cette section restera vide et l'utilisateur pourra considérer que le critère 8.5 du RGAA 4.1 est non conforme.
Le doctype correspond à la toute première déclaration dans un document HTML. Le navigateur est informé du type de document qu'il doit lire et interprété. Cette indication permet au navigateur d'afficher la page de manière adéquate. En incluant un doctype valide, garantissant une meilleure interprétation du contenu par les navigateurs et les technologies d'assistance.
Le critère 8.1 du RGAA 4.1 demande que le doctype soit bien présent et valide par rapport aux balises utilisées dans le code source. L'extension vérifie la présence de la balise doctype, mais l'utilisateur doit ensuite s'assurer que les balises employées dans le code source sont bien appropriées pour ce doctype. Par exemple, les balises <header> ou <footer> ne fonctionnent qu'avec un doctype HTML5 et non XHTML.
Les critères 8.3 et 8.4 du RGAA 4.1 exigent qu’un code de langue soit déclaré dans le code source, au niveau de la balise <html> et que ce code soit pertinent par rapport au contenu du site.
La valeur de l'attribut lang dans le code source est récupérée par l'extension, qui doit être située dans la balise lang. Ensuite, l'utilisateur a la possibilité de comparer cette valeur avec le contenu de la page afin d'en évaluer la validité. En l'absence d'attribut lang, cette section sera vide.
Le critère 9.2 du RGAA 4.1 demande que la structure du document soit cohérente. L'extension analyse le code source pour vérifier la présence des balises structurelles <header>, <main>, <nav> et <footer>. Elle affiche ensuite le nombre de fois que chacune de ces balises apparaît dans le document. Quand une des balises est présente dans le code, une icône check est affichée à côté du nom concerné et si la balise est absente, une icône alerte est affichée. Cette fonctionnalité permet au testeur de vérifier rapidement la présence des balises de structuration dans le document.
Le testeur doit cependant s'assurer que chaque balise de structuration contient le contenu approprié. Par exemple :
Cette vérification manuelle est nécessaire pour garantir que la structure du document respecte pleinement les exigences du RGAA 4.1.
Il est nécessaire que les zones de regroupement de contenus, présentes sur plusieurs pages, puissent être atteintes ou évitées, critères 12.6. Pour cela, une des conditions consiste à ce que chaque zone possède un rôle WAI-ARIA correspondant à sa nature.
Voici les rôles WAI-ARIA requis pour chaque zone :
L’extension aide les utilisateurs à vérifier la présence de ces rôles dans le code source de la page. Si un rôle est présent, l'extension affiche le rôle correspondant ainsi qu'une icône de validation. En revanche, si un rôle est absent, une icône d'alerte est affichée.
Cependant, le testeur doit également vérifier que les autres conditions du critère sont respectées :
Au niveau de l’audit d’un site, il y a des tests qui doivent se faire sur des composants spécifiques. Cela implique que les auditeurs puissent vérifier si des composants sont correctement définis dans le code source à travers l’utilisation de lecteur d’écrans ou en inspectant le code source pour vérifier la présence d’attributs obligatoire ou recommandés selon le RGAA 4.1.
Afin de faciliter le travail d’un testeur qui doit repérer sur la page des composants tels que les images, liens, titres, listes, etc., l’outil de test inspecteurA11y offre une multitude d’options permettant de repérer rapidement ces éléments directement sur la page.
Dans le deuxième onglet de l’outil, on peut retrouver une série de boutons radio. Chaque bouton radio permet de mettre en évidence sur la page le composant mentionné. Cela se fait à travers une bordure rouge qui se place autour du composant.
De plus, un petit bandeau sera ajouté en haut à la droite du composant pour fournir des informations supplémentaires sur des éléments tels que des attributs d’accessibilité qui sont à vérifier. Cela permet aux testeurs de gagner du temps en évitant d’aller dans le code source pour vérifier la présence de ces attributs et la pertinence de leur contenu.
Un exemple concret de cela est l’analyse des images d'une page. L'outil permet de mettre en évidence toutes les images sur la page ajoutée à travers une balise <img> et d'afficher juste au-dessus de ces images la valeur contenue dans l'attribut alt. Si l'image possède un attribut alt, mais qu’il est vide comme le recommande le référentiel pour les images décoratives, alors le message affiché sera "alt vide". Et finalement quand on a un attribut alt qui est contribuée, le message affiché sera le contenu de cet attribut. Ainsi cela permet aux testeurs de voir toutes les images, de vérifier la présence de l'attribut alt et la pertinence de leur contenu, répondant ainsi aux critères 1.1, 1.2 et 1.3 du RGAA 4.1.
Petite synthèse de ce que permettent de faire les autres boutons radio :
En plus de permettre de trouver rapidement ces éléments sur une page, l'outil affiche directement dans le label de chaque bouton radio le nombre d'instances ou le composant a été trouvé. Il n'est donc pas obligatoire de faire tous les tests étant donné que si un composant est présent son label sera mis en gras et le nombre d'instances trouvées affichées dans le label lui-même.
Le critère 10. 5 du référentiel RGAA 4.1 demandent à ce que tous les éléments susceptibles de contenir du texte possèdent une couleur de police et de fond définie. Afin de déterminer cela un testeur doit aller vérifier dans l'inspecteur du navigateur si tout élément de ce type possède bien un attribut color définissant une couleur de police et l'attribut background-color qui elle définit la couleur de fond.
Le test couleur par défaut disponible dans la partie divers de l'outil inspecteurA11y simplifie ce test. Il injecte une couleur de fond et de police rouge à la balise <html>. Si les feuilles de style ont été correctement configurées alors rien ne changera sur la page. Au cas contraire, du texte deviendra rouge et certaines parties de la page auront un fond rouge. Cela permet au testeur de vérifier globalement la page sans avoir à vérifier élément par élément.
Le dernier test que permet de faire l'outil et la vérification que les propriétés d’espacement du texte peuvent être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité. En activant cette option dans inspecteurA11y, un style particulier est injecté dans la page pour augmenter l'espacement entre les lettres, les mots, les lignes et les paragraphes. Le testeur peut ensuite vérifier que cet espacement imposé sur tout le contenu de la page n’entraîne pas de perte de contenu à travers des chevauchements de textes ni de pertes de fonctionnalités.
En résumé, inspecteurA11y offre une série de fonctions facilitant le travail de tests pour l’accessibilité d’un site. Il permet de trouver des éléments spécifiques importants pour l’accessibilité dans le code source de. De plus, il aide à repérer rapidement des composants spécifiques en les mettant en évidence sur la page et affichant des informations pertinentes directement sur la page.
Grâce à ces fonctionnalités, le testeur peut gagner du temps et s’assurer que les critères du RGAA 4.1 sont conformes sans avoir à fouiller dans le code source de la page.