J'ai récemment animé une conférence intitulée« Les outils du métier : l'accessibilité sans se ruiner» pour Accessibility NYC (a11yNYC) dans le sud de Manhattan. Cette session portait sur les outils d'accessibilité : ceux dans lesquels il convient d'investir, comment en tirer le meilleur parti et quand envisager des fonctionnalités payantes.
Dans cet article, je vais résumer certaines des informations que j’ai partagées. Nous allons passer en revue des outils conçus pour trois étapes du développement : l’écriture du code, les tests en local et la phase post-commit/pré-production. Je m’intéresserai plus particulièrement aux outils de linting gratuits et aux extensions de navigateur que vous pouvez utiliser dès maintenant.
Le choix et l'utilisation d'outils nécessitent un investissement en temps et, souvent, en argent. Mon objectif est de vous faire découvrir quelques outils gratuits et facilement accessibles qui vous aideront à vous lancer dans l'accessibilité numérique et vous permettront de réaliser les bons investissements en fonction de vos besoins en matière de développement.
Vous pouvez visionner la présentation dans son intégralité ci-dessous :
Linters
Pour l'écriture de code, qui constitue la première étape du développement, les linters gratuits peuvent s'avérer très utiles. Les linters sont en quelque sorte des correcteurs orthographiques pour votre code : ils identifient rapidement les erreurs en se basant sur des règles prédéfinies.
L'un des outils de vérification d'accessibilité les plus répandus est « eslint-plugin-jsx-a11y », géré par l'organisation JSX-ESLint sur GitHub :
Ce plugin effectue une analyse statique du code JSX afin de détecter les problèmes d'accessibilité dans les applications React. Comme il ne détecte que les erreurs présentes dans le code statique, utilisez-le en complément de @axe-core/react pour tester l'accessibilité du DOM rendu. Considérez ces outils comme une étape parmi d'autres d'un processus de test d'accessibilité plus large et veillez à toujours tester vos applications à l'aide de technologies d'assistance.
Vous pouvez utiliser cet outil formidable pour détecter les erreurs dans votre environnement de développement et identifier certaines non-conformités aux WCAG. Il existe une liste exhaustive de règles préexistantes, et vous pouvez même créer les vôtres.
Je vous invite également à découvrir l' plugin Axe DevTools Linter . Ce linter signale les erreurs à l’aide d’une ligne ondulée rouge sous le code problématique. Il fournit également un lien vers l’ Deque University, où vous trouverez des informations complètes sur les corrections à apporter, les handicaps concernés par la violation, les critères WCAG enfreints, et bien plus encore.
Vous pouvez voir ces fonctionnalités sur l'image ci-dessous :
Une autre nouveauté concerne l'affichage dans l'onglet « Problèmes ». Une fonctionnalité supplémentaire réservée à la version Pro permet à l'utilisateur de bloquer une pull request présentant des problèmes d'accessibilité.
Extensions de navigateur
Les tests en local constituent la deuxième étape du développement. Examinons trois types d'extensions de navigateur qui peuvent s'avérer très utiles pour identifier les problèmes d'accessibilité lors des tests :
Lighthouse vous permet de réaliser des audits pour évaluer les performances d'une page et identifier les problèmes d'accessibilité. Lighthouse utilise un système de notation et des graphiques. Vous pouvez également l'utiliser pour tester les performances, le référencement naturel (SEO) et bien plus encore.
WAVE affiche une superposition visuelle des problèmes d'accessibilité directement sur la page, ce qui en fait un outil idéal pour la vérification manuelle et l'apprentissage.
L'extension axe DevToolsfournit des résultats précis au niveau du code, spécialement conçus pour les développeurs, sans aucun faux positif, ainsi que des conseils détaillés pour la résolution des problèmes. Vous pouvez utiliser axe DevTools non seulement pour identifier les problèmes, mais aussi pour apprendre à les résoudre. Commencez dès aujourd'hui avec un essai gratuit.
Au cours de ma présentation, nous avons examiné un problème de contraste des couleurs. Après l'avoir corrigé, nous avons rescanné la page et avons constaté que ces erreurs avaient disparu.
Vous pouvez visionner la vidéo ci-dessous pour avoir un aperçu de l'extension DevTools d'Axe:
Demande de fusion / Révision
Nos derniers outils s'inscrivent dans la troisième phase de développement : la révision, la demande de fusion et le processus global d'intégration continue et de déploiement continu (CI/CD) :
L'API Axe Developer Hub analyse l'accessibilité de l'ensemble de votre dépôt, surveille les commits Git à la recherche de régressions et peut s'intégrer à GitHub pour bloquer les pull requests qui introduisent de nouveaux problèmes d'accessibilité. Vous pouvez l'utiliser pour visualiser les tendances au fil du temps et partager ou exporter facilement les résultats. Axe Developer Hub propose une période d'essai gratuite (aucune carte bancaire requise) et fournit une clé API ainsi qu'un extrait de code pour faciliter l'intégration dans votre flux de travail.
L'API WAVE automatise les contrôles d'accessibilité au niveau des pages en soumettant des URL et en renvoyant des résultats au format JSON ou XML basés sur des pages entièrement affichées, y compris le contenu dynamique. Ces deux outils sont d'abord gratuits, puis passent à un modèle payant.
Prochaines étapes
Se procurer et utiliser un outil, c'est investir dans votre métier, et les outils gratuits constituent un excellent moyen de se lancer dans l'accessibilité numérique.
Vous pourrez apporter des améliorations immédiates et, surtout, vous aurez une idée beaucoup plus précise du type d'investissement dont vous aurez besoin pour garantir et maintenir l'accessibilité à long terme.
Avec les bons outils et un niveau d'investissement adapté, vous pouvez commencer à développer des produits et des services accessibles à tous, y compris aux personnes en situation de handicap.
Travaillons tous ensemble pour rendre le Web plus accessible.
