React Native

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Commencer avec les tests d'accessibilité dans React Native

Not for use with personal data

Utilisation de l'Analyseur Mobile

Avec Axe DevTools Mobile Analyzer, vous pouvez tester n'importe quelle application pour l'accessibilité sans accès au code source. Pour les applications écrites en React Native, vous pouvez effectuer des analyses d'accessibilité sur un appareil physique ou en utilisant un simulateur/émulateur. Pour un test d'accessibilité le plus complet possible de votre application mobile multiplateforme, vous devez effectuer des analyses pour les versions iOS et Android.

En savoir plus sur l'utilisation de l'Axe DevTools Mobile Analyzer :

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 dépendent principalement de la manière dont vos tests sont actuellement réalisés et du niveau de confort de votre équipe pour mettre en œuvre des tests d'interface utilisateur.

Option 1 : Appium

Si vous utilisez déjà Appium pour tester votre application mobile, ou si vous recherchez une solution unique pour tester sur plusieurs plateformes, les pilotes Appium d'Axe DevTools Mobile offrent une intégration permettant de tester l'accessibilité rapidement.

Après l'installation simple, configurez votre suite de tests automatisés pour rechercher des problèmes d'accessibilité. Les pilotes prennent en charge deux modes d'utilisation :

Pour un démarrage rapide, utilisez Auto Scan pour identifier automatiquement les problèmes d'accessibilité pendant l'exécution de votre suite de tests existante :
- Auto Scan avec le pilote UIAutomator2
- Auto Scan avec le pilote XCUITest
Pour un contrôle et une personnalisation plus fins dans vos tests, configurez pour Tests ciblés.

Option 2 : Tests d'Interface Utilisateur avec 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 n'atteignent la production.

Pourquoi deux frameworks ?

Les plateformes entre iOS et Android sont simplement différentes. Fabriquées par différentes entreprises, aucune ne promet de se conformer à des normes ou attentes partagées. C'est une recette pour garantir que l'expérience utilisateur finale est différente pour chaque plateforme. Grâce aux tests d'interface utilisateur, nous pouvons tester automatiquement l'accessibilité de votre application mobile aussi près que possible de l'expérience réelle d'une personne avec des handicaps.

Android

Les tests d'accessibilité sur Android sont pris en charge grâce aux 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 qu'Android Studio a terminé l'importation, suivez le guide de démarrage.

Si vous avez besoin de références supplémentaires pour vous installer, nous avons un application modèle sur GitHub. Ajoutez vos identifiants Deque et suivez le README pour commencer à exécuter des analyses dès que possible. Ouvrez le fichier ExampleEndToEndAccessibilityTest.kt pour voir un exemple complet de tests automatisés avec Axe DevTools pour Android. Cette application est inaccessible pour montrer les étapes de mise en œuvre d'Axe DevTools Mobile et la détection de ses 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 trouvez 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 vous installer, nous avons un application modèle sur GitHub. Ajoutez vos identifiants Deque et suivez le README pour commencer à exécuter des analyses dès que possible. L'exemple nécessaire pour les tests React Native est disponible dans le dossier axe-devtools-ios-sample-appUITests et est nommé SampleUITests-XCUI.swift. Cette application est inaccessible pour démontrer les étapes de mise en œuvre d'Axe DevTools Mobile et la détection de ses problèmes.

Linting avec Axe Linter

L'extension VSCode de l'Axe Accessibility Linter et le serveur Axe Linter offrent tous deux un support pour React Native.

Détectez les problèmes d'accessibilité tout en développant de nouvelles fonctionnalités ou en corrigeant des bugs avec Axe Linter, puis utilisez Axe DevTools Mobile pour approfondir vos tests d'accessibilité avec des tests automatisés ciblés par plateforme.

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

notes

Pour accéder à l'Axe Linter, vous devez contacter le support pour attribuer des licences. Envoyez votre demande à helpdesk@deque.com.

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

Absolument. React Native prend une base de code et la transpose sur deux plateformes distinctes, ce qui apporte de nombreuses nuances et cas particuliers sur la façon dont les propriétés et les vues se comportent pour chaque plateforme.

Voici un exemple : nous avons découvert que React Native n'ajoute pas automatiquement le rôle d'accessibilité à de nombreux composants, ce qui peut entraîner une mauvaise interprétation des composants par la technologie d'assistance pour la personne utilisant votre application. Cela signifie que l'application pourrait être complètement inutilisable pour certains parcours clients critiques. Avec Axe Linter, vous serez guidé pour ajouter ces rôles, afin de garantir que le composant est accessible à la technologie d'assistance. Une fois que les composants ont les rôles appropriés à être détectés, Axe DevTools Mobile peut approfondir pour s'assurer que d'autres propriétés d'accessibilité sont présentes, précises et significatives pour votre audience avec des handicaps.