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.
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:
- Installez le plug-in ESLint approprié pour votre éditeur de code.
- Ajouter un fichier
.eslintrc.json
à votre projet
{
"extends": "react-app"
}
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
Conclusion
- 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.
- 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. - 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.