Mobile Screen Reader Testing

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 :

  1. 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.
  2. 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.

Capture d'écran des paramètres VoiceOver dans iOS. Inclut le contrôle principal du commutateur VoiceOver, le curseur de vitesse de parole et d'autres boutons de paramètres.

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.

Gestes VoiceOver
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 :

  1. Utilisez un geste de torsion de deux doigts sur l'écran. Chaque option sera lue à voix haute lorsque vous vous tordez les doigts.
  2. 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.

    Capture d'écran de l'inspecteur d'accessibilité Xcode. Le bouton d'inspection de point est mis en surbrillance.

    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.

    1. Branchez votre iPhone ou iPad sur votre ordinateur basé sur macOS.
    2. Dans Xcode, activez le bouton Exécuter la destination.
    3. 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.

    Capture d'écran des paramètres TalkBack sous Android. Comprend une illustration d'un téléphone avec une bulle de dialogue et la commande principale du commutateur TalkBack.

    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.

    Gestes TalkBack
    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 :

    1. Connectez-vous à votre compte Google sur l'émulateur et installez TalkBack depuis Google Play , ou
    2. Téléchargez le fichier apk Talkback 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 :

    1. 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.
    2. 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 !

    Ressources

    Retour au blog