Nous avons lancé « A11y Navigation Auditor », une extension Chrome, deuxième outil de Liberogic dédié à l'accessibilité web. Il permet de visualiser rapidement et avec précision l'« ossature » d'un site web et d'aborder de manière fluide les problèmes souvent négligés. Conçu pour faciliter une vérification exhaustive de la structure, cet outil vise à rendre le diagnostic d'accessibilité plus fiable.
Contexte du développement
Il existe de nombreux outils pour diagnostiquer l'accessibilité.
Les outils qui ne traitent que certaines catégories, comme les titres ou les repères, ne permettent pas d'avoir une vue d'ensemble.
Ceux qui superposent des marqueurs sur la page offrent une vue globale, mais encombrent l'écran et gênent la vision d'ensemble.
Nous avons voulu combler cet écart en créant un outil qui permet de saisir l'ensemble de la structure sans encombrer l'écran.
Nous nous sommes inspirés de la liste des éléments proposée par les lecteurs d'écran, comme le rotor de VoiceOver.
En affichant cette liste dans un panneau latéral et en y ajoutant la détection des problèmes, nous avons créé un outil pour développeurs qui permet une analyse structurelle claire et avancée.
Éléments audités et problèmes détectés
▪️ Titres :
sauts de niveau, titres vides, rôles manquants, etc.
▪️ Liens :
texte vide, formulations peu claires, liens en double, etc.
▪️ Contrôles de formulaire :
étiquettes manquantes, attribut autocomplete, association des messages d'erreur, etc.
▪️ Repères :
absence de main, distinction des rôles en double, éléments de sectionnement incorrects, etc.
▪️Images :
absence d'attribut alt, texte alt inapproprié (ex. « image »), utilisation de noms de fichiers, etc.
▪️Tableaux :
absence de caption ou d'en-têtes, scope/headers incorrects dans les structures complexes, etc.
Fonctionnalités principales
▪️Détection des problèmes de conformité WCAG :
en se référant aux critères de réussite WCAG (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.), affichés sur trois niveaux : erreur, avertissement et information.
▪️Affichage du nom accessible calculé :
conformément aux spécifications ARIA, visualisation du nom réellement lu par les lecteurs d'écran et de son origine.
▪️Surveillance en temps réel des états ARIA :
détection automatique des changements d'états tels que aria-expanded et aria-invalid, ainsi que des modifications dynamiques du nom accessible via aria-label, pour vérifier immédiatement l'évolution de l'accessibilité en fonction des interactions.
▪️Surlignage au clic :
un simple clic sur un élément du panneau fait défiler la page jusqu'à l'élément concerné et le met en surbrillance. Les touches fléchées du clavier permettent également de naviguer entre les éléments.
▪️Fonctionnalités avancées pour les professionnels :
bascule d'inspection des éléments masqués,
exclusion automatique des widgets tiers,
prise en charge du japonais et de l'anglais
Télécharger A11y Navigation Auditor ici
Chez Liberogic, nous visons à faire de l'accessibilité non pas une « prestation spéciale », mais une qualité allant de soi.
Après « Area Contrast Checker », le premier outil de la série, « A11y Navigation Auditor » est lui aussi né de besoins que nous ressentions très concrètement sur le terrain. Comme son nom l'indique, « Navigation Auditor » a été conçu avec une intention claire : aider chacun à créer des sites où l'on peut atteindre sa destination sans se perdre.
Rendre l'accessibilité plus accessible et plus fluide. Un nouvel outil est déjà en préparation, alors restez à l'affût.
