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
- Les titres deviennent une table des matières. Un utilisateur de lecteur d'écran saute très souvent d'un titre à l'autre pour se repérer, sans lire le texte entre les deux — un peu comme vous survolez une page avec les yeux. Si les titres ne sont pas de vrais titres HTML hiérarchisés (H1 puis H2 puis H3, sans en sauter), cette table des matières s'effondre.
- Les liens s'écoutent hors contexte. Beaucoup de lecteurs d'écran permettent de lister tous les liens d'une page d'un coup, sans le texte autour. Une liste de dix liens qui disent tous « en savoir plus » ne dit plus rien du tout, sortie de son paragraphe.
- Le silence est un bug. Une confirmation qui s'affiche visuellement (« message envoyé ! ») mais qui n'est jamais annoncée vocalement laisse l'utilisateur dans le doute : le formulaire a-t-il seulement fonctionné ?
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 pageVoir aussi : tester votre site sans souris.