Tester l’accessibilité d’une page web ou d’un PDF avec NVDA

4 commentaires

Publié le 28 juillet 2015 par Sébastien Delorme

La question revient souvent : comment tester une page web ou un PDF avec un lecteur d’écran ? Nous avions déjà publié sur ce blog la référence des gestes de VoiceOver sous iOS et la référence des gestes de TalkBack sous Android, c’est désormais le tour de NVDA.

NVDA est un lecteur d’écran gratuit et open-source pour l’environnement Microsoft Windows. Un lecteur d’écran est utilisé par les personnes aveugles ou malvoyantes, il restitue l’information affichée à l’écran sous la forme d’une synthèse vocale et/ou d’une plage braille.

Préambule

Il est important de noter que c’est d’abord le respect des règles de conception, de rédaction et de développement qui permet d’assurer une bonne accessibilité des contenus.

Le simple test avec un lecteur d’écran n’est donc pas suffisant. Tout d’abord parce que, vous le savez, l’accessibilité ne concerne pas seulement les utilisateurs de lecteurs d’écran. Mais également parce qu’il s’agit d’outils spécifiques que vous n’avez pas l’habitude d’utiliser. Si vous avez l’impression que tout fonctionne, cela est peut-être dû au fait que vous utilisez votre vue, ou à l’inverse, si vous avez l’impression que rien ne réagit correctement c’est peut-être parce que vous ne maîtrisez pas suffisamment le lecteur d’écran.

Sommaire

Télécharger et installer NVDA en français

Tout d’abord, pour télécharger NVDA, je vous invite à vous rendre sur la page de téléchargement du site de la communauté française.

N’hésitez pas également à télécharger des voix supplémentaires, en installant notamment le moteur de Synthèse Microsoft Speech et la voix Hortence (ou Harmonie pour le français canadien).

Lors de l’installation, suivez simplement les étapes indiquées à l’écran en conservant les options par défaut.

Retour au sommaire

Paramétrer NVDA pour une première utilisation

Où trouver les réglages NVDA ?

Lorsque NVDA est lancé, l’ensemble des options et des outils disponibles sont atteignables via la barre de notifications Windows. Il suffit de cliquer sur l’icône NVDA pour ouvrir le menu contextuel de celui-ci (ou plus rapidement à l’aide du raccourci Insert + N).

Connaître la touche NVDA

Avant d’aller plus loin, dans les réglages, il vous est essentiel de connaître la touche NVDA.

La touche NVDA est une touche magique qui vous permettra de réaliser de nombreuses actions à l’aide de raccourcis clavier. Par défaut, il s’agit de la touche Insert.

Il est possible de la modifier pour en choisir une autre, toutefois pour des raisons de simplicité, tous les raccourcis présentés mentionneront directement la touche Insert.

Désactiver le lancement automatique dans les paramètres généraux

À la différence des utilisateurs quotidiens de NVDA, vous allez vous servir de ce lecteur d’écran à des fins de test. Nous vous recommandons donc fortement de désactiver le lancement automatique de NVDA à l’ouverture de votre session.

Pour cela, dans les préférences, rendez-vous dans « Paramètres Généraux » (Insert + Ctrl + G).

Sur cet écran :

  • Cochez « Sauvegarder la configuration en quittant » afin de retrouver vos réglages au prochain lancement de NVDA.
  • Décochez « Démarrer NVDA automatiquement après ma connexion à Windows ».
  • Décochez « Utiliser NVDA sur l’écran de connexion à Windows (nécessite des privilèges administrateur) ».

Régler le synthétiseur et les paramètres vocaux

La synthèse vocale par défaut de NVDA, très robotique, peut être déroutante si vous n’êtes pas habitués. Préférez-donc l’utilisation du synthétiseur Microsoft Speech Platform et de la synthèse Hortense que vous aurez préalablement téléchargés et installés sur votre poste.

Pour cela, dans les préférences, rendez-vous dans « Synthétiseur » (Insert + Ctrl + S).

Sur cet écran, sélectionnez le synthétiseur « Microsoft Speech Platform ».

Par la suite, toujours dans les préférences, rendez-vous dans « Paramètres vocaux » (Insert + Ctrl + V).

Sur cet écran, sélectionnez la voix « Microsoft Server Speech Text to Speech Voice (fr-FR, Hortense) » (ou « fr-CA, Harmonie » pour le français canadien).

Régler les paramètres de la souris

Vous êtes habitués à vous servir de votre souris pour réaliser la moindre action sur votre ordinateur. Un lecteur d’écran s’utilise principalement au clavier, et quand vous vous servez de votre souris tous les éléments survolés sont vocalisés ! À des fins de tests, il est donc plus simple de désactiver cette option.

Pour cela, dans les préférences, rendez-vous dans « Paramètres de la Souris » (Insert + Ctrl + M).

Sur cet écran, décochez simplement toutes les options.

Autres réglages

NVDA, comme tout lecteur d’écran, est un outil complexe, avec de très nombreuses possibilités de réglage et de personnalisation. Nous n’allons pas plus rentrer dans le détail des réglages possibles, vous pouvez régler le clavier, le dictionnaire de prononciation, etc.

Je vous invite à consulter le guide de l’utilisateur de NVDA pour découvrir davantage de possibilités.

Place aux tests !

Retour au sommaire

Utiliser NVDA pour tester l’accessibilité

Lancer / arrêter NVDA

Raccourcis pour lancer/arrêter NVDA
Raccourci clavier
Lancer NVDA Alt + Ctrl + N
(sous réserve de ne pas avoir supprimé l’icône automatiquement placé sur le bureau lors de l’installation)
Quitter NVDA Insert + Q

Lire une page web ou un document PDF

Raccourcis pour lire une page web ou un document PDF avec NVDA
Raccourci clavier
Lancer la lecture continue en partant de la position du curseur Insert + Flèche bas
Lire la ligne suivante Flèche bas
Lire la ligne précédente Flèche haut
Lire le titre de la page ou du document Insert + T
Revenir au début de la page ou du document Ctrl + Origine
Mettre en pause / reprendre la lecture Maj

Naviguer dans une page web ou un document PDF

Raccourcis pour naviguer dans une page web ou un document PDF avec NVDA
Raccourci clavier
Se rendre au titre suivant H
Se rendre au titre précédent Maj + H
Se rendre au titre de niveau 1, 2, 3, 4, 5 ou 6 suivant 1 ou 2 ou 3 ou 4 ou 5 ou 6
Se rendre au titre de niveau 1, 2, 3, 4, 5 ou 6 précédent Maj + 1 ou 2 ou 3 ou 4 ou 5 ou 6
Se rendre à la liste suivante L
Se rendre à la liste précédente Maj + L
Se rendre au lien suivant K
Se rendre au lien précédent Maj + K
Se rendre à l’image suivante G
Se rendre à l’image précédente Maj + G
Se rendre à l’élément de formulaire suivant F
Se rendre à l’élément de formulaire précédent Maj + F

Vous aurez vite compris le principe, des lettres (appelées touches de navigation rapide) permettent de se promener d’élément en élément dans la page. Combinées avec la touche Maj vous parcourrez le contenu à l’envers. D’autres touches existent :

  • U pour les liens non visités,
  • V pour les liens visités,
  • I pour les éléments d’une liste,
  • B pour les boutons,
  • X pour les cases à cocher,
  • C pour les listes déroulantes,
  • etc.

Vous les retrouverez toutes sur la liste complète des commandes NVDA.

Naviguer dans un tableau

Raccourcis pour naviguer vers et dans un tableau avec NVDA
Raccourci clavier
Se rendre au tableau suivant T
Se rendre au tableau précédent Maj + T
Se rendre à la colonne suivante Ctrl + Alt + Flèche droite
Se rendre à la colonne précédente Ctrl + Alt + Flèche gauche
Se rendre à la ligne suivante Ctrl + Alt + Flèche bas
Se rendre à la ligne précédente Ctrl + Alt + Flèche haut

Autres raccourcis

Autres raccourcis utiles avec NVDA
Raccourci clavier
Afficher la liste des liens, des titres et des repères Insert + F7
(les repères correspondent aux rôles search, banner, main, navigation, etc.)
Augmenter la vitesse de lecture Insert + Ctrl + Flèche haut
Réduire la vitesse de lecture Insert + Ctrl + Flèche haut

Visionneuse de parole

Enfin, si vous souhaitez réaliser tous vos tests sans la sortie vocale, pour pouvez afficher la visionneuse de parole (également très utile pour toutes les personnes sourdes et malentendantes qui souhaiteraient tester l’accessibilité d’un contenu avec NVDA).

Pour cela, dans les outils, cliquez sur « Visionneuse de parole ».

La fenêtre qui s’affiche alors restitue alors les contenus transmis par la synthèse vocale.

Je vous souhaite de bons tests !

Et si vous connaissez toutes ces commandes par coeur, je vous invite à découvrir la liste complète des commandes NVDA.

Retour au sommaire

Vos commentaires

  • Par SylvainBzh, le 24 août 2015 à 10h40.

    Merci, super article.
    J’ajouterai 3 raccourcis que j’utilise beaucoup. En premier le changement de mode de lecture (screen layout ou simple layout). Souvent on rencontre des problèmes de lecture avec NVDA car par défaut il est en mode screen layout (par exemple on peut avoir plusieurs boutons vocalisés comme un seul élément). Dans ce cas il faut changer de mode avec Insert + V pour passer en mode simple layout (c’est le mode utilisé par défaut dans JAWS).

    Autre raccourci utile : Insert + Shift + S permet d’activer le mode veille pour l’application en cours. Cela permet de désactiver NVDA dans une application précise. Par exemple si pendant les tests on passe son temps à switcher entre le navigateur et un éditeur de texte pour prendre des notes, cela permet d’éviter d’entendre tout ce qu’on tape dans l’éditeur.

    Enfin Insert + S : permet de couper la voix, les raccourcis NVDA restent valident. Il ne s’agit pas du mode veille cette fois. Cela fait du bien de reposer les oreilles de temps en temps.

    Répondre

  • Par Zougane HAFFEZ, le 9 septembre 2015 à 9h28.

    Bonjour a tous,

    Merci Sébastien pour ton article qui aide bien.
    Pour compléter, je te proposes de tester le module complémentaire de NVDA nommé NVDAExtensionGlobalPlugin que tu pourra trouver dans cette page : http://www.nvda-fr.org/addons/

    Ce module va enrichir l’interface de NVDA et plus particulièrement la boite de dialogue NVDA + F7 qui affiche en natif uniquement les filtres (lien, titre et ARIA). Ce module enrichi cette liste des autres éléments comme liste, formulaires, tableaux, etc.
    Utilisable uniquement pour tester les pages Web mais c’est déjà pas mal.

    Attention au choix de la touche NVDA car par exemple elle peut faire conflit avec des raccourcis propre au navigateur.
    Sinon cette extension propose des tonnes de chose qui te permettrons de rendre NVDA un peu plus proche de JAWS ce qui peut-être plus pratique pour un développeur.
    Bon test.

    Répondre

    • Par Sébastien Delorme, le 9 septembre 2015 à 14h48.

      Bonjour Zougane,

      Je te remercie pour ton retour et notamment ta remarque sur l’extension NVDAExtensionGlobalPlugin qui peut s’avérer effectivement fort utile.

      Bien à toi,
      Sébastien.

      Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page