Audit de l'accessibilité avec réactif-axe et eslint-plugin-jsx-a11y

Votre site React n'est pas progressif s'il n'est pas accessible. Un audit pendant le développement peut vous aider à détecter les éventuels problèmes.

Houssein Djirdeh

Remarque : Si vous souhaitez en savoir plus sur les concepts de base de l'accessibilité dans les pages Web, consultez d'abord le guide Qu'est-ce que l'accessibilité ?.

react-axe est une bibliothèque qui audite une application React et consigne tous les problèmes d'accessibilité dans la console des outils pour les développeurs Chrome. Il utilise la bibliothèque de tests Open Source axe pour signaler les problèmes et leur gravité.

eslint-plugin-jsx-a11y est un plug-in ESLint qui identifie et applique un certain nombre de règles d'accessibilité directement dans votre JSX. En combinant cet outil avec un outil qui teste le DOM final affiché, tel que react-axe, vous pouvez identifier et résoudre les problèmes d'accessibilité sur votre site.

En quoi est-ce utile ?

Il est essentiel de créer des sites Web qui permettent à chaque utilisateur, indépendamment de sa déficience ou de ses restrictions, la possibilité d'accéder à son contenu. L'utilisation de bibliothèques d'audit telles que react-axe et eslint-plugin-jsx-a11y pendant le développement de votre application React expose automatiquement les problèmes d'accessibilité lorsqu'ils se présentent.

Utiliser eslint-plugin-jsx-a11y

React prend déjà en charge l'écriture d'éléments HTML accessibles dans la syntaxe JSX. Par exemple, il vous suffit d'utiliser l'attribut htmlFor au lieu de for pour associer un libellé à un élément de formulaire spécifique au sein d'un composant React.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

La documentation sur l'accessibilité de React couvre toutes les nuances de gestion des problèmes d'accessibilité dans un composant React. Pour faciliter la détection de ces problèmes pendant le développement, l'outil Create React App (CRA) inclut par défaut le plug-in eslint-plugin-jsx-a11y pour ESLint.

Pour activer les fonctions d'analyse lint préconfigurées fournies par l'ARC:

1. Installez le plug-in ESLint approprié pour votre éditeur de code.
2. Ajouter un fichier .eslintrc.json à votre projet

{
  "extends": "react-app"
}

Remarque : Pour en savoir plus sur la configuration de votre éditeur afin qu'il soit compatible avec le linting prêt à l'emploi, consultez la documentation de la CRA.

Certains problèmes d'accessibilité courants sont maintenant affichés.

Pour rechercher encore plus de règles d'accessibilité, modifiez le fichier afin d'inclure automatiquement toutes les règles recommandées par le plug-in:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

Si vous souhaitez un sous-ensemble de règles encore plus strict, passez en mode strict:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

La documentation du projet fournit des informations sur les différences entre le mode recommandé et le mode strict.

Utiliser l'axe de réaction

eslint-plugin-jsx-a11y peut vous aider à identifier facilement les problèmes d'accessibilité dans votre JSX, mais il ne teste pas la sortie HTML finale. react-axe est une bibliothèque qui remplit exactement cette fonction en fournissant un wrapper React autour de l'outil de test axe-core de Deque Labs.

Pour commencer, installez la bibliothèque en tant que dépendance de développement:

npm install --save-dev react-axe

Désormais, il vous suffit d'initialiser le module dans index.js:

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

Une importation dynamique permet ici de ne charger la bibliothèque que lorsqu'elle n'est pas en mode production, avant d'afficher et de démarrer le composant racine App. Cela permet de s'assurer qu'elle ne sera pas inutilement incluse dans le bundle de production final.

Désormais, lorsque vous exécutez l'application pendant le développement, les problèmes sont directement signalés dans la console des outils pour les développeurs Chrome.

Un niveau de gravité est également attribué à chaque cas de non-conformité. Ces niveaux sont les suivants:

• Mineure
• Modérée
• Sérieux
• Critique

Remarque : Si vous souhaitez inclure des tests d'accessibilité dans votre workflow de tests unitaires, consultez l'exemple d'intégration Jest et axe pour comprendre comment.

Conclusion

1. Si vous créez un site avec React, incluez un audit de l'accessibilité dans votre workflow dès le début pour détecter les problèmes au fur et à mesure que vous créez vos composants.
2. Utilisez eslint-plugin-jsx-a11y pour ajouter des vérifications d'accessibilité à votre workflow d'analyse lint. L'ARC est déjà inclus, mais vous pouvez passer en mode recommandé ou strict.
3. En plus des tests de développement en local, incluez react-axe dans votre application pour détecter tout problème dans le DOM final rendu. Ne l'incluez pas dans votre lot de production.