Aperçu lecteur d’écran
Pour un lecteur d’écran, une page est une longue phrase. Entrez une adresse pour obtenir cette phrase sous forme de transcription, écoutez-la avec une voix de votre appareil et repérez les éléments annoncés sans nom.
De deux dimensions à une seule
Avec les yeux, vous saisissez une page d’un seul coup : logo en haut à gauche, menu sur la largeur, article au milieu, colonne latérale à droite. La parole ne sait pas faire « d’un seul coup ». Un lecteur d’écran comme NVDA, JAWS, VoiceOver ou TalkBack parcourt le HTML dans l’ordre du code source et lit un élément à la fois, avec le rôle de l’élément avant son texte : « titre niveau 2, Tarifs », « lien, Nous joindre », « champ de saisie, E-mail, obligatoire ».
Personne n’écoute tout cela du début à la fin. Les utilisateurs expérimentés naviguent par type. Une touche saute au titre suivant, une autre liste tous les liens de la page, une autre va droit au repère principal. Pour eux, le rôle et le nom de chaque élément forment donc toute l’interface. Un bouton évident à l’écran mais sans texte est annoncé « bouton » et c’est tout ce qu’ils entendent.
Comment la transcription est construite
Notre serveur télécharge la page une fois et parcourt le <body> comme le fait un logiciel d’assistance. Le <title> de la page vient en premier, puisque c’est la première chose lue à l’ouverture d’une page. Ensuite, chaque élément devient une ligne :
- Repères : banner, navigation, main, complementary, content info, search, plus les régions et formulaires nommés.
- Titres avec leur niveau, liens avec leur destination, boutons avec leur état (développé, réduit, enfoncé).
- Champs de formulaire avec leur type et leur état : « case à cocher, non cochée », « liste déroulante », « champ de saisie, e-mail, obligatoire ».
- Images, cadres, listes avec leur nombre d’éléments et tableaux avec leur nombre de lignes et de colonnes.
Nous déterminons le nom de chaque élément dans l’ordre qu’utilisent les navigateurs : aria-labelledby, puis aria-label, puis la source native (alt, <label>, contenu textuel), puis title. Tout ce qui porte hidden, aria-hidden="true" ou un display:none en ligne est écarté, de même que le contenu d’un <details> fermé. Les images avec alt="" sont ignorées et comptées comme décoratives.
Appuyez sur Écouter et le moteur vocal de votre navigateur lit les lignes. Les rôles sont dits en anglais. Le contenu est lu avec une voix qui correspond à l’attribut lang de la page quand votre appareil en a une et la voix change pour les passages marqués d’un lang propre.
Ce que signifient les alertes
| Alerte | Ce qu’entend l’auditeur | Correction |
|---|---|---|
| sans alt | « Image sans étiquette », parfois suivie du nom du fichier | Ajoutez un texte alt, ou alt="" si l’image est décorative |
| lien vide, sans nom | « Lien » ou « bouton » tout seul | Un texte visible, un alt sur l’icône, ou aria-label |
| sans étiquette | « Champ de saisie » sans question | <label for="…"> relié à l’id du champ |
| placeholder seul | Une indication qui n’est peut-être pas lue du tout | Une vraie étiquette à côté du champ |
| texte vague, texte répété | « En savoir plus » cinq fois, chacun menant ailleurs | Nommez la destination dans le lien |
| saute un niveau, vide | Un plan avec des trous | Passez de h2 à h3, jamais directement à h4 |
| sans titre, sans en-têtes | « Cadre » ; des valeurs de tableau sans leur colonne | title sur l’<iframe> ; des cellules <th> |
Une alerte rouge signifie que l’élément n’a aucun nom. Une alerte ambre signifie qu’il en a un, mais que ce nom n’aide pas. Le résumé signale aussi une langue de page absente, un <h1> absent et un repère principal absent et il indique combien d’éléments précèdent le contenu principal. Si ce nombre est élevé, chaque visite de chaque page commence par la même longue récitation de votre menu.
Trois façons d’utiliser les filtres
- Sélectionnez Titres et lisez seulement cette liste. Elle devrait servir de table des matières de la page.
- Sélectionnez Liens. Chaque ligne doit avoir un sens sans la phrase qui l’entoure.
- Sélectionnez Champs et boutons, fermez les yeux et appuyez sur Écouter. Vous devriez pouvoir dire ce que chaque contrôle attend de vous.
Sélectionnez n’importe quelle ligne pour relancer la lecture à partir de là. Le curseur de vitesse vous donne une idée du rythme que choisissent les utilisateurs réguliers, souvent bien au-dessus d’une parole normale.
Une approximation, avec des lacunes connues
La transcription vient du HTML tel que le serveur l’a envoyé. Nous n’exécutons pas JavaScript et n’appliquons pas les feuilles de style : le contenu ajouté par script manque donc et le contenu masqué par une classe CSS est quand même lu. La durée d’écoute est une estimation fondée sur environ 170 mots par minute. Les très longues pages s’arrêtent à 1 200 éléments. Chaque vrai lecteur d’écran a aussi son propre vocabulaire et ses propres raccourcis : testez donc avec au moins l’un d’eux avant une mise en ligne. NVDA est gratuit sur Windows et VoiceOver est fourni avec macOS et iOS.
Questions fréquentes
Est-ce la même chose qu’un test avec NVDA ou VoiceOver ?
Non. Cet outil montre l’ordre, les rôles et les noms dont part un lecteur d’écran et c’est là que se trouvent la plupart des problèmes. Il ne reproduit pas les comportements interactifs comme l’ouverture de menus, les annonces en direct ou le déplacement du focus vers une boîte de dialogue. Servez-vous-en pour trouver vite les problèmes, puis confirmez avec un vrai lecteur d’écran.
Pourquoi la voix lit-elle ma page avec le mauvais accent ?
Soit la page ne déclare pas de langue avec <html lang="…">, soit votre appareil n’a aucune voix installée pour cette langue. La ligne d’état au-dessus de la transcription indique quelle voix est utilisée. Les vrais lecteurs d’écran se comportent de la même façon.
Pourquoi une partie du texte de ma page manque-t-elle dans la transcription ?
Il a probablement été ajouté par JavaScript après le chargement de la page, ou il se trouve dans un élément <details> fermé ou dans un conteneur aria-hidden. Nous ne lisons que le HTML livré par le serveur.
Que doit annoncer un lecteur d’écran pour un logo ?
Le nom de l’organisation et, si le logo est un lien, sa destination : alt="Acme, page d’accueil". N’écrivez pas « logo » tout seul et n’omettez pas l’alt, sinon le lien est annoncé par son nom de fichier ou son adresse.
Combien de liens avant le contenu principal, c’est trop ?
Il n’y a pas de limite fixe, car un lien d’évitement et un élément <main> permettent de les sauter d’une seule touche. Sans ces deux éléments, tout ce qui dépasse une poignée d’éléments devient fatigant dès la troisième page.