Nous vous présentons une traduction d'un article d'
Indrek Lasn publié sur Medium.com. Sous la coupe, vous apprendrez à rendre une application ou un site Web plus accessible avec ax - un outil pour tester l'accessibilité des sites Web et d'autres interfaces utilisateur.
react-ax affiche les résultats des tests de disponibilité Quelle est la différence entre une bonne application et une excellente? Dans l'accessibilité!
N'oubliez pas les détails. Certains utilisateurs voudront contrôler l'interface de votre application à l'aide de leur propre clavier, certains utiliseront des touches de raccourci comme Tab pour se déplacer rapidement et les utilisateurs malvoyants peuvent également s'abonner à votre blog.
Pour rendre le produit accessible à tous, vous avez besoin de la bibliothèque de tests de disponibilité de ax.
hache-noyauAx Philosophie de la bibliothèque de tests de disponibilité
Internet ne deviendra un espace véritablement inclusif que si les développeurs testent toujours l'accessibilité de leurs projets et commencent à appliquer les principes du codage «abordable».
Les tests de disponibilité automatisés permettent de gagner un temps de développement considérable. Pour le mener, il ne nécessite aucune compétence particulière, ce qui permet à l'équipe de se concentrer sur la chose la plus importante - le développement de produits. Malheureusement, la plupart des outils de test sont conçus pour des sites et des applications, dont le développement est terminé, et pour obtenir des résultats fiables, c'est assez difficile. En conséquence, les délais peuvent être manqués lorsque le produit semble être sur le point de partir pour la sortie.
La bibliothèque ax est compatible avec tous les navigateurs, outils et environnements de test modernes utilisés par les experts. Grâce à lui, les tests d'accessibilité peuvent faire partie de tout autre test que votre équipe effectue quotidiennement (par exemple, les tests unitaires, les tests d'intégration, les tests de navigateur, etc.). L'utilisation d'outils de test de disponibilité à un stade précoce du développement vous fera gagner du temps et des ressources, tout en vous évitant de nombreux problèmes.
Manifeste AX
- ax est un projet open source.
- Il n'a pas de faux positifs (les bugs ne comptent pas).
- ax fonctionne dans tous les navigateurs modernes et avec tous les outils, plates-formes, bibliothèques et environnements.
- ax est soutenu par une grande société d' accès numérique ( Deque Systems ).
- Cette bibliothèque s'intègre facilement aux outils fonctionnels / d'acceptation existants pour des tests automatisés.
- ax détermine automatiquement les règles à exécuter en fonction du contexte d'évaluation.
- ax prend en charge les appareils de mémoire interne, les appareils statiques, les tests d'intégration et l'imbrication infinie d'iFrame.
- ax a une configuration extrêmement flexible.
Premiers pas avec React
Page GitHub React-AxInstallez le module avec NPM ou fil.
NPM:
npm install --save-dev react-axe
Fil:
yarn add react-axe
Nous lançons le module
Nous appelons la fonction exportée, en passant les objets React et ReactDOM et un délai en millisecondes, qui sera suivi entre chaque changement de composant et l'heure de début de l'analyse.
const React = require('react'); const ReactDOM = require('react-dom'); if (process.env.NODE_ENV !== 'production') { const axe = require('react-axe'); axe(React, ReactDOM, 1000); }
Courir sans framework
Installez d'abord le package
axe-core .
npm install axe-core --save-dev
Composition du package API
Le package
API ax-core comprend:
axe.js - Fichier JavaScript à ajouter au site testé (API);axe.min.js est une version plus petite du fichier ci-dessus.
Ajoutez un fichier JavaScript à chaque appareil ou système de test iFrame.
<script src="node_modules/axe-core/axe.min.js"></script>
Ensuite, nous ajoutons des appels à chaque point de test, où il devient visible ou un nouvel élément d'interface apparaît.
axe.run(function (err, results) { if (err) throw err; ok(results.violations.length === 0, 'Should be no accessibility issues');
Nous lançons le module dans l'environnement de développement (comme dans le code ci-dessus), sinon l'application utilisera plus de ressources pendant le test qu'en fonctionnement normal. Vous pouvez utiliser
envify (comme indiqué dans
cet exemple).
Après le démarrage, le module commencera à afficher des informations sur les erreurs d'accessibilité dans la console Chrome Devtools chaque fois qu'un composant est mis à jour.
Par conséquent, lors du lancement d'une application React, nous serons en mesure de voir tous les problèmes d'accessibilité (le cas échéant) dans la console.
Afficher les erreurs et les problèmes d'accessibilité dans axNavigateurs pris en charge
L'API ax-core prend en charge les navigateurs suivants:
- Microsoft Edge 40 et supérieur;
- Google Chrome 42 et supérieur;
- Mozilla Firefox 38 et supérieur;
- Apple Safari 7 et supérieur;
- Internet Explorer 9, 10, 11.
Par support, je veux dire corriger les bugs et tester régulièrement le navigateur autant que possible. Actuellement, à chaque demande d'extraction, seuls Firefox, Chrome et Internet Explorer 11 sont testés.
La prise en charge de JSDOM est toujours limitée. Maintenant, les développeurs essaient de rendre toutes les règles compatibles avec JSDOM, mais lorsque cela n'est pas possible, je recommande de désactiver les règles. Il est connu que la règle de
color-contrast des
color-contrast ne fonctionne pas avec JSDOM.
Actuellement, ax ne fonctionne que dans des environnements où toutes les fonctions sont prises en charge nativement ou correctement implémentées. La bibliothèque ne prend pas en charge l'implémentation DOM obsolète v0 obsolète.
Règles d'accessibilité
Une liste complète des règles lancées par
axe-core peut être trouvée
ici .
Règles axConclusion
Assurez-vous que votre application est accessible à un large éventail d'utilisateurs. Il y a beaucoup de gens autour, chacun avec ses propres besoins. Plus vous pouvez prendre en compte les besoins, plus le trafic se retrouvera dans votre application ou votre site. Profitez de chaque occasion pour améliorer votre produit.
Merci d'avoir lu!