Pourquoi tester avec un lecteur d'écran ?
La première fois que j'ai lancé NVDA sur un site que je pensais « accessible », j'ai eu un choc. Le contenu était annoncé dans un ordre absurde, les boutons n'avaient pas de nom, et le formulaire de contact était tout simplement inutilisable. Les outils automatisés m'avaient donné un score correct, mais la réalité du terrain était tout autre. C'est pour ça que tester avec un lecteur d'écran est irremplaçable : ça révèle l'ordre de lecture incorrect, les composants mal annoncés, les interactions bloquantes — tout ce qu'aucun outil automatisé ne peut voir.
NVDA : le lecteur gratuit pour Windows
Installation
NVDA (NonVisual Desktop Access) est gratuit et open source. Téléchargez-le sur nvaccess.org — l'installation prend 2 minutes, pas plus. Au lancement, un synthétiseur vocal commence à parler. Ne paniquez pas, appuyez sur Ctrl pour le faire taire le temps de vous organiser.
Commandes essentielles NVDA
Pas besoin de tout apprendre d'un coup. Voici les commandes qui couvrent 90 % des tests :
| Action | Raccourci |
|---|---|
| Activer/désactiver NVDA | Ctrl+Alt+N |
| Arrêter la lecture | Ctrl |
| Lire à partir du curseur | Insert+Flèche bas |
| Élément suivant | Flèche bas |
| Titre suivant | H |
| Landmark suivant | D |
| Formulaire suivant | F |
| Lien suivant | K |
| Bouton suivant | B |
| Tableau suivant | T |
| Image suivante | G |
| Liste des éléments | Insert+F7 |
| Mode formulaire (saisie) | Entrée sur un champ |
| Mode navigation (lecture) | Échap |
Parcours de test avec NVDA
Voici le parcours de test que j'utilise systématiquement. Ça prend 15 minutes et ça couvre l'essentiel :
- Ouvrez la page à tester dans Firefox (meilleure compatibilité avec NVDA, c'est la combinaison de référence en France)
- Appuyez sur H pour naviguer entre les titres : la hiérarchie est-elle logique ? Y a-t-il des sauts de niveaux ?
- Appuyez sur D pour les landmarks : header, nav, main, footer sont-ils bien présents et correctement annoncés ?
- Appuyez sur F pour les formulaires : les labels sont-ils annoncés quand vous arrivez sur un champ ?
- Appuyez sur G pour les images : les alt sont-ils pertinents ou est-ce que vous entendez « image sans description » ?
- Naviguez avec Tab : les éléments interactifs sont-ils tous atteignables ? Le focus ne reste-t-il pas coincé quelque part ?
- Testez les composants interactifs : menus, modales, onglets — les états sont-ils annoncés quand ça s'ouvre ou se ferme ?
VoiceOver : le lecteur intégré à Mac
Activation
Si vous êtes sur Mac, vous avez déjà un lecteur d'écran. VoiceOver est intégré à macOS. Activez-le avec Cmd+F5 (ou dans Préférences Système > Accessibilité). Le curseur VoiceOver — un cadre noir — apparaît autour de l'élément en cours.
Commandes essentielles VoiceOver
VoiceOver utilise un « modificateur » appelé VO qui correspond à Ctrl+Option. Ça fait beaucoup de touches, mais on s'y habitue vite :
| Action | Raccourci (VO = Ctrl+Option) |
|---|---|
| Activer/désactiver | Cmd+F5 |
| Élément suivant | VO+Flèche droite |
| Élément précédent | VO+Flèche gauche |
| Activer un élément | VO+Espace |
| Rotor (navigation rapide) | VO+U |
| Titre suivant | VO+Cmd+H |
| Lire depuis le début | VO+A |
| Arrêter la lecture | Ctrl |
Le Rotor VoiceOver
Le Rotor (VO+U) est l'arme secrète de VoiceOver. Il affiche des listes navigables de tous les titres, liens, formulaires, landmarks et tableaux de la page. Flèches gauche/droite pour changer de catégorie, haut/bas pour parcourir la liste. C'est l'équivalent d'une vue d'ensemble instantanée de votre page.
Erreurs courantes de test
Quand je forme des développeurs au test avec lecteur d'écran, ce sont toujours les mêmes pièges :
- Tester uniquement avec Chrome : la compatibilité n'est pas la même. Utilisez Firefox+NVDA sous Windows ou Safari+VoiceOver sur Mac — ce sont les combinaisons de référence
- Ne pas connaître les modes : NVDA a un mode navigation (lecture avec les raccourcis H, D, F...) et un mode formulaire (saisie dans les champs). Les confondre mène à de faux problèmes — c'est la source de confusion numéro un chez les débutants
- Comparer avec ce que vous voyez : un lecteur d'écran ne « voit » pas la page. Fermez les yeux, concentrez-vous uniquement sur ce qui est annoncé. Est-ce que ça a du sens sans le visuel ?
- S'arrêter aux outils automatisés : les lecteurs d'écran révèlent des problèmes qu'aucun scanner automatique ne peut détecter. C'est un complément, pas un remplacement
15 minutes de test avec un lecteur d'écran en apprennent plus sur l'accessibilité d'un site que des heures d'analyse automatisée. Ce n'est pas une exagération — c'est du vécu.