Outil pédagogique
Simulateur lecteur d'écran
Ce simulateur montre ce qu'un lecteur d'écran annonce selon le HTML que vous produisez. Ce n'est pas NVDA, ni JAWS, ni VoiceOver : c'est un outil pédagogique pour comprendre les mécanismes de base.
Pour tester avec un vrai lecteur d'écran, installezNVDA (lien externe, s'ouvre dans une nouvelle fenêtre)(gratuit, Windows).
Scénarios guidés
- Scénario 1
div cliquable vs bouton
Un div cliquable est invisible au lecteur d'écran. Un button expose son rôle et son nom automatiquement.
- Scénario 2
Texte alternatif des images
Absent, vide ou renseigné : les trois états de l'attribut alt produisent des annonces très différentes.
- Scénario 3
Liens ambigus
Le nom d'un lien doit être compréhensible sans le contexte visuel. Les SR peuvent lister tous les liens d'une page.
- Scénario 4
Label de formulaire
Le placeholder disparaît à la saisie et n'est pas toujours annoncé. Le label est permanent.
- Scénario 5
Structure de navigation
Sans nav et ul, le lecteur d'écran ne détecte pas de landmark et ne peut pas compter les liens.
- Scénario 6
role="alert"
Un message d'erreur inséré dans le DOM n'est pas automatiquement annoncé sans ce rôle.
- Scénario 7
Liste de navigation
ul/li annonce automatiquement le nombre d'items et permet de naviguer élément par élément.
- Scénario 8
Mauvais usage de role
Trois cas où l'attribut role contredit ou neutralise la sémantique native d'un élément.
Bac à sable
Écrivez votre propre HTML et observez ce qu'annonce le simulateur en temps réel.