Écouter le Web, troisième partie : travailler avec des lecteurs d'écran

• Partie 1 : penser l'accessibilité
• Partie 2 : tout est sémantique
• Partie 3 : travailler avec des lecteurs d'écran

---

Maintenant que nous avons appris l'importance de penser à l'accessibilité et d'utiliser des éléments natifs lorsqu'il s'agit de concevoir des sites utilisables, tournons notre attention vers l'apprentissage des lecteurs d'écran.

Lorsque j'ai commencé à travailler avec des lecteurs d'écran, c'est la pure curiosité qui m'a poussé à plonger sans crainte. Je savais que c'était quelque chose que je voulais apprendre, alors j'ai retroussé mes manches et je me suis mis au travail. Dans cet article, je vais partager avec vous les bases des lecteurs d'écran : leur utilisation et les commandes à connaître. J'ai inclus une démo pour montrer quelques problèmes courants avec des solutions au fur et à mesure que vous démarrez.

Gardez à l'esprit que tout voyage impliquant un apprentissage est continu. Laissez votre état d'esprit accessible et inclusif former une base solide sur laquelle vous pouvez ajouter de nouvelles connaissances.

Comment les gens utilisent les lecteurs d'écran

J'ai suivi un cours de communication au lycée et, à chaque cours, nous étions encouragés à lire le journal pour rester au courant de l'actualité. On nous a enseigné une technique pratique lors de la lecture du journal, qui consistait à parcourir rapidement chaque titre des principales histoires. Si quelque chose ressortait comme intéressant, nous pourrions faire une note mentale et revenir lire l'histoire après avoir scanné le reste des titres de journaux.

De la même manière, les personnes qui utilisent des lecteurs d'écran peuvent parcourir et lire les titres d'une page Web (je vous montrerai également comment vous pouvez le faire plus tard dans l'article.) C'est un excellent moyen de gagner rapidement une compréhension du contenu disponible sur la page et si c'est quelque chose d'intéressant et qui vaut la peine d'y revenir.

Pour cette raison, il est essentiel de s'assurer que les éléments de titre sont présents et structurés dans un ordre logique. Commencez par un <h1> qui décrirait l'objectif général de la page, le "titre" principal. Cela serait suivi par des sous-sections de contenu utilisant des éléments <h2> , et peut-être une sous-section de cette section, utilisant un <h3> , et ainsi de suite.

Pointe! N'utilisez pas un élément de titre uniquement pour l'effet stylistique. Si vous avez besoin qu'un titre apparaisse d'une manière spécifique, ajoutez un attribut de classe et utilisez CSS pour lui donner l'apparence dont vous avez besoin.

N'oubliez pas non plus que l'apparence visuelle des titres est importante, car elle aide également les personnes qui ont des difficultés à lire ou qui ont d'autres problèmes cognitifs à comprendre la structure de la page.

Les personnes utilisant des lecteurs d'écran peuvent également parcourir rapidement la page à la recherche de contenu en utilisant des liens. Les lecteurs d'écran proposent souvent un moyen de naviguer dans le contenu du site en annonçant chaque lien sur la page, sous forme de liste. Les utilisateurs peuvent décider s'ils souhaitent ou non suivre le lien, en fonction du texte du lien. Pour cette raison, il est crucial que le texte du lien soit à la fois unique et descriptif. Cela peut devenir une expérience utilisateur frustrante lorsque tous les liens d'une page sont annoncés comme "En savoir plus" et qu'aucun contexte supplémentaire n'est donné quant à l'endroit où le lien mène.

Vous pouvez aussi simplement utiliser la touche Tab pour vous déplacer et découvrir du contenu interactif. Il s'agit d'une méthode courante de navigation et de compréhension de la page, mais elle n'est pas aussi rapide que la navigation par type d'élément et n'accède qu'aux éléments qui peuvent être mis au point.

Et qu'en est-il des éléments non focalisables, me demanderez-vous ? Ne vous inquiétez pas, je vais vous montrer comment accéder à des éléments tels que du texte brut et des images dans la section suivante !

Examinons plus en détail quelques commandes de lecteur d'écran.

Commandes de lecteur d'écran que les développeurs doivent connaître

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

Pointe! Associez VoiceOver à Safari et NVDA à Firefox. Ce sont les navigateurs les plus couramment utilisés avec ces lecteurs d'écran.

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.

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 ".

Utilisez le contrôle du volume de votre ordinateur pour régler le volume de la voix selon vos besoins.

Touches de modification

Les touches de modification sont des touches de raccourci spécifiques au lecteur d'écran. Ils sont utilisés avec d'autres touches du clavier pour exécuter diverses instructions au lecteur d'écran.

La touche de modification pour VO est Ctrl + Opt . Pour NVDA, par défaut, la touche de modification est Insert . Cela peut être modifié dans la configuration pour être Caps lock en majuscule si vous êtes sur un ordinateur portable.

Par exemple, pour commencer à lire une page Web en utilisant NVDA, vous pouvez appuyer sur Insert + Flèche Down et NVDA commencera à lire à partir de la position actuelle.

Tabulation autour

Lorsque VO ou NVDA sont activés, utilisez la touche Tab pour avancer dans les éléments interactifs de la page ou Shift + 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 des é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".

Curseur virtuel du lecteur d'écran

VO et NVDA ont leurs propres curseurs intégrés que les gens peuvent utiliser pour se déplacer dans la page et lire d'autres contenus, pas seulement des éléments focalisables.

Pour utiliser le curseur VO, maintenez la Ctrl + Opt enfoncée, puis utilisez les touches fléchées Left ou Right pour vous déplacer et faire en sorte que VO annonce tous les types de contenu sur la page. Le curseur de NVDA est déplacé en utilisant les touches fléchées Up et Down . Cela lit une ligne de contenu à la fois.

La lecture de la page de cette manière révèle plus de contenu de page, y compris du texte brut, du texte alternatif d'image et des en-têtes de page. C'est un excellent moyen de tester et d'entendre le son du contenu du texte, et si le texte alternatif descriptif de l'image a un sens avec ce qui est affiché dans l'image.

Navigation avancée

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 Left et Right 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 Up et Down pour parcourir les éléments répertoriés. Utilisez la 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 Insert + F7 .

Lorsque la liste des éléments est ouverte, utilisez les touches fléchées Left et Right 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 Up et Down 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 saisie de formulaire était annoncée comme telle, mais à quoi servaient-elles ? Quel type de données était attendu ?
• Le bouton 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 onclick JavaScript 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 onclick JavaScript 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 input 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 à côté du rôle de l'élément.
• 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 onclick JavaScript personnalisé et des styles CSS pour le faire apparaître comme un bouton.
  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 bouton sera focusable 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 écouté à nouveau 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 de soumission du formulaire est annoncé comme tel, recevant le focus et prenant pleinement en charge les interactions clavier disponibles pour un élément de button (appuis sur la touche Espace 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 parcourir chaque lien pour acquérir cette compréhension.
• Le titre 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 parcourir 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 juste un clavier vous en dira beaucoup sur l'accessibilité de votre code 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.

Comme mentionné précédemment, 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.

Commencez par l'accessibilité à l'esprit. Testez avec différentes combinaisons lecteur d'écran + navigateur. Testez tôt et testez souvent. Assurez-vous de ne pas ajouter l'accessibilité en tant que fonctionnalité après le lancement car cela fonctionne rarement à la fin, et les gens le remarqueront.

Avec une grande puissance…

Je vous ai donné assez pour commencer avec la façon dont les lecteurs d'écran sont utilisés et comment vous pouvez tester vos pages avec des lecteurs d'écran, mais je m'en voudrais de ne pas vous laisser avec peut-être la chose la plus importante à savoir sur le développement de l'accessibilité : les lecteurs d'écran ne sont qu'un début.

Même dans notre propre équipe, les lecteurs d'écran sont là où certains d'entre nous ont commencé leur voyage vers l'accessibilité. Les développeurs sont fascinés par la technologie et c'est la première chose dans laquelle nous entrons. Pourtant, apprendre à les utiliser et à les tester n'est vraiment qu'un début. C'est le premier point d'un voyage beaucoup plus long qui comprend la prise en compte du large éventail de capacités, de situations et de toutes sortes de cas d'utilisation des personnes.

J'espère que cette série sur "L'écoute du Web" vous a incité à apporter des changements positifs dans votre flux de travail quotidien. Je vous exhorte, collègue développeur Web, à franchir le pas et à plonger plus profondément dans l'accessibilité Web. Apprenez tout ce que vous pouvez et partagez ce que vous apprenez. Obtenez les commentaires et le soutien de la communauté Web élargie. Faites des efforts supplémentaires, même s'ils ne sont pas budgétés. Finalement, ce ne sera pas du tout un effort supplémentaire, mais simplement une partie de votre flux de travail quotidien. Une personne peut faire la différence.

Commencez par l'accessibilité à l'esprit, écoutez le Web et créez des choses géniales pour tout le monde.