Le problème

Le critère 8.7 du RGAA exige que chaque changement de langue dans le contenu d'une page soit indiqué dans le code source via l'attribut lang sur l'élément HTML contenant le texte en langue étrangère. Sans cette indication, les lecteurs d'écran utilisent les règles de prononciation de la langue principale de la page (définie sur la balise html) pour lire le texte étranger, ce qui produit une prononciation incorrecte et souvent incompréhensible. Quand un lecteur d'écran configuré en français rencontre un mot anglais comme « newsletter » sans indication de changement de langue, il le prononce avec les règles phonétiques françaises : « neu-slè-tère » au lieu de « niouzlèteur ». Pour des mots isolés et courants, l'utilisateur peut deviner le sens. Mais pour des phrases entières en anglais, en allemand, en espagnol ou dans toute autre langue, le résultat est totalement incompréhensible. Imaginez une citation en anglais lue avec un accent français exagéré, chaque son déformé par des règles de prononciation inadaptées : c'est ce que vivent les utilisateurs de lecteurs d'écran quand les changements de langue ne sont pas balisés. Ce problème est très répandu car de nombreux sites web mélangent les langues sans y prêter attention. Les termes techniques anglais dans un article en français (cloud computing, machine learning, responsive design), les citations en langue étrangère, les noms de produits ou de marques, les adresses et noms de lieux étrangers, les blocs de contenu bilingue : tous ces cas nécessitent un balisage de langue. La correction est simple : encapsuler le texte en langue étrangère dans un span (ou tout autre élément approprié) avec l'attribut lang correspondant au code de langue ISO 639-1. Par exemple, <span lang="en">newsletter</span> indique au lecteur d'écran de basculer en prononciation anglaise pour ce mot.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Impact sur les utilisateurs

Pour un utilisateur de lecteur d'écran, un texte en langue étrangère lu avec la mauvaise prononciation est au mieux gênant, au pire incompréhensible. Les synthèses vocales modernes sont très fidèles à la phonétique de chaque langue, ce qui signifie qu'elles appliquent rigoureusement les règles françaises à un texte anglais : le résultat est une bouillie sonore. Les personnes aveugles qui ne connaissent pas la langue étrangère en question sont encore plus impactées car elles ne peuvent pas compenser en devinant les mots grâce à leur connaissance de la langue. Les utilisateurs de plages braille sont aussi affectés : la table braille utilisée dépend de la langue déclarée. Un texte anglais affiché avec la table braille française peut produire des caractères incorrects. En résumé, le balisage de langue est un petit effort technique qui a un impact significatif sur la qualité de l'expérience pour les utilisateurs de technologies d'assistance.

Exemple de code

Avant (non conforme)
<html lang="fr">
<body>
  <p>Abonnez-vous à notre newsletter pour rester informé.</p>
  <blockquote>
    "The power of the Web is in its universality."
    — Tim Berners-Lee
  </blockquote>
  <p>Notre solution utilise le machine learning
    et le cloud computing pour analyser vos données.</p>
  <footer>
    <p>Made with love in Paris</p>
  </footer>
</body>
</html>
Après (conforme)
<html lang="fr">
<body>
  <p>Abonnez-vous à notre <span lang="en">newsletter</span>
    pour rester informé.</p>
  <blockquote lang="en">
    "The power of the Web is in its universality."
    — Tim Berners-Lee
  </blockquote>
  <p>Notre solution utilise le <span lang="en">machine learning</span>
    et le <span lang="en">cloud computing</span>
    pour analyser vos données.</p>
  <footer>
    <p><span lang="en">Made with love</span> in Paris</p>
  </footer>
</body>
</html>

Questions fréquentes

Doit-on baliser chaque mot anglais courant (email, web, blog) ?
Non. Les mots d'emprunt qui sont passés dans l'usage courant du français et figurent dans les dictionnaires français (email, web, blog, marketing, design) n'ont pas besoin d'être balisés. Ils sont prononcés de manière compréhensible par les synthèses vocales françaises. Balisez les mots et expressions qui ne sont pas d'usage courant en français ou qui forment des phrases complètes en langue étrangère.
Comment indiquer la langue d'un lien dont le texte est en anglais ?
Ajoutez l'attribut lang sur le lien ou sur un span interne : <a href="/terms" lang="en">Terms of Service</a>. Si seule une partie du lien est en anglais, encapsulez cette partie dans un span : <a href="/terms">Conditions — <span lang="en">Terms of Service</span></a>. L'attribut hreflang indique la langue de la page cible, pas la langue du texte du lien.
Quels sont les codes de langue à utiliser ?
Utilisez les codes ISO 639-1 à deux lettres : fr pour le français, en pour l'anglais, de pour l'allemand, es pour l'espagnol, it pour l'italien, pt pour le portugais, ar pour l'arabe, zh pour le chinois, ja pour le japonais. Pour des variantes régionales, ajoutez le code pays : en-US, en-GB, pt-BR, zh-CN.
L'attribut lang est-il important pour le référencement ?
L'attribut lang sur la balise html aide les moteurs de recherche à comprendre la langue principale de la page. Les changements de langue internes (span lang="en") sont moins critiques pour le SEO mais contribuent à la qualité globale du balisage sémantique, que les moteurs de recherche valorisent. C'est surtout un enjeu d'accessibilité, pas de référencement.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit