Qu'est-ce que Aperçu du lecteur d'écran ?

L'Aperçu Lecteur d'Écran montre comment les technologies d'assistance interprètent votre contenu HTML. Il expose le nom accessible, le rôle et l'ordre de lecture de chaque élément, pour que vous repériez les libellés manquants, la structure de titres cassée et les problèmes ARIA avant que les utilisateurs réels ne les rencontrent.

L'outil analyse votre HTML de la même manière qu'un lecteur d'écran construit son arbre d'accessibilité : il évacue la mise en page visuelle, résout aria-label et aria-labelledby, récupère le alt des images et aplatit le résultat en une séquence de lecture linéaire. Le panneau de problèmes signale les liens sans nom accessible, les sauts de niveau dans les titres, les images sans alt et les contrôles de formulaire sans étiquette.

Comment utiliser

1. Collez votre contenu HTML ou saisissez une URL à analyser.
2. Examinez l'ordre de lecture linéarisé et l'arborescence d'accessibilité des éléments.
3. Corrigez les problèmes signalés et retestez jusqu'à ce que le flux de lecture soit clair.

Quand l'utiliser

• Avant la mise en ligne d'une landing qui doit passer un audit WCAG AA.
• Pour comprendre pourquoi un utilisateur de NVDA ou VoiceOver a signalé un menu confus.
• Pour relire le HTML d'un widget tiers après une mise à jour et détecter les régressions d'accessibilité.

Résultat

Un développeur colle un menu de navigation. L'outil révèle que 3 liens n'ont pas de nom accessible et que la hiérarchie des titres saute de h1 à h4, ce qui désoriente les utilisateurs de lecteurs d'écran.

FAQ

Est-ce que ça remplace un test avec un vrai lecteur d'écran ?

Non. NVDA, JAWS et VoiceOver ont chacun leurs particularités sur la façon d'annoncer les régions live, les en-têtes de tableau et le contenu dynamique. Servez-vous de l'outil pour cueillir les problèmes évidents (libellés absents, ordre de titres cassé) avant de passer du temps dans un vrai lecteur.

Pourquoi mon icône décorative apparaît comme un problème ?

Les lecteurs d'écran annoncent toute img par défaut. Si l'icône est purement décorative, mettez alt="" (vide) et aria-hidden="true", l'outil la saute alors dans l'ordre de lecture. N'utilisez pas alt="icône" ou alt="décoration", c'est pire que rien.

Quel est le bon ordre des titres ?

Un seul h1 par page, et on ne saute jamais de niveau en descendant (un h2 ne peut pas être suivi d'un h4). Remonter est permis. Les utilisateurs de lecteur d'écran naviguent en sautant de titre en titre, une hiérarchie cassée transforme la page en labyrinthe.

Chaque élément interactif doit-il avoir un aria-label ?

Non. Un bouton avec du texte visible n'a pas besoin d'aria-label, le texte devient le nom accessible automatiquement. Ajoutez aria-label uniquement quand il n'y a pas de texte visible (boutons icône) ou quand le texte n'est pas descriptif (une série de "En savoir plus").

Puis-je coller une page entière ?

Oui, collez le HTML complet. L'outil ignore les scripts, styles et balises meta et se concentre sur le body. Pour des pages très volumineuses, mieux vaut traiter section par section pour garder la liste de problèmes lisible.

Outils similaires