Comment tester votre site avec un lecteur d'écran (NVDA, VoiceOver)
En Bref : L'essentiel à retenir
- Pour tester l'accessibilité d'un site web, il est crucial d'utiliser un lecteur d'écran comme NVDA (Windows) ou VoiceOver (Mac).
- NVDA se lance avec `Ctrl + Alt + N` et utilise la touche `Insert` comme touche magique, tandis que VoiceOver se lance avec `Cmd + F5` et utilise `Ctrl + Option` (VO).
- Lors du test, vérifiez l'ordre logique de la navigation, l'information des images, la clarté des boutons et l'accessibilité à toutes les fonctionnalités sans souris.
- L'objectif est de comprendre l'expérience utilisateur et d'identifier les problèmes de structure et d'interactivité, plutôt que de tout comprendre des flux vocaux.
Vous avez audité votre site avec des outils automatiques (comme RGAA Checker), et tout semble vert. Bravo ! Mais avez-vous écouté votre site ? Le test manuel avec un lecteur d'écran est l'épreuve de vérité. C'est intimidant au début, mais voici comment vous lancer simplement.
Les outils gratuits
- Sur Windows : Téléchargez NVDA (NonVisual Desktop Access). C'est le plus utilisé au monde, il est gratuit et open-source.
- Sur Mac : Vous avez déjà VoiceOver. Il est installé par défaut sur tous les appareils Apple (Mac, iPhone, iPad).
Guide de démarrage rapide : NVDA (Windows)
- Lancer :
Ctrl + Alt + N - La touche magique : La touche "NVDA" est par défaut la touche
Insert(ouVerr Majsi configuré). - Se taire : Appuyez sur
Ctrlpour stopper la voix (indispensable pour ne pas devenir fou !). - Naviguer :
Flèche bas: Lire ligne par ligne.H: Sauter de titre en titre (Heading).K: Sauter de lien en lien.Tab: Aller au prochain élément interactif.
Guide de démarrage rapide : VoiceOver (Mac)
- Lancer :
Cmd + F5(ou triple clic sur Touch ID). - La touche magique : Les touches
Ctrl + Option(appelées "VO"). - Se taire : Appuyez sur
Ctrl. - Naviguer :
VO + Flèche droite: Lire l'élément suivant.VO + U: Ouvrir le "Rotor" (menu contextuel pour lister les titres, liens, etc.).
Que chercher lors du test ?
Fermez les yeux (littéralement) et essayez de naviguer.
- L'ordre est-il logique ? Est-ce que je lis le pied de page avant le contenu principal ?
- Les images ont-elles du sens ? Si j'entends "image 4582.jpg", c'est un échec. Si j'entends "Graphique des ventes 2024", c'est gagné.
- Les boutons sont-ils explicites ? Un bouton "En savoir plus" lu hors contexte ne veut rien dire.
- Puis-je accéder à tout ? Essayez d'ouvrir le menu, de remplir le formulaire de contact et de l'envoyer sans toucher à la souris.
[!IMPORTANT] Ne cherchez pas à comprendre 100% du débit vocal (les experts écoutent à 400 mots/minute). Concentrez-vous sur la structure et l'interactivité.
Ce test de 10 minutes vous en apprendra plus sur l'expérience réelle de vos utilisateurs que 10 rapports automatiques.
Une fois maîtrisé, essayez de tester des interfaces plus complexes comme les Single Page Applications (SPA).
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
L'intitulé de chaque lien doit être explicite et permettre de comprendre la destination ou la fonction du lien, même hors contexte.
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.