Warning: Undefined variable $author_details in /home/navigation-webcom/navigation-web.com/htdocs/wp-content/plugins/wp-user-profile-avatar/includes/wp-author-box-social-info.php on line 114
Un lecteur d’écran ne voit pas votre site. Il en lit le code, ligne après ligne, et restitue ce qu’il y trouve à la personne qui l’écoute. Voilà pourquoi une refonte graphique ne règle presque jamais le problème d’accessibilité, alors que quelques balises bien posées transforment réellement l’expérience de navigation. Plus de 2 milliards de personnes vivent avec une forme de déficience visuelle, selon l’OMS, et beaucoup d’entre elles naviguent au clavier plutôt qu’à la souris, en s’appuyant sur cette lecture vocale pour se repérer.
Ce qu’un lecteur d’écran annonce vraiment à son utilisateur
Un lecteur d’écran est un logiciel conçu pour lire à haute voix tout le contenu visible à l’écran, ou pour le traduire en braille sur un dispositif dédié. Mais réduire son travail à une simple synthèse vocale passe à côté du sujet.
Le logiciel ne parcourt pas la page comme un humain qui balaie une mise en page des yeux : il annonce des blocs, des niveaux, des rôles. Quand il tombe sur un titre de niveau 2, il dit « titre de niveau 2 » avant de lire le texte. L’utilisateur sait alors qu’il change de section. Ces indications forment la carte du site pour quelqu’un qui ne voit rien.
La navigation se fait donc par sauts. On passe de titre en titre, mais aussi de lien en lien, de formulaire en formulaire. Un non-voyant expérimenté traverse une page en quelques secondes s’il est bien structurée.
Il met plusieurs minutes à s’y perdre si elle ne l’est pas. Le fameux « skip to content » ajouté en haut de page n’est pas un gadget : c’est la porte d’entrée de quelqu’un qui ne veut pas réécouter le menu pour la centième fois.
Le texte alternatif entre dans la même logique. Une image sans attribut alt est annoncée comme « image » et rien d’autre, ce qui laisse un trou dans la compréhension. Une image avec un alt vide est ignorée volontairement, ce qui est parfois le bon choix pour un élément purement décoratif.
Cette distinction entre alt vide et alt absent échappe à la plupart des débutants. Elle provoque des erreurs en série sur les sites vitrines, notamment quand un CMS injecte un alt générique sans que personne ne s’en aperçoive.
Le détail qui change la lecture d’un lien
Prenons le cas le plus fréquent. Un lien intitulé « cliquez ici » ne dit rien à personne hors contexte, et le lecteur d’écran peut afficher tous les liens de la page à la suite, hors de leur phrase. L’utilisateur entend alors une liste de « cliquez ici », « en savoir plus », « ici », sans savoir où chacun mène. Remplacer ces formules par un libellé qui décrit la destination règle le problème en une minute de travail.
Ce réflexe rejoint ce qu’on observe sur les interfaces vocales, où la formulation d’un intitulé conditionne toute la compréhension : la dc-studio.net consacre d’ailleurs un long guide à ce sujet. Un lien doit se suffire à lui-même, lu seul, sans le paragraphe qui l’entoure. Autrement dit, il se conçoit comme une phrase autonome.
D’autres éléments comptent tout autant dans cette restitution vocale, et ils se corrigent tous dans le HTML. Leur point commun : ils agissent sur ce que le logiciel annonce à voix haute, pas sur ce que l’œil perçoit. Un site peut donc sembler impeccable et rester une impasse sonore.
- Le niveau des titres, qui doit descendre sans sauter d’étape : un h2 suivi d’un h4 casse le plan annoncé.
- Les formulaires, dont chaque champ doit porter un label relié par son attribut for, sinon l’utilisateur entend « zone de saisie » sans savoir quoi y écrire.
- Faut-il mettre un alt sur une icône de réseau social ? Si elle sert de lien, oui, et il doit nommer le réseau.
- La langue de la page, déclarée en tête de document, parce qu’une mauvaise prononciation rend un texte pénible à suivre même quand il est bien écrit.
- Les tableaux de données, dont chaque colonne mérite un en-tête relié aux cellules, faute de quoi la lecture vocale perd toute cohérence dès la deuxième ligne.
Pourquoi le visuel n’est presque jamais le coupable
Contraste trop faible, texte trop petit, animations agressives : ces problèmes existent, mais ils concernent les malvoyants qui gardent une vision partielle, pas les utilisateurs de lecteurs d’écran. Confondre les deux publics mène à des chantiers coûteux pour rien.
Une équipe peut passer des semaines à retravailler une charte graphique et laisser un site parfaitement illisible au clavier. Le contraste qu’on ajuste et le balisage qu’on oublie sont deux chantiers distincts. Le second pèse bien plus lourd dans l’expérience réelle d’un utilisateur non-voyant.
La vraie priorité tient dans trois choses que personne ne voit à l’écran : la hiérarchie des titres, la clarté des liens, la présence des textes alternatifs. Un site visuellement daté mais bien balisé se parcourt sans friction. Un site magnifique construit en divs empilés, sans titres ni rôles, reste une impasse. Franchement, la deuxième situation est la plus fréquente chez les clients qui viennent demander un audit.
Ce qui complique le diagnostic, c’est qu’un développeur qui voit son écran ne remarque jamais ces manques. Il faut fermer les yeux, littéralement, ou brancher un lecteur d’écran et écouter la page. Cinq minutes d’écoute suffisent à repérer les titres absents et les liens muets.
Des lecteurs d’écran existent sur toutes les plateformes, et les tests se font sur plusieurs d’entre eux. Microsoft Support cite le Narrateur Windows, JAWS et NVDA, et il faut y ajouter VoiceOver sur macOS et iOS, ainsi que TalkBack sur Android. Le code correct fonctionne avec tous. On évite ainsi de régler un problème cinq fois.
Un correctif qui sert aussi aux apprenants et aux dyslexiques
Voilà l’argument qui convainc les équipes réticentes à financer un chantier accessibilité. Un lecteur d’écran n’aide pas seulement les non-voyants. Il sert aux personnes qui apprennent une nouvelle langue et veulent entendre la prononciation d’un mot, à celles qui préfèrent écouter un article plutôt que le lire, et aux utilisateurs atteints de troubles de l’apprentissage comme la dyslexie, pour qui suivre une ligne de texte demande un effort constant.
Un plan de titres propre aide aussi ces publics, et pas seulement à la marge. Une structure claire offre un moyen de retrouver une information sans relire toute la page, ce qui profite à n’importe qui pressé. Le texte alternatif aide l’élève qui cherche une image dans un moteur de recherche. Les libellés de liens explicites facilitent la lecture pour quelqu’un qui décroche au milieu d’un paragraphe.
Le travail demandé n’est donc pas un supplément réservé à une minorité. C’est un gain de clarté pour tous. Un site rangé convertit mieux, se référence mieux, se maintient plus facilement, et son équipe y gagne dès qu’il faut ajouter une page.
L’audit qui prend une heure, pas un mois
Commencez par la structure. Listez tous les titres de la page avec un outil de développement, puis vérifiez qu’ils forment un plan lisible : un seul titre principal, des sections de niveau 2, des sous-sections de niveau 3. Beaucoup de thèmes WordPress truffent leurs gabarits de h3 décoratifs. Le plan devient alors un brouillard. Corriger cela ne touche à aucun pixel visible.
Enchaînez sur les liens. Cherchez les occurrences de « cliquez ici », « en savoir plus », « lire la suite » et remplacez-les par une formulation qui décrit la cible. Profitez-en pour vérifier qu’aucun lien ne se contente d’une icône sans libellé accessible. Ensuite, passez les images en revue : alt descriptif quand l’image porte une information, alt vide quand elle décore, et jamais d’attribut oublié.
Terminez par un test réel, lecteur d’écran ouvert, en naviguant uniquement au clavier. La touche Tab révèle l’ordre de parcours, les raccourcis de titres montrent la structure. C’est souvent là qu’on découvre qu’un menu capte le focus indéfiniment ou qu’un bouton ne se déclenche pas sans souris. Ces bugs ne se voient pas, mais ils bloquent net.
Le vrai coût d’un site muet
Rendre un site accessible aux lecteurs d’écran ne demande pas de refonte, juste de la précision dans le balisage. Titres hiérarchisés, liens qui s’expliquent tout seuls, textes alternatifs posés au bon endroit : trois chantiers qui se traitent en interne, sans budget design.
Le bénéfice dépasse largement le public visé au départ, puisque les apprenants et les personnes dyslexiques y gagnent aussi. La question n’est donc pas de savoir si votre site mérite ce travail, mais combien de visiteurs repartent aujourd’hui sans avoir rien pu lire.
