Repère · Guides

Les lecteurs d'écran, expliqués à quelqu'un qui n'en a jamais utilisé

Si vous n'en avez jamais entendu un fonctionner, voici l'image la plus proche : imaginez qu'on vous lise votre propre site à voix haute, très vite, sans jamais vous montrer l'écran — et que vous ne puissiez avancer que morceau par morceau, avec quelques touches, sans jamais voir l'ensemble d'un coup d'œil. C'est à peu près l'expérience d'un utilisateur de lecteur d'écran (comme NVDA, gratuit, ou VoiceOver, intégré à tous les Mac et iPhone). Et ça change complètement ce qui compte dans un site.

Il ne « voit » pas la page, il traverse le code

C'est le point qui change tout : un lecteur d'écran ne perçoit ni la mise en page, ni les couleurs, ni la taille des titres. Il lit le code HTML dans l'ordre où il apparaît, et annonce ce qu'il reconnaît — « titre de niveau 1 », « lien », « champ de formulaire, requis ». Deux textes qui se ressemblent visuellement (une grosse écriture en gras, par exemple) peuvent être annoncés très différemment selon qu'ils sont codés comme un vrai titre (<h1>) ou juste stylés pour y ressembler. Ce que vous voyez à l'écran et ce que le lecteur d'écran annonce peuvent diverger complètement — et c'est exactement là que se cachent la plupart des problèmes.

Trois choses que ça change concrètement

Ce que vous pouvez tester en cinq minutes, sans rien connaître au sujet

Sur Mac, VoiceOver s'active avec Cmd + F5 (ou dans les Réglages système). Sur Windows, NVDA se télécharge gratuitement. Vous n'avez pas besoin de le maîtriser : lancez-le sur votre page d'accueil, fermez les yeux trente secondes, et écoutez simplement ce qui se dit en premier. Si la première chose que vous entendez est un menu de navigation entier avant le contenu principal de la page, vous venez de découvrir pourquoi un lien « aller au contenu » en tout début de page n'est pas un détail cosmétique.

Ce n'est pas un problème de « minorité »

Il est facile de ranger ce sujet dans la case « accessibilité pour un petit nombre » et de passer à autre chose. Mais un site qui a une vraie hiérarchie de titres, des liens qui disent où ils mènent, et des messages d'état qui s'annoncent, c'est aussi un site plus facile à scanner rapidement pour n'importe qui — y compris pour un moteur de recherche, qui « lit » votre page à peu près de la même façon qu'un lecteur d'écran : dans l'ordre du code, pas dans l'ordre visuel.

Avant de tester au lecteur d'écran vous-même, Repère vérifie automatiquement la hiérarchie des titres, les liens sans nom explicite et les champs sans étiquette — les points qui se remarquent le plus vite une fois qu'on écoute sa page plutôt que de la regarder.

Scanner ma page

Voir aussi : tester votre site sans souris.