React Native

Linting avec axe Linter

L' extension VSCode axe Accessibility Linter et serveur axe Linter incluent désormais la prise en charge de React Native.

Détectez les problèmes d'accessibilité lors de la création de nouvelles fonctionnalités ou de la correction de bugs avec axe Linter, puis utilisez axe DevTools Mobile pour approfondir les tests d'accessibilité avec des tests automatisés ciblés par plate-forme.

La fonctionnalité comprend actuellement 6 règles qui s'exécutent sur les fichiers React Native (.js, .jsx, .ts et .tsx). Veuillez consulter les liens suivants ou la documentation complète d'axe Linter pour en savoir plus sur ce que chaque règle teste et comment résoudre les problèmes détectés par elles :

• A des actions d'accessibilité valides
• A un rôle d'accessibilité valide
• A un état d'accessibilité valide
• A une valeur d'accessibilité valide
• L'image a une étiquette d'accessibilité
• A un rôle d'accessibilité

Tests automatisés

Les tests d'accessibilité avec axe DevTools Mobile pour les applications React Native sont pris en charge dans deux méthodes de test d'interface utilisateur différentes : Appium ou Native. Les deux ont leurs avantages, mais sont principalement liés à la manière dont vos tests se déroulent aujourd'hui et au niveau de confort de votre équipe avec la mise en œuvre des tests d'interface utilisateur.

Option 1 : Appium

Si vous utilisez déjà Appium pour tester votre application mobile ou recherchez une solution pour tester plusieurs plates-formes, le plugin axe DevTools Mobile pour Appium offre une intégration pour tester l'accessibilité rapidement.

Suivez le guide de démarrage avec axe DevTools Mobile pour Appium.

Option 2 : Tests d'interface utilisateur avec des suites de tests natives

Utilisez axe DevTools pour iOS et Android pour trouver rapidement les problèmes d'accessibilité dans votre application React Native grâce à des tests automatisés avant qu'ils ne soient mis en production.

Pourquoi deux frameworks ?

Les plateformes entre iOS et Android sont tout simplement différentes. Fabriqués par différentes entreprises, ni l'une ni l'autre ne promet de se conformer à des normes ou des attentes communes. Il s’agit d’une recette pour garantir que l’expérience de l’utilisateur final est différente pour chaque plateforme. Grâce aux tests d’interface utilisateur, nous pouvons tester automatiquement l’accessibilité de votre application mobile au plus près de l’expérience réelle d’une personne handicapée.

Android

Les tests d'accessibilité sur Android sont pris en charge via les tests Espresso. Depuis votre projet React Native, sélectionnez le dossier android et faites-le glisser vers Android Studio pour ouvrir le projet. Une fois l'importation d'Android Studio terminée, suivez le guide de démarrage.

Si vous avez besoin de références supplémentaires pour la configuration, nous avons un exemple d'application sur GitHub. Ajoutez vos informations d’identification Deque et suivez le fichier README pour commencer à exécuter des analyses immédiatement. Ouvrez le fichier ExampleEndToEndAccessibilityTest.kt pour voir un exemple complet de tests automatisés avec axe DevTools pour Android. Cette application est inaccessible pour présenter les étapes d'implémentation d'axe DevTools Mobile et sa détection des problèmes.

iOS et iPadOS

Les tests d'accessibilité sur la plateforme Apple sont pris en charge dans notre framework axeDevToolsXCUI. Depuis votre projet React Native, ouvrez le dossier ios et recherchez l'espace de travail de votre projet, se terminant par .xcworkspace. Double-cliquez pour ouvrir l'espace de travail dans Xcode. Vous pouvez maintenant suivre notre guide pour commencer avec axeDevToolsXCUI.xcframework.

Si vous avez besoin de références supplémentaires pour la configuration, nous avons un exemple d'application sur GitHub. Ajoutez vos informations d’identification Deque et suivez le fichier README pour commencer à exécuter des analyses immédiatement. L'exemple nécessaire aux tests React Native est disponible dans le dossier axe-devtools-ios-sample-appUITests [nom du dossier]et est nommé SampleUITests-XCUI.swift[nom du fichier]. Cette application est inaccessible pour présenter les étapes d'implémentation d'axe DevTools Mobile et sa détection des problèmes.

Ai-je besoin à la fois d’un linter et de tests automatisés ?

Absolument. React Native prend une base de code et la porte sur deux plates-formes différentes, ce qui apporte de nombreuses nuances et cas limites à la façon dont les propriétés et les vues se comportent pour chaque plate-forme.

Voici un exemple : nous avons constaté que React Native n'ajoute pas automatiquement le rôle d'accessibilité à de nombreux composants, ce qui peut empêcher la technologie d'assistance de comprendre comment interpréter correctement les composants pour la personne utilisant votre application. Cela signifie que l'application pourrait être complètement inutilisable pour certains parcours de réussite client critiques. Avec le linter, vous serez guidé sur l'endroit où ajouter ces rôles pour garantir que le composant est disponible pour la technologie d'assistance. Une fois que les composants ont les rôles appropriés pour être détectés, axe DevTools Mobile peut alors examiner plus en détail pour garantir que d'autres propriétés d'accessibilité sont présentes, précises et significatives pour votre public ayant des handicaps.