Lecteur d'écran

Un lecteur d'écran est un logiciel qui convertit le contenu affiché à l'écran en synthèse vocale ou en braille. Il parcourt l'arbre d'accessibilité du navigateur, pas le design, pour restituer la structure de la page aux personnes aveugles ou malvoyantes.

Les utilisateurs expérimentés de lecteurs d'écran naviguent à 300 mots par minute. Si votre page est mal structurée, ils ne ralentissent pas. Ils partent.

#Comment un lecteur d'écran lit votre page

Le lecteur d'écran ne voit ni couleurs, ni mise en page, ni police de caractères. Il interroge l'arbre d'accessibilité que le navigateur construit à partir du HTML. Chaque élément y figure avec un rôle, un nom et un état.

Un <button> apparaît comme « bouton, Enregistrer ». Un <div onclick="save()"> apparaît comme… rien. Le lecteur d'écran l'ignore.

Les trois lecteurs d'écran les plus utilisés, selon l'enquête WebAIM (1 568 répondants) :

• NVDA — gratuit, open source, Windows
• JAWS — payant, Windows, très répandu en entreprise
• VoiceOver — intégré à macOS et iOS, aucune installation requise

L'utilisateur ne lit pas la page de haut en bas comme un œil. Il saute entre les titres, les landmarks, les liens, les champs de formulaire. Le HTML sémantique fournit ces repères. Sans lui, naviguer revient à chercher une information dans un texte plat de 10 000 mots.

#Ce que les développeurs confondent souvent

Lecteur d'écran ≠ synthèse vocale. La synthèse vocale transforme du texte en son, point. Le lecteur d'écran interprète la structure du document — titres, listes, landmarks, états des composants — et utilise la synthèse vocale comme canal de sortie. Sans HTML sémantique, le lecteur d'écran n'a rien à interpréter.

Tester avec un seul lecteur ne suffit pas. NVDA et JAWS ne restituent pas le même contenu de la même façon. Un aria-describedby sera lu automatiquement par l'un, ignoré jusqu'à une action spécifique par l'autre. WebAIM recommande de tester avec au moins deux lecteurs d'écran sur deux navigateurs différents.

Cacher visuellement ≠ cacher du lecteur d'écran. display: none et visibility: hidden suppriment l'élément de l'arbre d'accessibilité. Pour masquer un texte visuellement tout en le rendant accessible, utilisez une classe CSS de type sr-only :

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#En résumé

Un lecteur d'écran lit votre code, pas votre design. HTML sémantique (<nav>, <main>, <h1>–<h6>, <button>) lui donne la structure. ARIA complète ce que le HTML natif ne couvre pas. Testez avec au moins deux lecteurs d'écran — NVDA et VoiceOver sont gratuits.