Tester son site avec NVDA et VoiceOver : tutoriel pratique 2026

Vous avez lancé un audit automatique, le score est correct, vous avez corrigé les 80% du critère 1.1 et de la navigation au clavier. Bravo. Et maintenant ? Maintenant il faut écouter votre site. Le test au lecteur d'écran est la seule manière de découvrir ce qu'un outil automatique ne verra jamais : un ordre de lecture absurde, un focus piégé dans une modale, un bouton qui s'annonce "image" parce que personne ne lui a mis de label.

Ce tutoriel vous emmène pas à pas de l'installation à votre premier vrai test, sur Windows (NVDA) puis macOS et iOS (VoiceOver). Comptez 10 minutes pour l'installation, 30 minutes pour un premier audit. À la fin, vous aurez une méthode reproductible.

Pourquoi tester avec un lecteur d'écran

Ce que l'audit automatique ne voit pas

Un scanner RGAA détecte les problèmes techniques : alt manquants, contrastes faibles, labels absents, structure HTML invalide. C'est environ 30 à 40% des critères RGAA. Le reste demande un humain : la pertinence d'un alt text, la clarté d'une étiquette de bouton, l'ordre de lecture, l'utilisabilité d'une modale.

Le lecteur d'écran est l'outil le plus rapide pour évaluer ces critères, parce qu'il vous force à percevoir la page comme une suite d'éléments annoncés, pas comme une mise en page visuelle.

Ce qu'un lecteur d'écran ne remplace pas

Important : tester avec NVDA pendant 30 minutes ne fait pas de vous un utilisateur aveugle. Un utilisateur quotidien d'un lecteur d'écran a 10 ans de raccourcis dans les doigts, ne lit pas linéairement et navigue par titres ou par landmarks. Votre test révèle des problèmes techniques (label manquant, ordre cassé), pas des problèmes d'usage réel. Pour ça, il faut des tests utilisateurs avec des personnes concernées.

[!TIP] Si vous voulez juste sentir comment ça sonne, sans rien installer, notre simulateur de lecteur d'écran annonce votre page comme NVDA le ferait, dans le navigateur. Idéal pour une démo en réunion ou pour convaincre une équipe design.

NVDA sur Windows : installation et premier lancement

NVDA (NonVisual Desktop Access) est gratuit, open source, et représente environ 65% des utilisateurs de lecteur d'écran selon l'enquête WebAIM 2024. C'est le standard de fait pour tester.

Étape 1 : télécharger

Rendez-vous sur nvaccess.org. Cliquez sur Download NVDA. Le téléchargement est gratuit, NV Access propose une donation facultative.

Étape 2 : installer

Lancez l'exécutable. NVDA propose trois modes :

• Installer : recommandé pour un usage régulier
• Lancer la copie portable : exécution sans installation, pratique pour tester depuis une clé USB
• Lancer une copie temporaire : démarrage immédiat sans rien installer

Pour un premier test, "Lancer une copie temporaire" suffit. Pour un usage répété, installez la version complète.

Étape 3 : premier lancement

Au premier démarrage, une fenêtre de bienvenue vous propose de configurer la touche NVDA. Par défaut, c'est Insert. Sur les laptops sans pavé numérique, choisissez Verr Maj.

Cette touche modificatrice est le préfixe de la plupart des raccourcis. Dans ce tutoriel, on l'appelle "NVDA".

Étape 4 : raccourcis essentiels à connaître par cœur

[!NOTE] Le mode aide à la saisie (NVDA + 1) est précieux : il vocalise chaque touche que vous appuyez sans l'exécuter. Idéal pour découvrir les raccourcis sans tout casser.

VoiceOver sur macOS : activation et premier lancement

VoiceOver est préinstallé sur tous les Mac. Aucune installation, juste à l'activer.

Étape 1 : activer VoiceOver

Trois façons :

• Raccourci clavier : Cmd + F5
• Touch ID : appuyez trois fois rapidement sur le bouton Touch ID
• Menu : Réglages système → Accessibilité → VoiceOver → Activer

Au premier lancement, un tutoriel de bienvenue s'affiche. Suivez-le, il dure 5 minutes et vaut le temps investi.

Étape 2 : la touche VO

VoiceOver utilise VO comme touche modificatrice : Ctrl + Option. Tous les raccourcis VoiceOver commencent par VO. Vous pouvez aussi activer le verrouillage VO avec VO + ; pour ne pas avoir à maintenir les deux touches.

Étape 3 : raccourcis essentiels

Le Rotor : votre meilleur ami

Le Rotor (VO + U) est l'équivalent VoiceOver des raccourcis de navigation par éléments de NVDA. Il liste tous les éléments d'un type donné : titres, liens, formulaires, landmarks. Utilisez les flèches gauche/droite pour changer de catégorie, haut/bas pour naviguer dans la liste.

VoiceOver sur iOS : tester un site mobile

Tester en mobile est crucial : 60% du trafic web vient désormais du mobile et l'accessibilité y est souvent négligée.

Activer VoiceOver iOS

• Réglages → Accessibilité → VoiceOver → Activer
• Ou raccourci : triple-clic sur le bouton latéral (à configurer dans Accessibilité → Raccourci d'accessibilité)
• Ou via Siri : "Active VoiceOver"

Gestes essentiels

VoiceOver iOS remplace les gestes tactiles classiques par des gestes spécifiques.

[!TIP] Apprendre VoiceOver iOS prend une heure de pratique. Activez-le sur votre propre téléphone une demi-journée et vous comprendrez instantanément pourquoi vos formulaires mobiles non labelisés sont infernaux.

Le parcours de test en 5 étapes

Voici une méthode reproductible que vous pouvez appliquer à n'importe quelle page. Comptez 30 minutes pour un audit complet.

Étape 1 : tester la structure (titres et landmarks)

Objectif : vérifier que la hiérarchie de titres a du sens à l'oreille.

Avec NVDA :

• Appuyez sur H pour sauter de titre en titre
• Appuyez sur 1, 2, 3 pour cibler un niveau précis
• D pour parcourir les landmarks

Avec VoiceOver :

• VO + U puis sélectionnez En-têtes dans le Rotor
• Parcourez la liste avec les flèches haut/bas

À vérifier :

• L'arborescence H1 → H2 → H3 est-elle logique sans regarder la page ?
• Y a-t-il un seul <h1> par page ?
• Les landmarks principaux (main, nav, footer) sont-ils tous présents ?
• Aucun saut de niveau (H2 directement suivi d'un H4) ?

Étape 2 : tester les liens

Objectif : vérifier que chaque lien a un libellé compréhensible hors contexte.

Avec NVDA :

• K pour le lien suivant
• NVDA + F7 puis cliquer sur "Liens" pour voir la liste

Avec VoiceOver :

• VO + U puis catégorie Liens

À vérifier :

• Aucun lien "Cliquez ici", "En savoir plus", "Lire la suite" sans contexte
• Les liens vers le même URL ont le même libellé
• Les liens externes l'indiquent (icône + alt approprié, ou texte explicite)
• Les liens téléchargement précisent le type et le poids du fichier

Étape 3 : tester les formulaires

Objectif : vérifier que chaque champ a un label associé et que les erreurs sont annoncées.

Avec NVDA :

• Naviguez dans le formulaire avec Tab
• NVDA passe en mode formulaire automatiquement
• F en mode navigation pour sauter de champ en champ

Avec VoiceOver :

• VO + U puis catégorie Contrôles de formulaire
• Ou naviguer avec Tab

À vérifier :

• Chaque champ est annoncé avec un label clair, pas "édition vide" tout seul
• Les champs obligatoires sont signalés à l'oreille ("obligatoire", "requis")
• Les messages d'erreur sont annoncés (live region ou focus)
• Les groupes de champs (radio, checkbox) sont introduits par un <fieldset>/<legend>

Étape 4 : tester les images

Objectif : vérifier la pertinence des alt text.

Avec NVDA :

• G pour parcourir les images
• NVDA + F7 puis catégorie "Images" pour voir la liste

Avec VoiceOver :

• VO + U puis catégorie Images

À vérifier :

• Chaque image informative a un alt qui décrit son information, pas son apparence
• Les images décoratives sont absentes du parcours (alt vide)
• Aucun alt ne contient le nom de fichier ("IMG_4287.jpg")
• Aucun alt redondant ("photo de", "image de", "illustration de")

Pour approfondir la rédaction des alt, voir notre guide complet sur le bon alt text.

Étape 5 : tester les modales et composants ARIA

Objectif : vérifier que les composants interactifs respectent les patterns ARIA.

À tester :

• Ouvrez une modale : le focus passe-t-il dedans automatiquement ?
• Tab tourne-t-il en boucle dans la modale (focus trap) ?
• Échap ferme-t-elle la modale ?
• Le titre de la modale est-il annoncé à l'ouverture (aria-labelledby) ?
• Le rôle de la modale est-il correct (role="dialog" ou aria-modal="true") ?
• À la fermeture, le focus revient-il sur l'élément déclencheur ?

Pour les menus déroulants, accordéons, onglets, vérifiez que les états aria-expanded sont annoncés ("développé", "réduit").

Comment interpréter les résultats

Les trois niveaux de gravité

Quand vous trouvez un problème, classez-le.

• Bloquant : un utilisateur ne peut pas accomplir l'action (formulaire d'inscription sans labels, modale qui piège le focus). À corriger en priorité absolue.
• Gênant : l'action est possible mais inconfortable (alt redondant, titre de page peu informatif). À planifier dans le sprint.
• Cosmétique : amélioration de qualité (ordre de lecture sous-optimal mais correct). À traiter quand vous nettoyez la dette.

Documenter vos tests

Tenez un journal d'audit simple :

| Élément testé | Annonce attendue | Annonce réelle | Gravité | Critère RGAA |
|---|---|---|---|---|
| Bouton "Panier" | "Panier, 3 articles" | "Image" | Bloquant | 1.1 |
| Champ email | "Email, obligatoire" | "Édition vide" | Bloquant | 11.1 |
| Logo cliquable | "Accueil RGAA Checker" | "Logo point S V G" | Gênant | 1.3 |

Croisez vos trouvailles avec un audit automatique pour quantifier l'écart entre ce que l'outil détecte et la réalité humaine.

Limitations à connaître

Le test ne fait pas de vous un utilisateur quotidien

Vous testez avec une oreille de débutant, pas avec dix ans de pratique. Si quelque chose vous paraît absurde à l'écoute, c'est probablement vrai pour tout le monde. Mais l'inverse n'est pas vrai : ce qui vous semble fonctionner peut être problématique pour un utilisateur expérimenté qui navigue à vitesse 2x avec d'autres habitudes.

Les annonces varient selon le navigateur

NVDA + Firefox, NVDA + Chrome, NVDA + Edge donnent des résultats légèrement différents. Idem pour VoiceOver + Safari vs VoiceOver + Chrome. Pour un audit complet, testez au moins deux combinaisons. La combinaison la plus représentative pour NVDA est NVDA + Firefox, pour VoiceOver c'est VoiceOver + Safari.

Certains critères demandent encore l'œil

L'ordre visuel vs l'ordre de tabulation, les contrastes, la lisibilité au zoom 200%, le comportement à 320px de large : un lecteur d'écran ne couvrira jamais ces critères. Combinez avec un audit visuel et un test au clavier seul.

Le simulateur en ligne, pour quoi faire

Notre simulateur de lecteur d'écran n'est pas un remplacement de NVDA ou VoiceOver pour un audit sérieux. Son utilité est ailleurs :

• Démonstration en réunion sans installer quoi que ce soit
• Apprentissage rapide des annonces ARIA avant de plonger dans NVDA
• Validation rapide d'une page de dev avant de la passer au vrai test

Pour un audit complet et certifiable, rien ne remplace NVDA ou VoiceOver sur le vrai navigateur. Pour un audit éclair de l'ensemble du site, l'audit RGAA en ligne repère en complément tous les problèmes techniques (alt manquants, contrastes, labels, structure) sur l'ensemble des pages en quelques secondes.

Aller plus loin

Une fois ce premier test mené, allez plus loin :

• Raccourcis NVDA essentiels : la table de raccourcis complète à imprimer
• Comparatif NVDA, JAWS, VoiceOver : choisir son lecteur d'écran selon le contexte
• HTML et lecteurs d'écran : les balises qui changent tout
• Critère RGAA 1.1 : la fiche officielle sur les alternatives textuelles

Conclusion

Tester avec un lecteur d'écran demande 10 minutes d'installation et 30 minutes par page pour un premier audit. C'est le meilleur retour sur investissement de tout votre processus accessibilité : vous découvrez en une session ce qu'aucun outil automatique ne verra jamais. Faites-en un réflexe d'équipe : avant chaque release majeure, un développeur lance NVDA et passe 30 minutes sur les parcours critiques. À la deuxième fois, ça devient naturel.

Et si vous voulez convaincre un sceptique : ouvrez votre page d'inscription, activez NVDA, fermez les yeux et essayez de remplir le formulaire. C'est la démonstration la plus efficace qu'il existe.