Test de lecteur d'écran mobile
Tester des sites Web et des applications natives sur des appareils mobiles est tout aussi important que tester sur un ordinateur de bureau. Peut-être encore plus critique maintenant puisque tant de personnes accèdent au Web via un appareil portable uniquement.
Qu'il s'agisse de créer une expérience pour le navigateur, une application native ou les deux via React Native, savoir comment tester votre application est un élément essentiel du cycle de vie du projet.
Passons en revue comment tester sur les deux principales plates-formes ; iOS et Androïd.
Avant de commencer
Il est important de comprendre les bases de l'utilisation d'un lecteur d'écran mobile avant d'en activer un pour la première fois. Sinon, vous risquez de rester bloqué et de ne pas savoir comment revenir.
iOS et Android proposent tous deux un ensemble de gestes de base similaire en matière de navigation. trouver et activer une commande à l'écran. Il existe deux méthodes de base :
- Explorer : placez un seul doigt n'importe où sur l'écran et faites-le glisser pour découvrir le contenu. Cela amènera le lecteur d'écran à annoncer l'élément qui est actuellement sous votre doigt. Vous êtes libre d'explorer dans n'importe quelle direction.
- Balayer : utilisez un seul doigt et balayez vers la droite, n'importe où sur l'écran. Cela permet au lecteur d'écran de localiser et d'annoncer les éléments de contenu sur l'écran de haut en haut en bas, de gauche à droite. Glisser vers la gauche trouvera les éléments dans l'ordre inverse.
Une fois qu'un élément de contenu est ciblé par le lecteur d'écran, appuyez deux fois n'importe où sur l'écran pour l'activer .
iOS
Chaque appareil iOS (et iPadOS) est livré avec un lecteur d'écran appelé VoiceOver . Si vous testez dans un navigateur mobile, le couplage typique serait avec Safari .
Démarrage
Pour démarrer VoiceOver, accédez à Paramètres → Accessibilité → VoiceOver. Reportez-vous à la section « Avant de commencer » sur les bases du lecteur d'écran mobile.
Afin de gagner du temps lors des tests, le raccourci pour activer et désactiver VoiceOver consiste à appuyer trois fois sur le bouton d'accueil de l'iPhone/iPad . Pour activer cette fonctionnalité, accédez à Paramètres → Général → Accessibilité → Raccourci d'accessibilité.
Gestes courants
Divers gestes sont disponibles lorsque VoiceOver est activé. Le tableau suivant décrit les gestes disponibles, classés selon les exigences d'un à plusieurs doigts.
| Action | Geste |
|---|---|
| Sélectionner/lire l'élément | Tactile/simple pression |
| Activer l'élément actuellement sélectionné | Tapez deux fois |
| Passer à l'élément suivant | Balayez vers la droite |
| Passer à l'élément précédent | Balayez vers la gauche |
| Faites glisser l'élément actuellement sélectionné | Appuyez deux fois + appuyez longuement |
| Interrompre/reprendre la lecture | Tapotement à deux doigts |
| Lire tous les éléments à partir du haut de l'écran | Glisser vers le haut avec deux doigts |
| Lire tous les éléments de la position actuelle | Balayer vers le bas avec deux doigts |
| Sélectionner/désélectionner du texte | Pincement à deux doigts ouvert/fermé |
| Faire défiler vers le haut/vers le bas | Glisser vers le haut/bas avec trois doigts |
| Naviguer vers la page suivante/précédente | Balayage à trois doigts vers la gauche/droite |
| Sélectionnez le premier ou le dernier élément à l'écran | Appuyez à quatre doigts en haut ou en bas de l'écran |
Rotor VoiceOver
Si vous connaissez VoiceOver sur macOS, vous aurez probablement utilisé le Rotor pour naviguer via des éléments spécifiques tels que des en-têtes ou des liens. Le même concept existe pour les appareils mobiles, bien que l'exécution soit un peu différente.
Pour utiliser le rotor :
- Utilisez un geste de torsion de deux doigts sur l'écran. Chaque option sera lue à voix haute lorsque vous vous tordez les doigts.
- Une fois que vous avez localisé l'option souhaitée :
- Relâchez vos doigts pour sélectionner.
- S'il s'agit d'une option, vous pouvez itérer la valeur de (telle que le volume ou le débit de parole), balayez vers le haut ou vers le bas pour augmenter/diminuer la valeur de l'élément sélectionné.
Remarque : Les options disponibles sous le Rotor sont contextuelles ; toutes les options ne seront pas disponibles tout le temps.
Test avec VoiceOver dans un simulateur
Si votre application native s'exécute dans le simulateur Xcode, vous pouvez tester l'interface utilisateur de trois manières pour détecter les problèmes d'accessibilité.
1. Inspecteur de l'accessibilité
L' inspecteur d'accessibilité Xcode est un outil qui ressemble beaucoup à un inspecteur Web que l'on trouve dans un navigateur moderne. Utilisez-le pour inspecter des éléments de l'interface utilisateur de l'application afin de tester des éléments tels qu'une label et un role de composant ou state .
Ouvrez l'inspecteur d'accessibilité en accédant à Xcode → Ouvrir l'outil de développement → Inspecteur d'accessibilité. Dans la fenêtre Inspecteur d'accessibilité, cliquez sur l'icône en forme de croix ( bouton d'inspection de point ) puis survolez l'interface utilisateur à tester.
Vous pouvez collecter des informations utiles à partir de la partie Basique de la fenêtre. Passez en revue les données dans la partie Avancé pour plus de détails techniques, tels que l'état actuel du composant.
2. MacOS VoiceOver
Bien que VoiceOver ne soit pas disponible directement dans le simulateur Xcode, il est possible d'exécuter VoiceOver depuis macOS pour tester votre application.
Pour ce faire, définissez le focus du clavier sur la fenêtre du simulateur, puis activez VoiceOver. À partir de là, vous pourrez utiliser le curseur virtuel pour vous déplacer entre les éléments à l'écran. Pour interagir avec les éléments cliquables dans l'application, utilisez la touche VO + Espace .
3. Chargement de l'application sur un appareil
La dernière option à tester consiste à charger l'application sur votre propre appareil physique. Avec cela, vous devriez pouvoir utiliser VoiceOver de manière native et effectuer d'autres tests, comme l'utilisation du Rotor.
- Branchez votre iPhone ou iPad sur votre ordinateur basé sur macOS.
- Dans Xcode, activez le bouton Exécuter la destination.
- Sélectionnez votre appareil en haut du menu de l'appareil.
Gestes
Vous pouvez pincer-zoomer/glisser dans le simulateur iOS en maintenant la touche Opt enfoncée et en cliquant + en faisant glisser le curseur de votre souris.
Android
La plupart des appareils Android sont livrés avec un lecteur d'écran appelé TalkBack (sinon, vous pouvez l'installer à partir d' Android Accessibility Suite .) Si vous testez dans un navigateur mobile, le couplage typique serait avec Chrome .
Démarrage
Le démarrage de TalkBack peut différer légèrement selon le fabricant du téléphone Android. Pour les téléphones basés sur Google Pixel, accédez à Paramètres → Accessibilité → TalkBack. Reportez-vous à la section « Avant de commencer » sur les bases du lecteur d'écran mobile.
Afin de gagner du temps lors des tests, le raccourci pour activer et désactiver TalkBack consiste à appuyer sur les deux boutons de volume et à les maintenir enfoncés . Pour activer cette fonctionnalité, accédez à Paramètres → Accessibilité → TalkBack → Raccourci TalkBack.
Gestes courants
Divers gestes sont disponibles lorsque TalkBack est activé. Le tableau suivant décrit les gestes disponibles, classés d'un à plusieurs doigts, y compris les gestes de balayage.
| Action | Geste |
|---|---|
| Sélectionner/lire l'élément | Tactile/simple pression |
| Activer l'élément actuellement sélectionné | Tapez deux fois |
| Passer à l'élément suivant | Balayez vers la droite |
| Passer à l'élément précédent | Balayez vers la gauche |
| Faire défiler vers le haut/vers le bas | Glissement vers le haut/bas à deux doigts |
| Passer au premier élément à l'écran | Glisser de haut en bas |
| Passer au dernier élément à l'écran | Faites glisser vers le bas |
| Faites défiler un écran vers le haut | Faites glisser de gauche à droite |
| Faites défiler un écran vers le bas | Glisser droite-gauche |
| Retour à l'écran d'accueil | Faites glisser vers le haut à gauche |
| Activer le bouton de retour/fermer l'application | Faites glisser vers le bas à gauche |
Tester avec TalkBack dans un émulateur
Si votre application native s'exécute dans l'émulateur Android, vous pouvez exécuter le lecteur d'écran TalkBack à des fins de test. Cependant, TalkBack n'est pas installé par défaut.
Installer TalkBack
Vous pouvez installer TalkBack de deux manières :
- Connectez-vous à votre compte Google sur l'émulateur et installez TalkBack depuis Google Play , ou
- Téléchargez le fichier
apkTalkback depuis :google-talkback.en.uptodown.com/android
Une fois que vous avez installé TalkBack, activez-le dans les paramètres d'accessibilité. Lors de l'exécution, utilisez le sélecteur d'application pour vous déplacer entre l'application des paramètres et votre application.
Gestes
Vous pouvez pincer-zoomer/glisser dans l'émulateur Android en maintenant la touche Cmd enfoncée et en cliquant + en faisant glisser le curseur de votre souris.
La découverte de contenu peut être effectuée de deux manières :
- Utilisez le pointeur de la souris pour cliquer et maintenir enfoncé (appui long) et placez le pointeur de la souris sur l'écran. C'est la même chose que d'utiliser votre doigt sur un appareil réel.
- Utilisez la souris pour "faire glisser" le geste à travers le contenu (j'ai trouvé cela plus lourd/difficile/gênant que sur un appareil réel et peut conduire à des résultats inattendus.)
Consultez « Tests avec des lecteurs d'écran » pour obtenir des conseils sur la façon de tester avec des lecteurs d'écran de bureau !