Fonctionnelle

Télécharger un lecteur d’écran

Vous pouvez télécharger une ou plusieurs des versions suivantes :

• NVDA version à jour en français;
• JAWS version 32 ou 64 bits (choisir French Candian pour une voix française avec un clavier Qwerty);
• VoiceOver est déjà installé sur votre Mac ou sur votre appareil iOS, mais il vaut mieux avoir la version la plus récente du système d’exploitation.
• TalkBack pour Android. Attention, certains fabricants installent leur propre version de lecteur d’écran, mais il vaut mieux se fier à la version originale de Google qui est régulièrement mise à jour.

ATTENTION : JAWS installe un utilitaire d’interception vidéo qui doit être compatible avec la carte vidéo de votre ordinateur. Malheureusement, certaines cartes vidéo ne sont pas compatibles. Nous vous conseillons donc de garder sous la main une copie de votre pilote vidéo au cas où vous devriez le réinstaller. Pour sa part, NVDA n’utilise pas cette stratégie et n’est donc pas susceptible de créer ce genre de problème.

Avant de vous replier uniquement sur NVDA, vous devez savoir que JAWS est sans conteste le lecteur d’écran qui détient la plus grande part de marché (au moins 80 %) au Québec, alors que NVDA et JAWS se partage équitablement le reste du marché nord américain et européen.

Il est important de noter que les lecteurs d’écran ne lisent pas la page telle qu’elle est affichée à l’écran, mais plutôt le code source (ou le DOM) à partir duquel cet affichage est généré. Cela signifie notamment que la longueur de la ligne n’a pas de rapport avec ce qui est affiché à l’écran. Les lecteurs d’écran assignent en effet une longueur arbitraire entre 100 et 250 caractères par ligne (valeur modifiable par l’utilisateur).

Configuration de NVDA

La synthèse vocale par défaut de NVDA se nomme eSpeak et comporte un très grand nombre de langues. Avec Windows 10 ou 11, il est aussi possible d’utiliser la synthèse vocale de Microsoft  (Windows One Core) fournie gratuitement pour Narrator. eSpeak fera automatiquement les changements de langue indiquées dans le code HTML. Par contre, la synthèse vocale de Microsoft qui est beaucoup plus compréhensible n’est pas multilingue et ne pourra donc pas faire les changements automatiuqes de langues.

Vous pouvez choisir une installation standard de NVDA ou une installation portable (sur une clé USB, par exemple). L’installation standard aura l’avantage de vous proposer automatiquement les mise à niveau à la prochaine version dès qu’elles seront disponibles, ce que ne peut pas faire la version portable.

Dans le menu de NVDA de la version NVDA portable que vous pouvez appeler avec la commande NVDA+N (soit la touche Insère ou le Fixe majuscule, si vous avez configuré cette touche lors du premier démarrage), dans le sous-menu Outils, vous pouvez utiliser la commande Installer NVDA pour procéder à une installation sur votre ordinateur.

Une case à cocher vous offrira la possibilité de copier la configuration portable sur votre ordinateur. Si vous cochez cette option, vous vous épargnerez la configuration manuelle expliquée ci-dessous.

Dès l’installation de NVDA, vous aurez besoin d’utiliser les commandes suivantes :

• NVDA+N pour accéder au menu des Préférences / Paramètres de NVDA;
• Ctrl pour interrompre la parole;
• NVDA+Q pour quitter NVDA.

NVDA est un logiciel sous licence GPL que vous pouvez donc utiliser gratuitement, mais pour lequel vous êtes invités à faire un don pour assurer la continuité du développement.

NVDA synchronisera la lecture audio avec l’affichage visuel d’un encadré de couleur pour indiquer où se trouve le focus de lecture, à condition d’avoir configuré l’indicateur de focus (voir l’explication ci-dessous).

ATTENTION : Vous devez faire les configuration suivantes dans le menu des préférences de NVDA :

Dans le dialogue d’entrée, cocher la case Utiliser fixe majuscule comme touche NVDA qui est plus facile à utiliser que la touche INSÈRE..

• Dans le dialogue Paramètres, Parole, choisissez Voix Windows One Core qui vous donne le choix entre plusieurs voix.
• Vous pouvez aussi ajuster le débit à une vitesse que vous trouverez confortable. Avec l’expérience, vous augmenterez probablement ce débit afin de gagner du temps.
• Dans le dialogue Paramètres, Vision, cochez les cases Activer le surlignage, Surlignez le focus système et Surligner l’objet navigateur.
• Dans le dialogue Paramètres, Clavier, pour les touches NVDA, cochez les trois premiers choix proposés.
• Dans le dialogue Paramètres, Souris, décocher toutes les cases pour éviter que NVDA ne verbalise tout ce qui passe sous la souris. Cela sera moins envahissant quand vous aurez besoin d’utiliser la souris.
• Dans le dialogue Paramètres, Mode navigation, décocher la case Utiliser la disposition telle qu’à l’écran afin que NVDA lise les pages Web dans l’ordre du DOM ou du code source.
• Dans le dialogue Paramètres, Mode navigation, vous pouvez fixer la longueur de ligne jusqu’à 250 caractères.
• Dans le dialogue Paramètres, Mise en forme des documents, vous pouvez cocher ou décocher un grand nombre d’éléments sur lesquels NVDA peut vous donner de l’information. Certains éléments s’appliquent davantage au traitement de texte, mais plusieurs autres s’appliquent aussi bien au contenu des pages Web.
• Vous trouverez dans le menu Outils une Visionneuse de parole qui vous permettra de voir le texte prononcé par la synthèse vocale. Cet outil peut vous aider au début lorsque vous ne comprenez pas bien ce que dit la synthèse vocale.
• Pour une description complète des améliorations apportées par la dernière version, vous pouvez consulter le menu Aide, Nouveautés.

Configuration de JAWS

Nous vous conseillons de procéder à l’installation en suivant la procédure automatique.

Au premier chargement de JAWS, on vous demandera si vous voulez que ce logiciel de lecture d’écran se charge automatiquement au démarrage. Répondez « Non ».

La version de JAWS en mode démo 40 minutes est fournie pour une évaluation du produit mais. Si vous souhaitez l’utiliser régulièrement, vous êtes donc invités à acquérir une licence au coût d’environ 1200 $ canadiens. Le distributeur autorisé se nomme Optelec Canada. Il est plus économique d’acheter un programme de mise à jour valable pour trois ans.

À partir de la version 2019, JAWS propose un Afficheur virtuel à l’écran que vous trouverez dans le menu Option, dialogue Options de base. C’est un peu l’équivalent de l’indicateur de focus de NVDA.

Au début, vous aurez de la difficulté à comprendre ce que vous dira la synthèse vocale, mais cette difficulté s’estompera rapidement après quelques heures d’utilisation.

Configuration de VoiceOver sur Mac

Le lecteur d’écran VoiceOver est intégré au système d’exploitation sur Mac et sur les appareils mobiles fonctionnant sous iOS.

VoiceOver peut interagir avec le contenu à différents niveaux : l’application et ses barres d’outils, le contenu, un paragraphe spécifique, etc.). Deux commandes vous seront donc utiles pour modifier le niveau d’interaction :

• Démarrer l’interaction avec l’élément Ctrl+Opt.+Maj+Flèche bas et
• Arrêter l’interaction avec l’élément et revenir à l’élément parent Ctrl+Opt.+Maj+Flèche haut.

Vous pouvez activer VoiceOver avec Commande+F5 et ouvrir l’utilitaire VoiceOver avec Ctrl+Opt.+F8 afin de le configurer de la façon suivante :

• Dans l’onglet Parole, choisir la voix de synthèse et le débit.
• Dans l’onglet Navigation, à Curseur de souris, choisir Ignorer le curseur VoiceOver.
• Dans l’onglet Web, à Parcourir les pages Web selon, choisir Ordre DOM.
• Dans l’onglet Web, à Lors du chargement d’une nouvelle page Web, cocher uniquement la case Déplacer le curseur VoiceOver vers elle.
• Dans l’onglet Web, à Naviguer parmi les images, choisir Avec description.
• Dans l’onglet Effets visuels,  sous la catégorie Curseur VoiceOver, cocher le case Afficher le curseur VoiceOver.
• Dans l’onglet Effets visuels, sous la catégorie Panneau Légende, cocher la case Afficher le panneau Légende et configurer à votre goût la taille du texte, le nombre de ligne et la transparence du panneau (vous pourrez ensuite modifier la longueur du panneau Légende à l’aide de la souris).

Le curseur VoiceOver et le panneau légende sont deux fonctionnalités très intéressantes à utiliser lors d’une évaluation fonctionnelle. Contrairement aux autres lecteurs d’écran, le curseur VoiceOver encadre le passage lu par la synthèse vocale et ce, aussi bien pour le texte que pour les liens et les champs de formulaire. Quand au panneau Légende, il s’agit de la meilleure façon de visualiser le texte prononcé par la synthèse vocale. Dans les autres lecteurs d’écran, cette fonctionnalité est toujours un peu boîteuse.

Configuration de VoiceOver sur iOS

Dans Réglage / Accessibilité / VoiceOver / Parole, vous pouvez choisir votre voix préférée.

Dans Réglage / Accessibilité / VoiceOver / Parole, Langue du Rotor, vous pouvez ajouter Anglais ou toute autre langue.

Toujours dans VoiceOver / Rotor, vous pouvez cocher ou décocher les éléments que vous voulez pouvoir atteindre facilement en cours de navigation. N’en conservez pas trop, car cela rendra plus fastidieuse l’utilisation du rotor qui doit faire le tour de tous les éléments retenus.

Vous aurez aussi avantage à reconfigurer le geste par défaut pour appeler le Rotor. Dans le dialogue de VoiceOver, à Commandes, Gestes de toucher,  sous-section Balayer avec deux doigts, Vers la gauche, choisir Rotor précédent et Balayer avec deux doigts, Vers la droite, choisir Rotor suivant.

Vous pouvez aussi activer le Panneau légende qui vous permettra d’afficher une ligne de texte en bas d’écran vous permettant de visualiser ce qui est prononcé par la synthèse vocale.

Revenez à Accessibilité / Raccourci accessibilité, cochez VoiceOver. Cela vous permettra d’activer ou de désactiver facilement VoiceOver par un triple clic sur le bouton principal.

Notez bien que VoiceOver sur iOS se contrôle avec un ensemble de gestes tactiles que nous expliquerons dans la section ci-dessous intitulée Les gestuelles de VoiceOver sur iOS. Vous devrez pratiquer ces gestes pour les exécuter correctement.

Configuration de TalkBack sur Android

• Raccourci d’accessibilité pour activer / désactiver TalkBack
  Options possibles : 1. Bouton Allumer + augmentation du volume OU 3 fois le bouton Accueil; 2. Bouton d’augmentation et de réduction du volume
  • Réglages / Accessibilité / Paramètres avancés / Accès direct / Boutons Allumer OU Augmentation volume / TalkBack
• Tutoriel TalkBack en 5 leçons : 1. Navigation; 2. Défilement; 3. Menus de TalkBack; 4. Navigation dans le texte; 5. Modifier du texte.
  • Au premier démarrage de TalkBack (OU) Réglages / Accessibilité / [Services installés (si TalkBack a été installé à partir du Play Store)] / TalkBack / Paramètres / Tutoriel TalkBack.
• Paramètres de synthèse vocale : Moteur, Langue (Français FR vs CAN), Vitesse d’élocution.
  • Réglages / Accessibilité / [Services installés (si TalkBack a été installé à partir du Play Store)] / TalkBack / Paramètres / Paramètres de synthèse vocale.
• Paramètres pour concepteurs : Afficher la sortie vocale
  • Réglages / Accessibilité / [Services installés (si TalkBack a été installé à partir du Play Store)] / TalkBack / Paramètres / Paramètres pour concepteurs / Afficher la sortie vocale.

Pourquoi une évaluation fonctionnelle

L’accessibilité va au-delà de la simple conformité aux différentes normes d’accessibilité, il est aussi important de prendre en compte l’utilisateur et ses outils.

C’est pourquoi l’évaluation fonctionnelle sert d’abord à l’exploration de la page Web du point de vue de l’utilisateur afin d’identifier les problématiques principales de navigation. Elle est essentielle pour vérifier la compatibilité et l’utilisabilité de tous les éléments interactifs comme les menus déroulants, les boites de dialogue, les carrousels,  Elle n’est toutefois pas suffisante pour une évaluation complète de l’accessibilité d’une page Web. Il faut également procéder à une évaluation technique qui permet une analyse des problématiques rencontrées, nous apportant ainsi des piste de solutions. Les deux évaluations sont donc complémentaires, l’une venant éclairer l’autre.

L’évaluation fonctionnelle nous apporte une compréhension du contenu avec les outils d’adaptation et une identification des problèmes d’ergonomie. Elle sert également à alimenter l’évaluation technique ainsi qu’à illustrer les conséquences des problèmes techniques.

L’évaluation technique vient proposer des solutions et explications aux problèmes décelés lors de l’évaluation fonctionnelle

Les deux volets de l’évaluation sont indissociables pour une évaluation complète de l’accessibilité d’une page Web.

Pour réaliser une évaluation fonctionnelle de l’accessibilité

Pour tester les en-têtes de section, les liens, les listes, les formulaires et le texte de façon générale y compris le texte de remplacement des images, tous les lecteurs d’écran sont équivalents.

Toutefois, quand il s’agit de programmation et d’interactivité, chaque logiciel et chaque version d’un même logiciel peuvent réagir différemment, ce qui peut grandement compliquer le travail de vérification de la compatibilité de ces contenus avec les outils d’adaptation informatiques. Très peu de concepteurs sont en mesure de développer une expertise dans l’utilisation des quatre principaux lecteurs d’écran en circulation dans le marché francophone (sur Windows et sur mobile iOS et Android) et de plusieurs versions de chacun de ces logiciels, il serait plus facile de s’en tenir à un outil qui serait reconnu comme le standard.

Tant pour NVDA que pour JAWS, le meilleur navigateur est Chrome parce qu’il communique l’information la plus complète au lecteur d’écran.

Avec VoiceOver, le meilleur navigateur est Safari, alors que pour Android il s’agit évidemment de Chrome.

ATTENTION : pour les personnes qui ne sont pas habituées à utiliser un lecteur d’écran, il est parfois difficile de faire la différence entre la façon habituelle dont ces logiciels lisent l’information, façon à laquelle sont habitués les utilisateurs, et les comportements qui relèvent d’une conception erronée du contenu. Cette difficulté devrait toutefois disparaître avec l’expérience. Il est donc prudent de vérifier ses premières observations avec un utilisateur régulier de ces outils ou avec un expert qui a déjà acquis une bonne expérience de leur utilisation.

De même vous pouvez recourir à des services spécialisés pour une évaluation fonctionnelle avec plusieurs lecteurs d’écran ou plusieurs versions d’un même lecteur d’écran.

Liste des commandes à utiliser avec un lecteur d’écran en version française

Notez qu’avec JAWS, plusieurs commandes sont différentes dans les versions anglaises. Pour les commandes en anglais, nous vous référons à l’Aide de ce logiciel.

Commandes des lecteurs d’écran

Les Touches de Navigation Rapide

Les touches suivantes permettent d’aller à l’élément suivant. En les combinant avec maj, on retourne à l’élément précédent.

http://www.nvda-fr.org/doc/keyCommands.html

http://www.freedomscientific.com/training/training-JAWS-keystrokes.htm

http://www.apple.com/fr/voiceover/info/guide/_1131.html

Les gestuelles de VoiceOver sur iOS

http://irma.math.unistra.fr/~coornaer/Mathematique-dans-le-noir/tableau_gestes_iphone.html

Les gestuelles pour TalkBack sur Android

Voir l’aide de Google : https://support.google.com/accessibility/android/answer/6151827?hl=fr

Vous devez d’abord parcourir le contenu en prenant des notes sur les problèmes rencontrés. C’est à partir de vos notes que vous pourrez compléter la grille. Cette grille vous servira aussi d’aide mémoire et certaines questions vous obligeront à revérifier des contenus.

Vous pouvez trouver la grille de l’évaluation fonctionnelle sur le site Accès123.

• Vous devez d’abord vous inscrire sur le site.
• Ouvrir la section Mes projets et y Ajouter un nouveau projet
• Puis, dans votre projet, vous devez Ajouter une page au projet et dans la colonne Actions, activer l’icône Évaluer la page .
• Dans la liste déroulante, il ne vous reste alors qu’à sélectionner la grille « Évaluation fonctionnelle ».

Voici des pages permettant de pratiquer différents types de contenu avec un lecteur d’écran.

• Exemple de texte
• Exemple de tableaux
• Exemple de formulaire
• Exemple de menu déroulant (selon le modèle de la Boite à outils de l’expérience Web – BOEW)
• Exemple d’accordéon
• Exemple de menu sous forme d’accordéon (voir le site de Desjardins)
• Exemple de panneaux à onglets
• Exemple de boite de dialogue
• Exemple de notes de bas de page
• Exemple de carrousel proposé par la Boite à outils de l’expérience Web (BOEW)
• Exemple de calendrier d’événements