Liberogic lance son deuxième outil d'accessibilité web : l'extension Chrome « A11y Navigation Auditor ». Cet outil visualise rapidement et précisément la structure d'un site web, permettant ainsi de corriger facilement des problèmes souvent négligés. Il a été conçu pour faciliter une vérification structurelle complète et permettre des évaluations d'accessibilité plus fiables.
Contexte du développement
De nombreux outils permettent d'évaluer l'accessibilité.
Les outils qui ne traitent que des catégories spécifiques telles que les titres et les points de repère ne peuvent pas appréhender la situation dans son ensemble.
Bien que le type de tableau qui superpose des marqueurs sur la page permette d'avoir une vue d'ensemble, il encombre l'écran et empêche d'avoir une vision globale.
Notre objectif était de créer un outil qui comble cette lacune, un outil qui vous permette d'appréhender la situation dans son ensemble et de la visualiser d'un point de vue aérien sans encombrer l'écran.
J'ai utilisé la fonction de liste d'éléments des lecteurs d'écran, comme l'affichage rotatif de VoiceOver, comme référence.
En visualisant cela sur le panneau latéral et en ajoutant une fonction de détection des problèmes, nous avons créé un outil de développement facile à comprendre et permettant des diagnostics structurels avancés.
Objectifs et problèmes d'audit à détecter
▪️Titre
Saut de niveau, titres vides, rôles manquants, etc.
▪️Liens
Texte vide, formulation imprécise, liens dupliqués, etc.
▪️Form
Étiquettes manquantes, attribut de saisie semi-automatique, mappage des messages d'erreur, etc.
▪️ Monument
Absence d'élément principal, incapacité à distinguer les rôles dupliqués et lacunes dans la structuration des éléments.
▪️Image
Attribut alt manquant, texte alt inapproprié (par exemple, « Image »), utilisation de noms de fichiers incorrects, etc.
▪️Table
Absence de légendes ou d'en-têtes, et lacunes dans les portées/en-têtes des structures complexes.
Caractéristiques principales
▪️Détection des problèmes conformes aux WCAG
Référez-vous aux critères de succès WCAG (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.) et affichez-les en trois niveaux : erreur, avertissement et information.
▪️ Affichage des noms accessibles calculés
Conformément à la spécification ARIA, les noms que les lecteurs d'écran lisent effectivement à voix haute et leurs dérivés sont visualisés.
▪️Surveillance en temps réel de l'état d'ARIA
Il détecte automatiquement les changements d'état tels que aria-expanded et aria-invalid, ainsi que les changements dynamiques des noms accessibles tels que aria-label, permettant une confirmation immédiate des modifications d'accessibilité en réponse aux actions de l'utilisateur.
▪️Cliquez pour mettre en surbrillance
Il suffit de cliquer sur un élément du panneau pour faire défiler jusqu'à l'élément correspondant et le sélectionner. Vous pouvez également passer d'un élément à l'autre à l'aide des flèches directionnelles de votre clavier.
▪️Fonctionnalités avancées pour les professionnels
- Activer/désactiver l'inspection des éléments cachés
- Exclusion automatique des widgets tiers
- Prend en charge deux langues : le japonais et l'anglais
Téléchargez A11y Navigation Auditor ici
Chez Liberogic, notre objectif est de faire de l'accessibilité une qualité standard plutôt qu'un élément nécessitant une attention particulière.
Après notre premier produit, « Area Contrast Checker », « A11y Navigation Auditor » est un autre outil qui intègre les fonctionnalités dont nous avions cruellement besoin sur le terrain. Comme son nom l'indique, Navigation Auditor a pour objectif de faciliter la création de sites web accessibles à tous, sans qu'ils aient à se perdre. C'est là toute notre philosophie.
Rendre la conformité en matière d'accessibilité plus simple et plus accessible. Nous préparons nos prochains outils, alors restez à l'affût !
