feat: add article on a guide for NVDA screen reader

src/_pages/blog/article/guide_developpeuse-euse_lecteur_d_ecran.md

@@ -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. Lorsqu’on n’a pas de handicap visuel, autant profiter des capacités supplémentaires de l’outil pour permettre de mieux s’y retrouver.
+
+Il est possible de configurer NVDA pour qu’il 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 l’icône NVDA, puis sur le menu **Préférences**, puis sur **Paramètres…**
+
+Dans la fenêtre qui s’ouvre, 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 l’activation 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 l’objet 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 s’est 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 l’article.
+- **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 qu’il 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 d’un coup, mais va le découper en morceaux. Ce curseur indique le début du morceau qu’il 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 l’endroit 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 s’est passé. C’est notamment pratique pour une personne pas encore habituée à la façon dont les éléments sont restitués à l’oral par le lecteur d’écran.
+
+A noter que l’exemple ci-dessous est un peu brouillon à cause de l’interférence avec l’outil 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 l’ouverture 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 d’un onglet à un autre dans votre navigateur, ou que vous changez d’application au premier plan, le lecteur d’écran restituera vocalement ce qui se passe. Cela a pour conséquence qu’il pourrait vous donner l’impression de ne jamais vous laisser en paix. C’est ici qu’interviennent les deux premières commandes à connaître.
+
+### Pause/Lecture
+
+Pour mettre en pause une vocalisation en cours, un appui sur la touche **Shift** fera l’affaire. Cette touche agit comme un bouton pause d’une 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 d’un mot).
+
+### Stop
+
+Pour interrompre définitivement une vocalisation en cours, il faudra presser la touche **Ctrl**. La différence avec la pause est qu’il est impossible de reprendre la vocalisation. Cette touche joue le rôle d’un stop. Il faudra ensuite utiliser les commandes de navigation pour relancer une vocalisation.
+
+Jusqu’ici, on aura appris à pouvoir ne pas subir la vocalisation en étant capable de la démarrer ou l’interrompre. 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 s’il 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. C’est ici qu’interviennent les quelques touches de navigation basique.
+
+### Touche NVDA
+
+Avant d’entrer dans le vif du sujet, il est nécessaire de connaître ce qu’on appelle les **touches NVDA.** Ces touches peuvent être configurées dans l’interface 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 l’appui 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 (s’il y en a une), et déplacera le focus NVDA vers le prochain élément de la page. Cet élément n’est pas nécessairement activable. Il peut s’agir d’un 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 l’inverse, à 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 n’est pas essentiel à connaître pour débuter. La vocalisation finira de restituer la page jusqu’à sa fin, et tant que vous ne l’interromprez 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 qu’il 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 d’autres commandes, mais celles-ci devraient pouvoir couvrir vos besoins essentiels en terme d’utilisation.
+
+Si vous souhaitez aller plus loin, la [documentation officielle de NVDA](https://www.nvda.fr/doc/userGuide.html) devrait répondre à toutes vos interrogations.