Scénario 8 / 8
Mauvais usage de role
L'attribut role peut contredire ou neutraliser la sémantique native d'un élément. Trois cas pour voir concrètement ce que le lecteur d'écran annonce et pourquoi c'est un problème.
Usages problématiques de l'attribut role
HTML
<div role="button" tabindex="0" onclick="envoi()">Envoyer</div>Rendu visuel
Simulation lecteur d'écran
Cette simulation est une approximation pédagogique. Elle ne reproduit pas le comportement exact de NVDA, JAWS ou VoiceOver. Pour tester réellement, installez NVDA (gratuit, Windows).
Aucune annonce — aucun élément significatif détecté.
div role="button" est annoncé "Bouton" par le lecteur d'écran. C'est techniquement valide. Cet élément ne reçoit cependant pas le comportement clavier natif (Entrée + Espace pour déclencher), ne soumet pas un formulaire, et demande du JavaScript supplémentaire. Préférer button type="submit".
HTML
<button role="link" onclick="window.location='/contact'">Nous contacter</button>Rendu visuel
Simulation lecteur d'écran
Cette simulation est une approximation pédagogique. Elle ne reproduit pas le comportement exact de NVDA, JAWS ou VoiceOver. Pour tester réellement, installez NVDA (gratuit, Windows).
Aucune annonce — aucun élément significatif détecté.
Le lecteur d'écran annonce "Lien — Nous contacter" sur ce button. Un utilisateur au clavier active un lien avec Entrée, un bouton avec Espace. L'incohérence entre le rôle annoncé et le comportement réel désoriente. Préférer a href="/contact".
HTML
<nav role="presentation">
<a href="/">Accueil</a>
<a href="/blog">Blog</a>
</nav>Rendu visuel
Simulation lecteur d'écran
Cette simulation est une approximation pédagogique. Elle ne reproduit pas le comportement exact de NVDA, JAWS ou VoiceOver. Pour tester réellement, installez NVDA (gratuit, Windows).
Aucune annonce — aucun élément significatif détecté.
role="presentation" retire le nav de l'arbre d'accessibilité. Aucun landmark, aucune navigation rapide possible. Les utilisateurs de NVDA naviguent par landmarks avec la touche R : neutraliser un nav les prive de ce raccourci. Préférer nav aria-label="Navigation principale".
Simulation lecteur d'écran
Cette simulation est une approximation pédagogique. Elle ne reproduit pas le comportement exact de NVDA, JAWS ou VoiceOver. Pour tester réellement, installez NVDA (gratuit, Windows).
Aucune annonce — aucun élément significatif détecté.
L'attribut role peut contredire ou neutraliser la sémantique native d'un élément. Dans les trois cas, le lecteur d'écran annonce quelque chose : c'est l'incohérence avec le comportement attendu qui pose problème.