Liberogic a lancé « A11y Navigation Auditor », une extension Chrome en tant que deuxième outil d'accessibilité web. Visualisez rapidement et précisément la « structure » d'un site web, et abordez sans friction les problèmes souvent négligés. Cet outil a été développé pour soutenir un audit structurel exhaustif et réaliser un diagnostic d'accessibilité plus fiable.
Contexte du développement
Il existe de nombreux outils pour auditer l'accessibilité.
Les outils qui traitent uniquement certaines catégories, comme les titres et les points de repère, ne permettent pas de saisir l'ensemble du tableau.
Les types qui superposent des marqueurs sur la page peuvent montrer l'ensemble, mais encombrent l'écran et nuisent à la vue d'ensemble.
Nous avons cherché à combler cette lacune en créant un outil qui « capture la vue d'ensemble tout en gardant l'écran dégagé pour une meilleure visualisation ».
Nous nous sommes inspirés par des fonctionnalités de liste d'éléments des lecteurs d'écran, comme l'affichage du rotor de VoiceOver.
En visualisant cela dans un panneau latéral et en ajoutant une fonctionnalité de détection des problèmes, nous avons réalisé un outil de développement qui permet un diagnostic structurel lisible et avancé.
Cibles d'audit et problèmes détectés
▪️ Titres
sauts de niveau, titres vides, perte de rôle, etc.
▪️ Liens
texte vide, formulation peu claire, doublons de liens, etc.
▪️ Contrôles de formulaire
libellés manquants, attribut autocomplete, association des messages d'erreur, etc.
▪️ Points de repère
absence de main, distinction des rôles en double, imperfections des éléments de sectionnement, etc.
▪️Images
attribut alt manquant, texte alt inapproprié (tel que « image »), utilisation de noms de fichiers, etc.
▪️Tableaux
caption ou en-têtes manquants, utilisation incorrecte de scope/headers dans les structures complexes, etc.
Fonctionnalités principales
▪️Détection des problèmes conformes à WCAG
référence aux critères de succès WCAG (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.), affichage en trois niveaux : erreur / avertissement / information.
▪️Affichage du nom accessible calculé
sur la base de la spécification ARIA, visualisation du nom que le lecteur d'écran lit réellement et de sa source.
▪️Surveillance en temps réel de l'état ARIA
détection automatique des changements d'état tels que aria-expanded, aria-invalid, ainsi que les modifications dynamiques du nom accessible via aria-label, etc., permettant de vérifier immédiatement les changements d'accessibilité en réponse à l'interaction.
▪️Mise en surbrillance au clic
il suffit de cliquer sur un élément du panneau pour faire défiler et mettre en surbrillance l'élément correspondant. La navigation entre les éléments est également possible avec les touches directionnelles du clavier.
▪️Fonctionnalités avancées pour les professionnels
・Basculement d'inspection des éléments masqués
・Exclusion automatique des widgets tiers
・Prise en charge du japonais et de l'anglais
Téléchargez A11y Navigation Auditor ici
Chez Liberogic, nous nous efforçons de faire de l'accessibilité non pas une « mesure particulière », mais un « standard de qualité évident ».
Suite à « Area Contrast Checker », notre premier outil, « A11y Navigation Auditor » concrétise une fonctionnalité que nous avons vivement souhaitée sur le terrain. Comme son nom l'indique, Navigation Auditor a pour objectif de soutenir la création de sites où chacun peut naviguer sans se perdre et atteindre sa destination. C'est l'esprit qui anime cet outil.
Rendre la conformité en matière d'accessibilité plus accessible et fluide. D'autres outils sont en préparation, alors restez à l'écoute.
