feat: add article on a guide for NVDA screen reader

pull/12/head
Rémi Doolaeghe 2024-04-23 23:04:52 +02:00 committed by Rémi Doolaeghe
parent 11f7a7e20a
commit 7f6a3cff2f
5 changed files with 121 additions and 0 deletions

View File

@ -0,0 +1,121 @@
---
title: "Guide d'accessibilité pour développeur·euse web : 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
---
En tant que développeur·euse web, 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 d'un service accessible reste un bon moyen de mettre en place les bonnes conditions d'utilisabilité.
Parmi le panel d'outils à connaître, le lecteur d'écran est une des solutions utilisées par les personnes en situation de handicap. Mais voilà, la prise en main de ce genre d'outil n'est pas des plus évidentes, et peut même parfois rebuter une personne motivée.
Un lecteur d'écran est une application capable de restituer le contenu d'une page web (ou toute application d'ailleurs) via une voix synthétique, en s'appuyant sur la structure de la page, pour permettre à une personne en situation de handicap (majoritairement visuel, mais aussi moteur, auditif, cognitif...) de pouvoir comprendre comment l'information est organisée. L'outil permet également de fournir une aide pour interagir avec la page.
Oui mais voilà : au premier abord, un lecteur d'écran semble produire un flot ininterrompu de paroles de façon incontrôlable, et pourrait en rebuter plus d'un. 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 s'en 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 quelques bases utiles pour son utilisation dans la vie quotidienne en tant 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 n'est pas le seul. Je vais sauter la phase d'installation qui ne devrait pas poser trop de problèmes, et me focaliser sur son utilisation. Je vais également essentiellement me concentrer sur l'utilisation de NVDA dans le cadre d'une page web, bien que l'outil soit capable de bien plus que ça.
Vouloir tester une page web avec NVDA est une bonne chose. Mais lorsqu'on n'a pas l'habitude de s'en servir, la tâche peut se révéler ardue. Voici donc quelques conseils pour vous aider à rendre l'outil plus facile d'utilisation 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.
Si vous souhaitez aller plus loin, la [documentation officielle de NVDA](https://www.nvda.fr/doc/userGuide.html) devrait répondre à toutes vos interrogations.

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