feat: add article on a guide for NVDA screen reader

Rémi Doolaeghe 2024-04-23 23:04:52 +02:00
parent 11f7a7e20a
commit c819dc8444
5 changed files with 119 additions and 0 deletions

View File

@ -0,0 +1,119 @@
---
title: "Guide de survie en milieu accessible : débuter avec un lecteur d'écran sur une page web"
description : Quelques configurations et commandes utiles à connaître pour quiconque souhaite se familiariser avec un lecteur d'écran
date: 2024-04-23
tags:
- accessibilité
authors:
- Rémi Doolaeghe
draft: false
layout: article.njk
---
Quand on débute en accessibilité, on est rapidement confronté au besoin de pouvoir se plonger en condition réelle. Se mettre à la place de la personne qui a besoin dun service accessible reste un bon moyen de mettre en place les bonnes conditions dutilisabilité.
Parmi le panel doutils à connaître, les lecteurs décran sont un incontournable dans le domaine. Mais voilà, leur prise en main nest pas des plus évidentes, et peut même parfois rebuter une personne motivée.
Un lecteur décran est un outil capable de restituer le contenu dune page web (ou toute application dailleurs) via une voix synthétique, en sappuyant sur la structure de la page pour permettre à une personne en situation de handicap visuel de pouvoir comprendre comment linformation est organisée, et dinteragir avec la page.
Oui mais voilà : au premier abord, un lecteur décran semble balancer un flot ininterrompu de paroles de façon incontrôlable, et pourrait en rebuter plus dun. Je suis passé par cette phase où le lecteur décran était une sorte de monstre métamorphe difficile à dompter. Et pourtant, il suffit de pas grand chose pour commencer à comprendre comment sen servir basiquement, et faire déjà de belles avancées.
Les quelques conseils qui vont suivre ne prennent que peu de temps à mettre en place, mais devraient déjà changer largement la façon dont vous utilisez le lecteur décran. Ce guide est loin dêtre exhaustif, mais vous aurez les bases nécessaires pour son utilisation dans la vie de tous les jours en temps que producteur de service numérique.
Cet article se focalise sur NVDA qui est mon outil du quotidien. Il fait généralement partie des lecteurs recommandés, mais nest pas le seul. Je vais sauter la phase dinstallation qui ne devrait pas poser trop de problèmes, et me focaliser sur son utilisation. Je vais également essentiellement me concentrer sur lutilisation de NVDA dans le cadre dune page web, bien que loutil soit capable de bien plus que ça.
Vouloir tester une page web avec NVDA est une bonne chose. Mais lorsquon na pas lhabitude de sen servir, la tâche peut se révéler ardue. Voici donc quelques conseils pour vous aider à rendre loutil plus facile dutilisation avant même de se lancer dans le grand bain.
## Activer la mise en surbrillance du focus
Quiconque a déjà lancé un lecteur décran sans y être habitué.e peut se retrouver rapidement perdu.e sans savoir exactement où le lecteur décran en est dans la page. Lorsquon na pas de handicap visuel, autant profiter des capacités supplémentaires de loutil pour permettre de mieux sy retrouver.
Il est possible de configurer NVDA pour quil mette en exergue (via un encadrement coloré) différents types de focus. Ces options se trouvent dans les préférences de NVDA. Pour y accéder, lancez NVDA. Par défaut, il va se retrouver minimisé dans les applications masquées sur Windows (sur Mac, je ne saurais pas dire) :
![Applications en tâche de fond](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-1.png)
Applications en tâche de fond
Cliquez sur licône NVDA, puis sur le menu **Préférences**, puis sur **Paramètres…**
Dans la fenêtre qui souvre, allez ensuite dans la section **Vision**, comme suit :
![Fenêtre de configuration de NVDA pour l'activation des options de focus](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-2.png)
Fenêtre de configuration de NVDA pour lactivation des options de focus
Je recommande de cocher ces options, qui ont les effets suivants :
- **Mettre en évidence le focus système** : NVDA ajoute une bordure en pointillé bleu autour de lélément qui a actuellement le focus système. Dans le cadre de la navigation web, le focus système est le focus qui est généralement posé sur les éléments nativement focusable de la page (boutons, liens, éléments de formulaire…).
- **Mettre en évidence lobjet navigateur** : NVDA ajoute une bordure rose autour de lélément qui a actuellement le focus NVDA. Le focus NVDA se pose sur lélément que NVDA est actuellement en train de vocaliser, ou celui sur lequel il sest arrêté. Tout élément peut recevoir ce focus, et non uniquement les éléments focusables comme pour le focus système. La façon de déplacer le focus NVDA sera décrite plus tard dans larticle.
- **Mettre en évidence le curseur du mode navigation** : NVDA ajoute une bordure jaune autour du première caractère du bloc ou partie de bloc quil est en train de vocaliser. Ce curseur peut être utile lorsque NVDA est en train de vocaliser un long paragraphe. Par défaut, NVDA ne lit pas tout le paragraphe dun coup, mais va le découper en morceaux. Ce curseur indique le début du morceau quil est en train de vocaliser ou qui a le focus NVDA.
Avec tous ces focus actif, outre le beau sapin de Noël que ça produit, vous avez maintenant une meilleure compréhension de lendroit où se trouve le focus de NVDA.
## Journal de lecture
Le journal de lecture est une fenêtre complémentaire qui retranscrit tout ce que la restitution vocalise. Cet outil permet notamment de mieux comprendre ce qui est dit, et de garder une trace de ce qui sest passé. Cest notamment pratique pour une personne pas encore habituée à la façon dont les éléments sont restitués à loral par le lecteur décran.
A noter que lexemple ci-dessous est un peu brouillon à cause de linterférence avec loutil de capture décran.
![Démonstration de la visionneuse de parole sur une page de site e-commerce pour un casque audio](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-3.png)
Démonstration de la visionneuse de parole sur une page de site e-commerce pour un casque audio
Pour activer le journal de lecture, cliquez sur NVDA dans les applications masquées (comme pour louverture des paramètres du paragraphe sur le focus), puis **Outils**, puis **Visionneuse de parole.**
## Prendre le contrôle de la vocalisation
Maintenant que vous êtes doté.e du bagage utile, il est temps de ne plus subir le lecteur décran.
Par défaut, le lecteur décran commencera à vocaliser dès que le contexte change. Par exemple lorsque vous passez dun onglet à un autre dans votre navigateur, ou que vous changez dapplication au premier plan, le lecteur décran restituera vocalement ce qui se passe. Cela a pour conséquence quil pourrait vous donner limpression de ne jamais vous laisser en paix. Cest ici quinterviennent les deux premières commandes à connaître.
### Pause/Lecture
Pour mettre en pause une vocalisation en cours, un appui sur la touche **Shift** fera laffaire. Cette touche agit comme un bouton pause dune télécommande. Si vous rappuyez sur **Shift**, la vocalisation reprend exactement là où elle en était (même si elle était en plein milieu dun mot).
### Stop
Pour interrompre définitivement une vocalisation en cours, il faudra presser la touche **Ctrl**. La différence avec la pause est quil est impossible de reprendre la vocalisation. Cette touche joue le rôle dun stop. Il faudra ensuite utiliser les commandes de navigation pour relancer une vocalisation.
Jusquici, on aura appris à pouvoir ne pas subir la vocalisation en étant capable de la démarrer ou linterrompre. Mais il manque encore la capacité de pouvoir naviguer activement vers les éléments désirés.
## Naviguer avec le lecteur décran
Avec simplement quelques touches supplémentaires, il devient possible de pouvoir se déplacer à la demande dans la page, de façon linéaire (en parcourant les éléments séquentiellement, les uns après les autres).
Naturellement, il est possible de laisser le lecteur restituer toute la page, du début à la fin. Mais on se retrouve rapidement à manquer de finesse, surtout sil faut systématiquement repartir du début de la page pour vocaliser un éléments spécifique qui se trouve en plein milieu du contenu. Cest ici quinterviennent les quelques touches de navigation basique.
### Touche NVDA
Avant dentrer dans le vif du sujet, il est nécessaire de connaître ce quon appelle les **touches NVDA.** Ces touches peuvent être configurées dans linterface de NVDA dans **Préférences**, **Paramètres, Clavier**.
![Fenêtre de paramètres pour configurer les touches NVDA du clavier](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-4.png)
Fenêtre de paramètres pour configurer les touches NVDA du clavier
Lors de lappui sur une de ces touches, NVDA considère que vous appuyez sur une **touche NVDA.** Cela servira à exécuter certains raccourcis au clavier.
Passons maintenant aux commandes concrètes pour naviguer activement dans la page.
### Lire lélément suivant
Un appui sur la touche **flèche du bas** interrompra la vocalisation en cours (sil y en a une), et déplacera le focus NVDA vers le prochain élément de la page. Cet élément nest pas nécessairement activable. Il peut sagir dun paragraphe, par exemple. Cela peut être pratique pour faire du pas à pas dans la vocalisation.
### Lire lélément précédent
Un appui sur la touche **flèche du haut** fera linverse, à savoir déplacera le focus vers lélément précédent dans la page
### Redémarrer la lecture de la page à partir du focus
En combinant un appui sur une **touche NVDA** et la **flèche du bas**, la vocalisation reprend depuis lélément qui a le focus. Il existe quelques subtilités par rapport à la touche pause/lecture **Shift**, mais ce nest pas essentiel à connaître pour débuter. La vocalisation finira de restituer la page jusquà sa fin, et tant que vous ne linterromprez pas.
### Relire lélément courant
En appuyant sur une **touche NVDA** et la **flèche du haut**, le lecteur décran vocalise à nouveau lélément qui détient actuellement le focus. Cela permet notamment de lui faire répéter ce qui est focalisé.
## Conclusion
Avec ces quelques configurations et touches, il vous sera désormais possible de vous familiariser avec les bases de NVDA. Bien quil reste le défi de bien comprendre ce qui est vocalisé (et qui peut parfois apparaître quelque peu cryptique quand on débute), vous serez maintenant en capacité dêtre le pilote de votre lecteur décran plutôt que de le subir.
Il existe bien dautres commandes, mais celles-ci devraient pouvoir couvrir vos besoins essentiels en terme dutilisation.

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB