Ce qu’on voit
« Français », « English », « Deutsch » : trois libellés affichés chacun dans sa propre langue, une pratique reconnue comme la plus claire pour l’utilisateur, plutôt qu’une traduction de chaque nom dans la langue courante de la page. Un sélecteur de langue de menu principal construit ainsi, comme celui rencontré sur un site à trois langues, ne signale cependant nulle part dans son balisage que ces trois mots appartiennent à trois langues différentes :
<ul class="lang-switcher">
<li><a href="/fr/">Français</a></li>
<li><a href="/en/">English</a></li>
<li><a href="/de/">Deutsch</a></li>
</ul>
Visuellement, aucun problème n’est perceptible : les trois libellés s’affichent correctement, chacun dans son orthographe propre. Le défaut ne se révèle qu’à l’écoute, avec un lecteur d’écran activé.
Pourquoi c’est un problème
Un navigateur détermine la langue par défaut d’une page à partir de l’attribut lang posé sur la balise <html>, par exemple lang="fr" pour une page en français. Un lecteur d’écran s’appuie sur cette même déclaration pour choisir les règles de prononciation, l’accent et l’intonation appliqués à tout le texte de la page, sauf si un passage précis déclare explicitement une autre langue.
Sur ce sélecteur, aucun des trois liens ne porte de déclaration de langue propre : les trois libellés héritent donc de la langue de la page courante. Sur une page en français, un lecteur d’écran configuré en voix française prononce « English » et « Deutsch » avec les règles de prononciation du français, ce qui produit un résultat difficilement compréhensible à l’oral, y compris pour une personne qui maîtrise ces deux langues à l’écrit.
Ce défaut correspond précisément au critère 3.1.2 des WCAG, intitulé « Langue d’un passage », qui exige de marquer la langue de tout passage de texte qui diffère de la langue déclarée pour l’ensemble de la page. Un sélecteur de langue en constitue l’un des cas d’application les plus fréquents et les plus fréquemment oubliés, précisément parce que le défaut ne se voit jamais à l’écran.
Quoi faire
La correction consiste à ajouter l’attribut lang directement sur chaque lien, avec le code de langue correspondant au libellé qu’il contient, indépendamment de tout autre attribut déjà présent comme href ou hreflang :
<ul class="lang-switcher">
<li><a href="/fr/" lang="fr">Français</a></li>
<li><a href="/en/" lang="en">English</a></li>
<li><a href="/de/" lang="de">Deutsch</a></li>
</ul>
Avec cette correction, un lecteur d’écran change de voix ou de règles de prononciation au moment précis où il atteint chacun des trois liens, prononçant « English » avec un accent anglais et « Deutsch » avec un accent allemand, quelle que soit la langue de la page consultée.
lang ne remplace ni href ni hreflang
hrefpointe vers l’adresse de la version traduite du contenu, un rôle purement lié à la navigation.hreflangannonce aux moteurs de recherche la langue de la ressource pointée par le lien, un rôle purement lié au référencement.langannonce aux technologies d’assistance la langue du texte affiché à l’intérieur du lien lui-même, un rôle distinct des deux précédents et souvent oublié.
Les trois attributs peuvent coexister sur un même lien sans se contredire, chacun répondant à une question différente : où mène ce lien, dans quelle langue est la page ciblée, et dans quelle langue faut-il prononcer le texte visible de ce lien.
La règle générale à retenir
Tout mot ou passage écrit dans une langue différente de celle déclarée pour la page mérite son propre attribut lang, même s’il ne s’agit que d’un seul mot dans un menu de trois liens.
Ce principe dépasse largement le seul cas du sélecteur de langue : une citation en langue étrangère dans un article, un nom de produit conservé dans sa langue d’origine, ou une adresse postale internationale suivent la même règle dès lors que leur prononciation attendue diffère de celle de la langue principale de la page.
En résumé
Un sélecteur de langue qui affiche chaque nom de langue dans sa propre orthographe, sans attribut lang par lien, reste illisible à l’oral pour un lecteur d’écran, qui applique par défaut les règles de prononciation de la page en cours à des mots qui n’appartiennent pas à cette langue. Ajouter lang sur chaque lien, en complément de hreflang et non à sa place, corrige ce défaut sans toucher au rendu visuel du menu.
