jsx-a11y et garde-fous au niveau des composants

De nombreuses erreurs d’accessibilité sont faciles à repérer dans le code. Un analyseur statique peut les signaler pendant que vous écrivez, bien avant qu’un véritable utilisateur ne rencontre l’obstacle. 🛡️

Le paquet eslint-plugin-jsx-a11y ajoute des règles d’accessibilité à ESLint pour JSX. Il vérifie que vos composants ne contiennent pas les erreurs courantes et bien connues en matière d’accessibilité.

Étendez la configuration recommended du plugin pour activer d’un coup une base solide de règles, au lieu de les activer une par une manuellement.

Le plugin avertit lorsqu’un élément img n’a pas d’attribut alt. Cette seule règle évite un problème d’accessibilité très courant et lourd de conséquences.

Placer onClick sur une div sans prise en charge du clavier déclenche un avertissement. La solution consiste à utiliser un véritable bouton, accessible au focus et utilisable au clavier.

Les règles vérifient que les contrôles de formulaire possèdent un libellé associé. Un champ sans libellé est signalé afin de ne jamais parvenir aux utilisateurs sans nom.

Le plugin vérifie que les attributs et rôles ARIA sont réels et correctement utilisés. Les fautes comme aria-lable ou les rôles invalides sont détectés immédiatement.

Un analyseur statique ne voit que votre code statique. Il ne peut pas déterminer si votre texte alt est pertinent ou si l’ordre du focus est logique : les tests manuels restent donc importants.

Intégrez l’accessibilité dans les composants partagés. Un Button réutilisable qui produit toujours un véritable élément bouton diffuse un comportement correct dans toute l’application.

Exécutez ESLint dans votre pipeline afin que les avertissements d’accessibilité fassent échouer la compilation. Cela empêche les régressions de passer entre les mailles de la revue de code et d’arriver en production.

Avec l’extension ESLint pour l’éditeur, les avertissements apparaissent directement dans votre code. Ce retour rapide apprend à l’équipe les bonnes pratiques d’accessibilité au fil de l’écriture.

Utilisez jsx-a11y pour détecter les erreurs courantes, créer des composants partagés accessibles et l’intégrer à l’intégration continue, tout en continuant à vous appuyer sur des tests manuels pour le reste. ✅