« Le lecteur d’écran parle... mais faux »
Pourquoi un simple attribut lang change tout pour les lecteurs d’écran.
Chapitres
- 0:00Situations du quotidien (nouvelle fenêtre, YouTube)
- 0:25La langue de la page (nouvelle fenêtre, YouTube)
- 0:50Une balise html, un attribut (nouvelle fenêtre, YouTube)
- 1:24Un mot anglais dans une phrase française (nouvelle fenêtre, YouTube)
- 1:59Ce que la voix de synthèse entend (nouvelle fenêtre, YouTube)
- 2:31Checklist (nouvelle fenêtre, YouTube)
- 3:02CTA (nouvelle fenêtre, YouTube)
Transcription
Texte intégral de la narration de l’épisode.
Situations du quotidien
Imagine une personne aveugle qui ouvre ton site avec un lecteur d’écran. La voix de synthèse commence à lire, mais quelque chose cloche : ton texte français est prononcé avec un accent anglais, syllabe par syllabe, presque incompréhensible. Le contenu est bon, la mise en page aussi. Le coupable, c’est un seul attribut : la langue déclarée dans le code. Bonne nouvelle, c’est l’une des corrections les plus rapides du RGAA.
La langue de la page
La langue de la page fait partie de la thématique 8 du RGAA, les éléments obligatoires. L’idée tient en deux temps. D’abord, tu déclares la langue principale de la page, une bonne fois, sur la balise html. Ensuite, à chaque fois qu’un passage change de langue, une citation en anglais, un titre d’oeuvre, un mot étranger porteur de sens, tu le signales dans le code. C’est ce qui permet à la voix de synthèse de choisir la bonne prononciation.
Une balise html, un attribut
Commençons par le plus simple. Sur beaucoup de sites, la balise html n’a aucun attribut de langue. Le lecteur d’écran est alors obligé de deviner, et il se trompe souvent, en partant de la langue configurée par l’utilisateur. La correction tient en un seul attribut : lang égale fr. C’est le critère 8.3, la langue par défaut doit être présente. Et attention, le critère 8.4 ajoute une condition : le code doit être valide et pertinent. Écrire lang égale en sur une page française, c’est valide mais faux.
Un mot anglais dans une phrase française
Deuxième temps : les changements de langue ponctuels. Quand tu insères un passage dans une autre langue, tu l’entoures d’un span avec le bon attribut lang. Ici, responsive design est de l’anglais, on écrit lang égale en sur le span. Sans ça, la voix de synthèse le lit avec les règles du français, et le résultat est bancal. C’est le critère 8.7, chaque changement de langue doit être indiqué, et le critère 8.8, avec un code valide et pertinent. Petite nuance importante : les noms propres, et les mots étrangers déjà entrés dans le dictionnaire français, comme week-end, n’ont pas besoin de ce marquage.
Ce que la voix de synthèse entend
Voyons l’effet concret. Prends exactement le même texte français. Avec lang égale en déclaré sur la page, la voix anglaise applique ses règles de prononciation au français : les sons sont déformés, les liaisons cassées, ça devient une bouillie difficile à suivre pendant toute la navigation. Corrige le code en lang égale fr, et la même phrase est lue naturellement. Le contenu n’a pas bougé d’une virgule. Seul l’attribut de langue a changé. Voilà pourquoi ce détail invisible à l’oeil est décisif à l’oreille.
Checklist
Récapitulons en trois réflexes. Premier : ta balise html porte un attribut lang, avec un code valide comme fr ou en. Deuxième réflexe : ce code correspond réellement à la langue du contenu, pas à un copier-coller de gabarit. Troisième réflexe : chaque passage dans une autre langue, s’il est porteur de sens, est entouré d’un span avec sa propre langue. Dernier point pour rester juste : les noms propres et les mots étrangers déjà passés dans le langage courant n’ont pas besoin de marquage.
CTA
C’est probablement l’une des corrections les plus rentables du référentiel : peu d’effort, un vrai gain pour les personnes qui utilisent un lecteur d’écran. Ouvre le code source de ta page d’accueil, vérifie l’attribut lang sur la balise html, puis repère les passages étrangers qui mériteraient un span. Pour analyser une page complète et prioriser tes corrections, rendez-vous sur RGAA Checker point com.
Approfondir dans le guide
Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.
Passer à l’action
La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.