Test avec des lecteurs d'écran

5 août 2018

Un lecteur d'écran est un logiciel qui annonce le contenu à l'écran. C'est l'une des nombreuses façons dont les personnes aveugles interagissent avec le Web et la technologie en général.

Alors, comment les gens utilisent-ils le lecteur d'écran pour lire divers éléments de contenu ? Avec le clavier .

Utilisation du clavier

Lorsque quelqu'un utilise la touche Tab pour naviguer dans une page, le focus est déplacé d'un élément à l'autre, ce qui déplace le curseur du clavier vers chaque élément pouvant être sélectionné. L'utilisation de Maj + Tab déplace le curseur vers l'arrière sur la page.

Vous lisez un long morceau de contenu sans éléments focalisables ? Utilisez la touche Espace pour déplacer vers le bas "une page" de contenu (la hauteur de la fenêtre d'affichage actuelle.) Appuyez sur Maj + Espace pour remonter la page.

Alternativement, quelqu'un peut utiliser ce qu'on appelle le curseur virtuel qui est intégré à chaque lecteur d'écran disponible. La méthode d'utilisation du curseur virtuel dépend du lecteur d'écran, car chacun possède son propre ensemble de combinaisons de clavier et de frappes pour se déplacer sur l'écran.

L'élément de contenu qui est annoncé est l'élément actuellement ciblé

Une chose que je n'avais pas réalisée lorsque j'ai découvert le développement de l'accessibilité, c'est que l'élément de contenu qui est annoncé est l'élément actuellement ciblé.

Par exemple, si quelqu'un devait charger un site dans son navigateur et que le premier élément pouvant être sélectionné sur la page était un lien avec le logo du site, lorsque la touche Tab est activée, le focus du clavier se déplacerait vers le lien et le lecteur d'écran annoncer la présence du lien via son rôle et son nom accessible ; son sens sémantique.

Examinons quelques commandes de lecteur d'écran pour nous aider à tester nos interfaces utilisateur.

Les deux plates-formes de lecteur d'écran sur lesquelles nous allons nous concentrer incluent :

Si vous utilisez un ordinateur de bureau, un ordinateur portable ou un appareil mobile Apple, vous disposez d'un lecteur d'écran appelé VoiceOver à portée de main.
Si vous utilisez un PC Windows , vous pouvez installer un lecteur d'écran open source gratuit appelé NVDA .

Passons en revue les commandes courantes des lecteurs d'écran et les méthodes de navigation afin de tester nos applications et nos sites Web.

Démarrage

Pour démarrer VoiceOver (VO), appuyez sur les touches Cmd + F5 . VO commencera à lire la page ou l'application que vous consultez actuellement. Vous pouvez à nouveau Cmd + F5 pour quitter VO.

Alternativement, si vous êtes sur un Macbook avec une barre tactile, vous devrez appuyer trois fois sur Cmd + Pwr pour démarrer VO.

Démarrez NVDA en appuyant sur Ctrl + Alt + N . Vous pouvez également utiliser la boîte de dialogue Exécuter de Windows et saisir "nvda". Une méthode pour quitter NVDA est d'utiliser à nouveau la boîte de dialogue Exécuter et d'entrer "nvda -q".

Vous pouvez également utiliser l'icône du bureau pour démarrer, puis utiliser le menu de la barre des tâches pour désactiver NVDA.

Lecteur d'écran	Commencez
Voix off	`Commande` + `F5`
NVDA	`Ctrl` + `Alt` + `N`

Suspendre les annonces

L'une des commandes clavier les plus importantes à connaître lors des tests est probablement de savoir comment faire en sorte que le lecteur d'écran arrête temporairement de faire des annonces. Cela semble être la seule vérité universelle parmi les fournisseurs de lecteurs d'écran sur différents systèmes d'exploitation.

Le doigt d'Homer Simpson au-dessus de la touche Ctrl.

Pour mettre en pause VO ou NVDA (d'autres lecteurs d'écran également), appuyez simplement sur la touche Ctrl .

Lorsque vous recommencerez à naviguer, la voix du lecteur d'écran reviendra à la vie, annonçant joyeusement le contenu avec lequel vous interagissez actuellement.

Tabulation autour

Lorsque VO ou NVDA sont activés, utilisez la touche Tab pour avancer dans les éléments interactifs de la page ou Maj + Tab pour reculer.

Selon les paramètres de votre navigateur, par défaut, les éléments de la page sur lesquels vous pouvez tabuler sont du contenu de page focalisable ; éléments tels que des liens, des boutons ou des contrôles de formulaire. Se déplacer de cette manière est considéré comme utilisant le "curseur du navigateur". Le curseur du navigateur déplace le focus d'un élément à l'autre.

Bien que cela soit assez pratique pour les utilisateurs de clavier uniquement, il existe un autre curseur qui peut se déplacer vers des éléments non focalisables et décrit le contenu de la page avec plus de détails, le "curseur virtuel du lecteur d'écran".

Le curseur virtuel est une fonctionnalité intégrée à chaque lecteur d'écran, desktop et mobile, qui permet à l'utilisateur de découvrir et de consommer tout type de contenu. Contrairement au curseur du navigateur qui ne s'arrête que le long des éléments interactifs de la page, le curseur virtuel inclut ceux-ci et bien plus encore. Texte brut, images, en-têtes et tout ce qui est visible ( ou parfois masqué ) à l'écran.

Le curseur virtuel est la façon dont un utilisateur de lecteur d'écran consomme le contenu que vous créez.

En termes de test, le curseur virtuel est un excellent moyen de tester et d'entendre le son de votre contenu, ou si le texte alt descriptif de l'image a un sens avec ce qui est affiché dans l'image.

Pour utiliser le curseur virtuel VO, maintenez la touche Ctrl + Opt enfoncée, puis utilisez les touches fléchées Gauche ou Droite pour vous déplacer et faire annoncer par VO tous les types de contenu de la page.

Le curseur virtuel de NVDA est déplacé en utilisant les touches fléchées Haut et Bas . Cela lit une ligne de contenu à la fois.

Lecteur d'écran	Curseur virtuel
Voix off	`Ctrl` + `Opt` + Flèche `gauche` ou `droite`
NVDA	Flèche vers le `haut` ou `vers le bas`

VO et NVDA offrent tous deux un moyen de naviguer dans le contenu de la page en regroupant des éléments similaires. Chaque lecteur d'écran est capable d'afficher une liste ou un menu d'éléments similaires, séparés par catégories, afin de se déplacer rapidement dans la page en cours et de découvrir facilement le contenu disponible.

Rotor VO

Le VO Rotor est essentiellement un menu de différents types d'éléments sur la page, répartis en catégories. Pour ouvrir le Rotor, maintenez Ctrl + Opt puis appuyez sur la touche U. Une nouvelle fenêtre VO apparaîtra au-dessus de la page avec une liste d'éléments.

Lorsque le rotor est ouvert et disponible pour la navigation, utilisez les touches fléchées gauche et droite pour vous déplacer entre les catégories d'éléments telles que les en-têtes, les liens, les points de repère ou les contrôles de formulaire. Utilisez les touches fléchées Haut et Bas pour parcourir les éléments répertoriés. Utilisez la touche Esc pour sortir du Rotor.

Liste des éléments NVDA

NVDA dispose également d'un menu d'éléments sur la page appelé la liste des éléments. Pour ouvrir la liste, utilisez les touches Inser + F7 .

Lorsque la liste des éléments est ouverte, utilisez les touches fléchées gauche et droite pour parcourir les types d'éléments. Appuyez sur la touche Tab pour descendre dans la liste. Une fois dans la liste, utilisez les touches Haut et Bas pour parcourir les éléments de la liste.

Il existe de nombreux autres raccourcis et raccourcis clavier disponibles pour ces lecteurs d'écran, mais ce ne sont que quelques-uns faciles à apprendre pour vous aider à démarrer.

Ensuite, nous allons jeter un œil à un site de démonstration et utiliser VoiceOver pour naviguer dans les éléments de la page, en recherchant les problèmes d'accessibilité potentiels.

Démo !

Regardons un exemple avant et après d'un site de démonstration. Il est important de se rappeler : lorsque vous enquêtez sur des problèmes, vérifiez toujours d'abord si vous avez utilisé les bons éléments tels qu'ils étaient censés être utilisés. Souvent, il n'est pas nécessaire de créer une solution complexe pour résoudre un problème lorsqu'une solution plus structurée sémantiquement fera l'affaire.

Dans les deux sites de démonstration liés ci-dessous, vous remarquerez que les pages d'exemple se ressemblent, mais le code en dessous est assez différent. Si vous deviez utiliser votre souris pour naviguer et soumettre le formulaire, ils fonctionnent parfaitement bien de la même manière. Cependant, que se passe-t-il lorsqu'une personne utilisant un lecteur d'écran ou le clavier seul navigue sur la page et essaie de remplir le formulaire ?

Écoutez la vidéo suivante pendant que j'utilise VoiceOver pour naviguer dans les éléments de la page. Que remarquez-vous ?

( Essayez-le vous-même! )

Il semble que le lecteur d'écran se soit bloqué sur certaines choses :

Lorsque l'image du lien du logo a reçu le focus, cela ne ressemblait pas à des informations descriptives. Qu'est-ce que c'était censé représenter ?
Avez-vous remarqué que les liens de navigation ont été entièrement ignorés ? Que s'est-il passé là-bas?
Chaque input de formulaire était annoncée comme telle, mais à quoi servaient-elles ? Quel type de données était attendu ?
Le button d'envoi du formulaire semble également avoir été ignoré ? Comment quelqu'un pourrait-il soumettre ce formulaire en utilisant simplement un clavier ?

Abordons ces problèmes et voyons ce qui n'allait pas.

Lien Logo

Problème : lorsque le lien du logo recevait le focus, le texte de l'attribut alt de l'image intégrée était annoncé. Dans ce cas, puisqu'il n'y avait pas d'attribut alt présent, le nom du fichier image a été annoncé.

Solution : cela peut facilement être résolu en ajoutant une valeur de texte de alt d'image appropriée. Dans ce cas, il doit correspondre au texte de l'image elle-même.
Liens de navigation

Problème : Lorsque nous inspectons le balisage des liens de navigation, nous constatons qu'il existe un événement JavaScript onclick() personnalisé et aucun attribut href . Les liens sans l'attribut href ne recevront pas le focus du clavier, c'est pourquoi ils ont été ignorés.

Solution : Nous pouvons résoudre ce problème assez facilement en ajoutant un attribut href pour chaque lien, en ajoutant l'URL de la page appropriée comme valeur et en supprimant l'événement JavaScript onclick() personnalisé, car cela n'est plus nécessaire.
Entrées de formulaire

Problème : Les éléments input du formulaire ne donnaient aucun contexte pour leur objectif ou les données attendues. Cela est dû au fait que les entrées n'ont pas d' label associée pour aider à expliquer l'objectif du contrôle.

Solution : nous devons ajouter un élément label et définir son attribut for pour qu'il corresponde à la valeur de l'attribut id de l' input . Désormais, lorsque l'élément recevra le focus, son label sera annoncée.
Bouton de soumission

Problème : le button d'envoi a été ignoré car, eh bien, ce n'est pas du tout un button . L'élément est en fait une span avec un événement JavaScript onclick() personnalisé et des styles CSS pour le faire apparaître comme un button .

Solution : Nous pouvons facilement rendre cet élément accessible au clavier en transformant l' span en un élément de button . Avec ce changement, le button sera focalisable et annoncera son rôle de "bouton", ce qui indique que la touche Espace peut être utilisée pour soumettre le formulaire.

Après avoir résolu ces problèmes, écoutons à nouveau la page et voyons à quoi cela ressemble.

( Essayez-le vous-même! )

Après avoir réécouté la page, nous avons une idée beaucoup plus claire du contenu :

L'image du logo principal a un attribut alt qui annonce le texte intégré dans l'image.
Chacun des principaux liens de navigation peut recevoir le focus et est annoncé comme un élément de lien.
Chaque input de formulaire est annoncée avec son label , révélant le type de contenu attendu.
Le button d'envoi du formulaire est annoncé comme tel, recevant le focus et prenant pleinement en charge les interactions clavier disponibles pour un élément de bouton (appui sur la touche Space ou Entrée .)

Quelques ajustements supplémentaires ont également été apportés pour ajouter encore plus de sens sémantique aux éléments de la page :

Les éléments header , nav et HTML main ont été ajoutés en tant que wrappers pour leur contenu respectif. Ceux-ci créent des "points de repère" dans la page. Quelqu'un utilisant un lecteur d'écran pourrait désormais avoir la possibilité de naviguer par points de repère, ainsi que par en-têtes et liens, etc., lors de l'utilisation du VO Rotor ou d'autres touches de raccourci.
Un élément de liste ul a été utilisé pour donner un contexte et une structure supplémentaires à la zone de navigation. Cela aide à donner un avis sur le nombre de liens présents lors de l'entrée dans la liste, par opposition à quelqu'un qui doit Tab sur chaque lien pour acquérir cette compréhension.
Le title principal de la page est maintenant entouré d'un élément h1 , permettant la navigation dans les titres et de donner un avis sur l'objectif général de la page. Un autre attribut facultatif ajouté à cet élément était tabindex . Donner à cet attribut la valeur 0 ajoute l'élément à l'ordre de tabulation naturel du navigateur, ce qui signifie que cet élément recevra le focus et sera annoncé par le lecteur d'écran.

Tester avec un lecteur d'écran (et naviguer dans vos pages en utilisant uniquement un clavier) en suivant les curseurs du navigateur ou du lecteur d'écran et en essayant d'effectuer des tâches avec un simple clavier vous en dira beaucoup sur l'accessibilité de votre interface utilisateur et si cela aura du sens pour les personnes utilisant des technologies d'assistance.

Si quelque chose ne sonne pas bien ou est inaccessible, il y a des problèmes qui doivent être résolus avant l'expédition vers un environnement de production.

Il convient de noter que la compatibilité des lecteurs d'écran n'est pas synonyme d'accessibilité totale (il existe de nombreuses autres considérations pour d'autres types d'utilisateurs), mais la création d'un code sémantiquement structuré entièrement accessible à un clavier contribue grandement à aider les voyants et les non-voyants. utilisateurs de clavier voyants.

Voici les combinaisons navigateur + lecteur d'écran les plus courantes. Ce sont les plus couramment utilisés car ils offrent le meilleur support en ce qui concerne les fonctionnalités et la transmission d'informations via HTML natif et ARIA.

Système opérateur	Navigateur	Lecteur d'écran
les fenêtres	Internet Explorer	MÂCHOIRES
les fenêtres	Firefox	NVDA
les fenêtres	Firefox	MÂCHOIRES
macOS	Safari	Voix off
iOS	Safari	Voix off
Android	Chrome	Répondre

Pour plus de détails, consultez l' enquête auprès des utilisateurs de lecteurs d'écran .

Consultez " Test de lecteur d'écran mobile " pour obtenir des conseils sur la façon de tester avec les lecteurs d'écran d'appareils mobiles !

Ressources:

Retour au blog

Votre panier est vide

Votre panier

Total estimé

Test avec des lecteurs d'écran