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.
Information sur la page
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>
Titre
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.
Doctype
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.
Langue
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.
Landmarks
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 :
- la balise <header> doit contenir le contenu de la bannière
- la balise <main> doit contenir le contenu principal
- la balise <nav> doit contenir des éléments de navigation (comme le menu ou le fil d'Ariane)
- la balise <footer> doit comporter le contenu du pied de page.
Cette vérification manuelle est nécessaire pour garantir que la structure du document respecte pleinement les exigences du RGAA 4.1.
Zones de page
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 :
- La zone d'en-tête doit avoir un attribut WAI-ARIA role="banner".
- Le menu de navigation principal doit avoir un attribut WAI-ARIA role="navigation".
- La zone de contenu principal doit avoir un attribut WAI-ARIA role="main".
- La zone de pied de page doit avoir un attribut WAI-ARIA role="contentinfo".
- La zone de moteur de recherche sur le site doit avoir un attribut WAI-ARIA role="search".
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 :
- La zone doit posséder un titre dont le contenu permet de comprendre la nature du contenu de la zone.
- La zone peut être masquée par le biais d'un bouton précédent directement la zone dans l'ordre du code source.
- La zone peut être évitée par le biais d'un lien d'évitement précédent directement la zone dans l'ordre du code source.
- La zone peut être atteinte par le biais d'un lien d'accès rapide visible ou, à défaut, visible à la prise de focus.
Tester la page
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.
Comment ça marche
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 :
- Image SVG : met en évidence toutes les balises <svg> et de vérifier si ces balises possèdent les attributs role="img" et aria-hidden="true" – Critères 1.1. 1.2, 1.3 ;
- Image sans alt : met en évidence toutes les balises <img> qui ne possède pas l'attribut alt – Critères 1.1. 1.2, 1.3 ;
- Lien par attribut : met en évidence tous les liens contenus dans une valise lien <a> et qui possèdent des attributs title ou aria-label. Le contenu de ces attributs sera affiché juste avant le lien permettant au testeur de les voir sans avoir à inspecter le code source – Critère 6.1, 6.2 ;
- Nouvel onglet : mets en évidence tous les liens s'ouvrant dans un nouvel onglet ou nouvelle fenêtre – Critère 6.1 ;
- Sans intitulé : mets en évidence tous les liens qui ne possèdent pas d'intitulé visible – Critère 6.2 ;
- Lien vers PDF : met en évidence tous les liens qui ouvre un document PDF – Critère 6.1 ;
- Titre : met en évidence tous les titres de la page contenue dans des balises de titres <hx> et affiche le niveau du titre permettant de rapidement déterminer la hiérarchie des titres d'une page – Critère 9.1 ;
- Paragraphe : met en évidence tous les textes contenus dans des balises paragraphe <p>. Le but de ce test et d'identifier les balises paragraphes vides et les blocs de texte qui ne sont pas dans des balises paragraphes – Critère 8.9 ;
- Citation : met en évidence les citations présentes dans la page et dans des balises de citation <q> et <blockquote> - Critère 9.4 ;
- Cadre : met en évidence toutes les balises <iframe> présentes dans le contenu et visibles pour les utilisateurs. Le contenu de l’attribut title est affiché, permettant de rapidement vérifier la présence et la pertinence d'un titre pour un cadre – Critère 2.1, 2.2 ;
- Tableau : met en évidence les tableaux présents sur la page et dans des balises <table>. Ce test affiche aussi les attributs scope des balises de titres si ceux-ci sont présents – Critère 5.6, 5.7 ;
- Liste : met en évidence toutes les listes présentes sur la page permettant de rapidement vérifier que les listes sont structurées dans des balises ul/li ou ol/li – Critère 9.3.
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.
Autres tests
Couleur
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.
Espacement
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.
Conclusion
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.
