La revue d’écran Talk Back
La revue d’écran, telle que Talk Back sur les appareils Android, est une technologie conçue pour aider les personnes aveugles ou malvoyantes à utiliser des appareils tels les smartphones et les tablettes.
Principe
Le principe de fonctionnement de la revue d’écran repose sur l’interprétation et la vocalisation du contenu affiché à l’écran pour permettre aux utilisateurs de comprendre et d’interagir avec leur appareil. Voici comment cela fonctionne généralement :
- Interception des informations à l’écran : La revue d’écran fonctionne en interceptant les informations visuelles qui s’affichent sur l’écran de l’appareil. Cela inclut du texte, des icônes, des boutons, des images, des notifications, etc.
- Retour vocal : Une fois que les informations visuelles sont capturées, la revue d’écran utilise un moteur de synthèse vocale pour convertir ces informations en vocal.
- Navigation et interaction vocale : Les utilisateurs peuvent naviguer dans les éléments à l’écran en utilisant des gestes tactiles ou des commandes vocales spécifiques. Par exemple, ils peuvent balayer l’écran avec leur doigt pour parcourir le contenu ou utiliser des gestes pour activer des boutons et des liens. Les commandes vocales permettent également d’interagir avec l’appareil en donnant des instructions verbales.
Limites
L’une des principales limitations de la navigation avec une revue d’écran est l’absence de vision globale de l’interface utilisateur. Contrairement à une personne voyante qui peut rapidement balayer l’ensemble d’une page pour avoir une vue d’ensemble, les utilisateurs de revues d’écran doivent souvent naviguer de manière séquentielle d’un élément à l’autre, passant ainsi du particulier au particulier. Cette limitation a plusieurs implications :
Perte de contexte
En naviguant séquentiellement, les utilisateurs de revues d’écran peuvent perdre le contexte global de la page ou de l’application. Ils doivent retenir mentalement où ils se trouvent et comment les éléments s’articulent les uns par rapport aux autres.
Navigation chronophage
La navigation séquentielle peut prendre plus de temps, en particulier sur des pages web ou des applications complexes. Les utilisateurs doivent explorer chaque élément pour trouver ce qu’ils cherchent.
Manque de repères visuels
Les utilisateurs voyants bénéficient de repères visuels pour identifier rapidement les sections, les titres, les images, etc. Les revues d’écran doivent s’appuyer sur la structure de l’information et des balises.
Manipulations de base
| Action | Geste à un doigt |
| Passer à l’élément suivant sur l’écran | Droite |
| Passer à l’élément précédent sur l’écran | Gauche |
| Explorer au toucher : cette option énonce le texte sous votre doigt | Faire glisser un doigt sur l’écran |
| Sélectionner un élément | Appuyer |
| Passer à la commande de lecture suivante | Vers le haut, puis vers le bas |
| Passer à la commande de lecture précédente | Vers le bas, puis vers le haut |
| Modifier la valeur de la commande de lecture sélectionnée | Vers le haut ou vers le bas |
| Accéder à l’élément suivant Utilise le paramètre de contrôle de la lecture | Bas |
| Accéder à l’élément précédent Utilise le paramètre de contrôle de la lecture | Haut |
| Activer la recherche depuis l’écran | Vers la gauche, puis le bas |
| Paramètres d’agrandissement | Appuyer trois fois |
| Faire défiler l’écran vers le haut ou le bas | Balayer l’écran avec deux doigts vers le haut ou vers le bas |
| Faire défiler vers la gauche ou la droite | Balayer l’écran avec deux doigts vers la gauche ou vers la droite |
| Activer | Appuyer deux fois |
| Appuyer de manière prolongée sur l’élément sélectionné | Appuyer deux fois et maintenir |
| Déplacer le curseur vers le haut Comme pour le volume | Vers le haut ou la droite, puis la gauche |
| Déplacer le curseur vers le bas Comme pour le volume | Vers le bas ou la gauche, puis la droite |
L’interface et l’accessibilité
Une interface graphique d’une application contient des informations textuelles et des composants graphiques. Il est important de déterminer les parcours de navigations importants pour les utilisateurs et s’assurer que la chaîne d’action est accessible. Si un maillon de la chaine n’est pas accessible avec Talk Back, c’est tout le parcours de navigation qui devient inaccessible.
Composants graphiques
Un parcours de navigation est constitué de composants graphiques. Pour qu’un composant graphique soit accessible il doit avoir les propriétés suivantes :
Focus
Tous les composants graphiques interactifs ou porteurs d’informations doivent recevoir le focus. Durant la navigation d’un élément a un autre, la synthèse vocale annonce les informations de l’élément qui a le focus, le nom de l’élément, sa nature et son état ex : « Menu, bouton, étendu/réduit ».
L’ordre dans lequel le focus se déplace d’un élément à un autre doit être cohérent, et suivre l’agencement visuel des éléments (de haut en bas et de gauche à droite).
Label
Le label parfois appelé étiquette est le nom d’un composant graphique, il renseigne sur la fonction de ce dernier. Sa présence est obligatoire. Aussi, le label doit être explicite, c’est-à-dire qu’il ne doit pas engendrer d’ambiguïté quant à la fonction du composant graphique.
Rôle
Le rôle est donné par la revue d’écran, il renseigne la revue d’écran sur la nature ou le type du composant graphique. Sans les rôles, un utilisateur ne pourrait pas naviguer en passant d’un bouton à un autre ou d’un titre à un autre. Le rôle doit également être en adéquation avec le type du composant. Par exemple, il arrive souvent qu’on attribue à un lien le rôle d’un bouton, alors que le lien renvoie vers une autre page.
Interaction
L’interaction est la manière dont un composant graphique réagit aux touches du clavier. L’interaction est étroitement liée au rôle, car chaque type de composant graphique est conçu pour être activé par certaines touches ou combinaisons de touches du clavier. Voici quelques exemples :
- Valider un bouton : Entrée ou barre d’espace
- Cocher une case à cocher : Barre d’espace
- Sélectionner un bouton radio : Flèches gauche et droite
- Ouvrir une liste déroulante : Alt + Flèche bas
- Fermer une liste déroulante : Alt + Flèche haut ou Échap
État
Le changement d’état d’un composant graphique doit être clairement indiqué aux utilisateurs pour qu’ils puissent savoir, par exemple, si une liste déroulante est ouverte ou fermée, si un menu déroulant est étendu ou réduit, ou encore si une case est cochée ou non. Cela contribue à améliorer l’accessibilité et la compréhension de l’interface utilisateur, en permettant aux utilisateurs de comprendre les changements de contexte sans ambiguïté.
Prenons l’exemple d’un bouton de menu sur un site internet. Lorsque le curseur d’une revue d’écran se positionne sur ce composant, la synthèse vocale énonce d’abord le nom du bouton, « Menu », suivi du mot « bouton », puis ajoute une troisième information, « réduit ». Ainsi, l’énoncé est le suivant : « Menu, bouton, réduit ». Le premier mot correspond au label, le deuxième au rôle, et le troisième indique l’état du bouton de menu.
Le label nous renseigne sur la fonction du composant graphique, tandis que le rôle du composant est identifié comme un bouton, ce qui nous indique comment interagir avec ce bouton de menu (en utilisant la touche Entrée, par exemple).
L’état « réduit » du bouton de menu nous permet de savoir si le menu est ouvert ou fermé. À ce stade, tout semble conforme. Il reste simplement à vérifier si l’interaction est en accord avec le rôle. Si le bouton s’ouvre et se ferme en utilisant la touche Entrée ou une double tape sur un écran tactile, et si l’état du bouton change en conséquence, alors on peut conclure que ce composant graphique satisfait les quatre critères d’accessibilité.
Structure du contenu
La structure des écrans d’application est essentielle en matière d’accessibilité, car elle permet aux utilisateurs ayant des besoins spécifiques, tels que les utilisateurs de lecteurs d’écran comme Talk Back sur Android, de naviguer et d’interagir de manière efficace avec l’application.
- Navigation cohérente : Une structure bien définie permet aux utilisateurs de naviguer plus facilement dans l’application. Par exemple, dans une application de shopping, un menu de navigation clairement identifié en haut de l’écran permettra aux utilisateurs de basculer entre les catégories de produits sans confusion.
- Ordre logique : Les écrans d’application doivent suivre un ordre logique, ce qui signifie que les éléments essentiels sont placés en haut de la page et que les informations complémentaires se trouvent plus bas. Dans une application de nouvelles, les titres et les résumés d’articles doivent être affichés en premier, suivis du contenu détaillé.
- Utilisation de balises et d’éléments structurés : Les développeurs d’applications doivent utiliser des balises HTML appropriées ou des éléments d’interface utilisateur pour structurer correctement le contenu. Par exemple, l’utilisation de balises de titre `<h1>`, `<h2>`, etc., permet à Talk Back de déterminer la hiérarchie de l’information.
- Groupement logique : Les éléments similaires doivent être regroupés logiquement. Dans une application de messagerie par exemple, les messages d’un même fil de discussion doivent être regroupés ensemble pour une navigation aisée.
