Tests avec les lecteurs d’écran
Objectifs du module
- Comprendre l’importance de tester avec un lecteur d’écran.
- Connaître les principaux lecteurs d’écran (NVDA, VoiceOver, etc.).
- Identifier les points clés à vérifier lors d’un test manuel.
- Appliquer les bonnes pratiques pour une expérience de lecture fluide.
1. Pourquoi tester avec un lecteur d’écran ?
Un lecteur d’écran (Screen Reader) transforme le contenu affiché à l’écran en voix ou en braille. Il est utilisé par :
- Les personnes non-voyantes.
- Les personnes malvoyantes.
- Certaines personnes ayant des difficultés cognitives.
Tester avec un lecteur d’écran permet de vérifier si un site est réellement compréhensible sans la vue.
2. Principaux lecteurs d’écran
- NVDA (Windows, gratuit, très utilisé)
- JAWS (Windows, payant, très répandu en entreprise)
- VoiceOver (intégré à macOS et iOS)
- TalkBack (intégré à Android)
3. Ce qu’il faut tester
- Ordre de lecture : Le contenu est-il lu dans un ordre logique ?
- Titres : La structure (h1, h2, h3…) permet-elle de comprendre la page ?
- Liens et boutons : Ont-ils un nom clair ? (Éviter « Cliquez ici »).
- Images : Ont-elles des textes alternatifs pertinents ?
- Formulaires : Les champs sont-ils bien étiquetés avec
<label>? - Éléments dynamiques : Les changements sont-ils annoncés (avec ARIA) ?
4. Bonnes pratiques à retenir
- Utiliser du HTML sémantique (les balises natives sont toujours mieux).
- Éviter les contenus vides ou redondants (par exemple, 10 liens « Lire plus » identiques).
- Connaître les raccourcis de navigation des lecteurs d’écran :
- H → passer d’un titre à l’autre
- K → passer d’un lien à l’autre
Exercices Interactifs
Exercice 1 – Premier test simple
Téléchargez NVDA (Windows) ou activez VoiceOver (Mac/iPhone). Ouvrez un site simple (ex. Wikipédia) et écoutez. Est-ce que la lecture est fluide et compréhensible ?
Exercice 2 – Images sans texte alternatif
Que va lire un lecteur d’écran pour le code suivant ? Que faut-il ajouter ?
<img src="chien.jpg">Afficher la correction
Sans attribut alt, le lecteur d’écran lira uniquement « image » ou, pire, le nom du fichier (« chien.jpg »), ce qui n’est pas informatif.
Correction :
<img src="chien.jpg" alt="Un chien marron qui court dans un parc">Exercice 3 – Formulaire mal étiqueté
Que manque-t-il pour que le champ de formulaire ci-dessous soit compréhensible par un lecteur d’écran ?
<input type="text" id="email">
<button>Envoyer</button>Afficher la correction
Il manque la balise <label> pour indiquer la fonction du champ.
Correction :
<label for="email">Adresse e-mail :</label>
<input type="text" id="email">Exercice 4 – Ordre de lecture
Si vous inversez l’ordre visuel de deux éléments avec CSS, dans quel ordre le lecteur d’écran lira-t-il le contenu ?
<div style="display:flex; flex-direction:row-reverse;">
<h2>Titre</h2>
<p>Description</p>
</div>Afficher la correction
Le lecteur d’écran lit dans l’ordre du code HTML (DOM), et non dans l’ordre visuel. Ici, il lira donc d’abord le <h2>, puis le <p>.
Ce n’est pas forcément un problème, mais il faut s’assurer que l’ordre du code reste logique même si l’affichage visuel est modifié.
Prêt pour la suite ?
Maintenant que vous savez comment tester avec les lecteurs d’écran, découvrons les outils automatisés.
Accéder au Module 7
Laisser un commentaire