Série En conditions réelles · Épisode 3 · 7 min

Je navigue une page au lecteur d’écran

En conditions réelles : j'éteins l'écran et j'écoute une page avec un lecteur d'écran.

Publié le 4 novembre 2026.Consulter la transcription de la vidéo Voir sur YouTube (nouvelle fenêtre)

Chapitres

Transcription

Texte intégral de la narration de l’épisode.

Situations du quotidien

Aujourd’hui, on éteint l’écran et on écoute. Après le test au clavier, voici l’autre expérience à vivre au moins une fois : parcourir une page avec un lecteur d’écran, ce logiciel qui transforme l’interface en voix. Pas pour jouer, mais pour entendre ce que ton site annonce réellement. Une page bien balisée se raconte presque toute seule : son titre, ses régions, ses titres, ses liens. Une page négligée, elle, débite « lien, lien, bouton, image », sans qu’on comprenne rien. Le lecteur d’écran n’est pas un gadget : c’est le révélateur le plus honnête de ton balisage.

Ce qu’un lecteur d’écran annonce

Le protocole d’écoute est simple. Un lecteur d’écran, qu’il s’appelle NVDA, JAWS, VoiceOver ou TalkBack, restitue toujours la même chose : d’abord le titre de la page à l’ouverture, c’est le critère 8.5. Puis les régions, les grands repères comme la navigation et le contenu principal, critère 9.2. Ensuite, on peut demander la liste des titres et la liste des liens pour se déplacer vite, critères 9.1 et 6.1. Et enfin, élément par élément : les champs de formulaire, les images, les boutons, avec leur nom. On va parcourir deux versions de la même page, une mal balisée, une bien balisée, et écouter la différence.

La première chose annoncée : le titre

On arrive sur la page du panier. La toute première chose que le lecteur d’écran annonce, c’est le titre de la page, celui qui est aussi affiché dans l’onglet du navigateur. Sur la version mal balisée, il lit « Document sans titre » : la personne ne sait même pas où elle vient d’arriver. Sur la version bien balisée, il annonce « Panier, 2 articles, Boutique Exemple ». En une phrase, on sait quelle page, quel contexte, quel site. C’est le critère 8.5 : chaque page a un titre, et il doit être unique et descriptif. C’est le tout premier repère, et il est gratuit à corriger.

Parcours : régions, titres, liens (9.2, 9.1, 6.1)

Maintenant, on parcourt la page à l’oreille. Premier repère, les régions. Un lecteur d’écran peut lister les grandes zones de la page et sauter de l’une à l’autre : la bannière, la navigation, le contenu principal, le pied de page. Ça marche si le code utilise les bonnes balises, header, nav, main, footer, c’est le critère 9.2. Deuxième repère, les titres. On demande la liste des titres, et sur une page bien structurée, elle ressemble à un sommaire : le sujet, ses sections, ses sous-parties, sans saut de niveau, c’est le critère 9.1. On saute directement à la section voulue. Troisième repère, les liens. Sur la version mal balisée, la liste des liens est un cauchemar : « cliquez ici, cliquez ici, en savoir plus, ici ». Rien ne dit où chaque lien mène. Sur la version corrigée, chaque intitulé se comprend seul : « Voir mon panier », « Suivre ma commande », « Nous contacter ». La liste des liens redevient un menu utile, c’est tout l’objet du critère 6.1.

Ce que le lecteur d’écran dit d’un champ

Descendons dans le formulaire de contact, et écoutons un champ. Sur la version mal balisée, le lecteur d’écran annonce seulement « édition, vide » : la personne sait qu’elle peut taper, mais pas ce qu’on lui demande. Nom ? Adresse ? Message ? Impossible à deviner. Sur la version corrigée, le champ a une étiquette réellement associée, et l’annonce devient « Adresse e-mail, édition ». Là, tout est clair. C’est le critère 11.1 : chaque champ de formulaire a une étiquette. Un placeholder gris ne suffit pas, parce qu’il disparaît à la saisie et n’est pas toujours annoncé. Il faut une vraie étiquette, reliée au champ.

Ce que le lecteur d’écran dit d’une image

Continuons avec une image de produit. Sur la version mal balisée, le lecteur d’écran lit le nom du fichier : « image, D.S.C. underscore 0421 point jpg ». Aucune information. Pire, s’il s’agissait d’une image importante, comme un schéma de tailles, la personne raterait complètement le contenu. Sur la version corrigée, l’image porte une alternative textuelle qui décrit ce qu’elle apporte, par exemple « Guide des tailles, du 36 au 46 ». C’est le critère 1.1. Et si l’image était purement décorative, on lui laisserait une alternative vide pour que le lecteur d’écran l’ignore, plutôt que de polluer l’écoute.

Ce que le lecteur d’écran dit d’un bouton

Dernier arrêt : un bouton icône, comme la petite loupe de recherche ou l’icône panier. Sur la version mal balisée, il n’y a qu’une image dans le bouton, sans texte : le lecteur d’écran annonce juste « bouton ». Bouton pour quoi faire ? Mystère. Sur la version corrigée, le bouton a un nom accessible, par exemple via un texte masqué ou un attribut dédié, et l’annonce devient « Rechercher, bouton ». C’est le critère 7.1 : un composant doit exposer un nom pertinent en plus de son rôle. La règle : si ton bouton n’a qu’une icône, donne-lui un nom accessible, sinon il est muet.

Deux pages, deux expériences

Mettons les deux versions côte à côte, à l’oreille. La page négligée, ça donne : « Document sans titre. Lien, lien, en savoir plus. Édition, vide. Image. Bouton. » Une bouillie dans laquelle personne ne peut travailler. La page soignée, avec exactement le même contenu, ça donne : un titre clair à l’arrivée, une liste de titres qui sert de plan, des liens qui annoncent leur destination, des champs qui se nomment, des images décrites, des boutons identifiés. Le contenu est identique. Ce qui change tout, c’est le balisage. Et ce balisage, tu peux l’entendre toi-même en cinq minutes.

Checklist

Récapitulons ta méthode d’écoute, à rejouer sur ton propre site. Lance un lecteur d’écran gratuit, NVDA sur Windows ou VoiceOver sur Mac, et écoute d’abord le titre de la page : dit-il clairement où tu es, critère 8.5. Affiche ensuite la liste des régions et saute de l’une à l’autre pour vérifier que la navigation et le contenu principal sont bien posés, critère 9.2. Demande la liste des titres : forme-t-elle un vrai plan, sans saut de niveau, critère 9.1. Fais de même avec les liens : chacun se comprend-il seul, critère 6.1. Et termine par un formulaire : chaque champ annonce-t-il son étiquette, critère 11.1. Cinq écoutes, et tu entends l’essentiel des problèmes de balisage, sans lire une ligne de code.

CTA

À ton tour. Installe un lecteur d’écran gratuit, NVDA ou VoiceOver, et choisis ta page la plus importante, l’accueil ou un parcours clé. Ferme les yeux quelques minutes et parcours-la. Écoute le titre, les régions, la liste des titres, la liste des liens, et un formulaire si la page en contient. Note tout ce qui sonne faux ou vide. Puis analyse la page pour repérer et prioriser les corrections, sur RGAA Checker point com. Écouter son site une fois, c’est ne plus jamais le concevoir tout à fait pareil. À bientôt pour la prochaine expérience.

Approfondir dans le guide

Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.

D’autres épisodes qui abordent des critères proches, dans d’autres séries.

Structure et titres
Épisode 7Bases RGAA2 minEn ligne
Arrête d’écrire « Cliquez ici »
Épisode 9RGAA en pratique6 minEn ligne
ARIA : quand ne pas l’utiliser
Épisode 6RGAA en pratique5 minEn ligne

Passer à l’action

La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.

Analyser un site Guide RGAA