Lecteur d'écran : testez votre site et écoutez-le

Mazen Gharbi se souvient d'une promotion Angular, douze développeurs, et d'un profil qui l'a marqué. Parmi eux, un développeur non-voyant. « C'était le meilleur profil de la formation. Il arrivait à récupérer l'information et à avancer dans les TP tout aussi vite que les autres. Mais je le voyais parfois galérer sur certains sites, parce qu'il n'arrivait pas à trouver l'information qu'il recherchait, car ce n'était pas accessible. »

Cet étudiant utilisait un lecteur d'écran pour naviguer sur le web. Bien plus qu'un simple outil de confort, c'était son seul moyen d'accéder aux contenus numériques. Les difficultés qu'il rencontrait ne provenaient pas de ses capacités, mais de la manière dont les sites web avaient été conçus et développés.

Un lecteur d'écran ne voit pas votre site. Il lit ce que votre code en dit. Dix minutes d'écoute suffisent à un dirigeant pour comprendre ce qu'un audit mettra des jours à documenter. Par contre, elles ne remplacent ni l'audit, ni l'utilisateur réel.

Qu'est-ce qu'un lecteur d'écran et comment s'en sert-on ?

Un lecteur d'écran est un logiciel qui transforme le contenu d'une page en synthèse vocale ou en braille. Il lit la structure : les titres, les liens, les boutons, les images, les formulaires. Pas le rendu visuel.

La plus grande différence reste tout de même la manière de naviguer. Contrairement à une personne voyante, qui peut parcourir visuellement la page pour repérer les informations, une personne non-voyante s'appuie, quant à elle, sur la structure du site pour s'orienter. Elle peut passer d'un titre à l'autre, explorer les liens ou accéder directement aux champs d'un formulaire. Pour cela, elle utilise la navigation au clavier sur ordinateur et des gestes spécifiques sur mobile, avec l'aide d'un lecteur d'écran.

C'est pour cela que la conception d'un site web joue un rôle important dans son accessibilité. Des titres mal hiérarchisés, des liens peu explicites comme « cliquez ici » ou « en savoir plus », ou encore des boutons dépourvus de noms accessibles peuvent rapidement compliquer la navigation et rendre certaines fonctionnalités difficiles, voire impossibles à utiliser.

« Je préfère aborder les personnes avec respect et naturel, sans porter sur elles un regard de pitié. Pour moi, les considérer comme tout le monde, c'est avant tout leur parler de la même manière, sans faire de différence. »

Face à cet étudiant, Mazen n'a pas réduit ses exigences. Il a changé une habitude : verbaliser ce qu'il écrivait au tableau, dire à voix haute ce qu'il montrait à l'écran.

Quel lecteur d'écran choisir pour tester votre site ?

Il n'existe pas de lecteur d'écran universellement meilleur qu'un autre. Le choix dépend avant tout des outils et des habitudes de navigation de vos utilisateurs.

Les trois outils de référence sont NVDA, VoiceOver et TalkBack. NVDA est gratuit et open source, disponible sous Windows. VoiceOver est intégré aux appareils Apple, sur Mac comme sur iPhone. TalkBack est l'équivalent sur Android.

Pour évaluer efficacement l'accessibilité de votre site, il est recommandé de réaliser des tests sur ordinateur et sur mobile. Les modes de navigation et les outils utilisés peuvent varier selon les appareils. Pour vous aider à débuter, voici comment activer les principaux lecteurs d'écran.

NVDA sur Windows : Ctrl+Alt+N pour lancer le lecteur d'écran, si ce raccourci a été activé lors de l'installation ; NVDA+Q puis Entrée pour quitter. VoiceOver sur Mac : Cmd+F5, ou maintenir Commande et appuyer rapidement trois fois sur Touch ID sur les appareils compatibles. VoiceOver sur iPhone/iPad : triple-clic sur le bouton latéral ou principal, si VoiceOver est associé au raccourci Accessibilité dans les réglages. TalkBack sur Android : maintenir simultanément les deux boutons de volume, si ce raccourci est activé dans les réglages d'accessibilité. Les raccourcis peuvent varier selon le système, l'appareil et la configuration.

Ce que vous allez entendre

Lancez votre lecteur d'écran, ouvrez votre page d'accueil, et écoutez.

La synthèse vocale va lire quelque chose. Ce quelque chose dépend entièrement de ce que votre code a prévu de lui dire.

Image sans texte alternatif pertinent : le lecteur d'écran peut annoncer un nom de fichier peu informatif ou ne fournir aucune information utile sur l'image. L'utilisateur risque de manquer une information importante. Lien « cliquez ici » : son intitulé ne permet pas de comprendre sa destination lorsqu'il est consulté isolément — notamment dans la liste des liens que l'utilisateur peut parcourir avec son lecteur d'écran. Bouton sans nom accessible : le lecteur d'écran peut annoncer qu'il s'agit d'un bouton sans préciser l'action qu'il déclenche. Page sans titres structurés : l'utilisateur ne peut pas parcourir facilement les différentes sections à l'aide de la navigation par titres, ce qui rend plus difficile le repérage de l'information recherchée.

« On ne s'en rend pas compte, mais c'est naturel. Pour nous, c'est normal de voir une image, on la comprend tout de suite. »

Ces défauts ne sont pas visibles. Ils sont audibles. Une demi-heure d'écoute les rend concrets d'une façon qu'aucun rapport ne remplacera face à un comité de direction. C'est pour cela que Mazen Gharbi insiste : « La première sensibilisation est importante pour se mettre dans la peau des personnes avec des besoins spéciaux : voir comme elles voient, entendre comme elles entendent, et voir un site comme elles le voient. »

Ce qu'un test seul ne vous dira pas

Votre page passe le test. Les titres sont là, les liens ont des noms, les images ont des descriptions. Est-ce que votre site est accessible pour autant ?

Pas nécessairement, pour une raison simple : vous connaissez votre page. Vous savez où se trouve le menu, à quoi sert chaque section, dans quel ordre lire les informations. L'utilisateur, lui, la découvre. Il ne sait pas ce qui l'attend, il ne peut pas anticiper la structure, il navigue dans l'inconnu.

C'est pour combler cet écart que Le Code fait intervenir, dans certaines de ses formations, des personnes en situation spécifique. Rémunérées pour une intervention de trente minutes à une heure, elles décrivent en direct ce qu'elles perçoivent d'un site, ce qui fonctionne, ce qui les force à rebrousser chemin. « On a l'utilisateur devant nous. » Ce que vous apprenez en face d'un utilisateur réel ne s'apprend pas autrement.

Un lecteur d'écran ne voit pas votre site. Il lit ce que votre code en dit. Et ce qu'il dit, vous pouvez l'entendre dès cette semaine, avec un outil gratuit ou déjà installé sur votre machine.

« Ça ne vient pas en plus. Ça doit être une manière de réfléchir. »

Écouter son site n'est pas une case à cocher avant la mise en ligne. C'est une habitude à chaque mise en ligne. Commencez par votre page d'accueil.