Normes · WCAG 2.2

SC 3.1.1 Niveau A WCAG 2.0

Langue de la page

Déclarer de façon programmatique la langue humaine par défaut de chaque page — généralement via l'attribut lang sur l'élément html. Les lecteurs d'écran, les afficheurs braille et les outils de traduction l'utilisent pour choisir les règles de prononciation, les profils vocaux et les correspondances de caractères.

Ce que le critère demande

Chaque page web doit déclarer sa langue humaine par défaut d’une manière lisible par la technologie d’assistance. En HTML, cela signifie un attribut lang valide sur l’élément racine <html>, défini avec une balise de langue primaire BCP 47 (en, de, bg, zh-Hans). La valeur doit refléter la langue par défaut réelle du contenu textuel — non la langue du CMS, non le pays de l’hôte.

Une page qui mélange les langues a tout de même une langue par défaut ; les langues secondaires sont gérées par le critère 3.1.2 Langue des parties.

Comment y répondre

  • Ajouter lang à l’élément <html> de chaque page : <html lang="fr">.
  • Utiliser la bonne balise de sous-langue BCP 47. Utiliser fr pour le français générique ; utiliser fr-FR ou fr-BE uniquement si la prononciation régionale est importante.
  • Pour le chinois, distinguer l’écriture : zh-Hans (simplifiée), zh-Hant (traditionnelle).
  • Pour les langues de droite à gauche (arabe, hébreu, persan), associer lang à dir="rtl".
  • Dans React/Next.js/Astro, définir l’attribut dans le modèle de mise en page racine, non dans le corps _document, afin que chaque route l’hérite.
  • Dans les sites multilingues, changer lang par route — ne jamais servir une langue par défaut globale unique aux pages localisées.

Échecs courants

  • lang absent — l’échec le plus courant sur les sites anciens et ceux générés par CMS.
  • lang="" (valeur vide) ou lang="french" — invalide ; seules les balises BCP 47 sont conformes.
  • Toutes les pages codées en dur à lang="en" même lorsque le contenu est en allemand, en français ou en bulgare.
  • Une page française avec lang="en" parce que le modèle CMS est livré avec l’anglais par défaut et que personne ne l’a modifié.
  • lang défini sur <body> au lieu de <html> — accepté par certains outils mais pas l’emplacement canonique.

Pourquoi c’est important

Les lecteurs d’écran utilisent lang pour choisir le bon synthétiseur vocal. Avec la mauvaise langue déclarée, un lecteur d’écran en français lit le texte allemand de façon phonétique — « Schmetterling » donne des syllabes incompréhensibles. Les afficheurs braille l’utilisent pour choisir les tables de contraction de grade 2 correctes. Les fonctionnalités de traduction des navigateurs l’utilisent pour détecter ce qu’il faut traduire. Les moteurs de recherche l’utilisent pour le classement et la génération d’extraits.

Il s’agit d’une correction de 30 secondes qui libère la compréhension pour chaque utilisateur de lecteur d’écran sur la page, et pourtant elle est absente d’une part significative des sites en production. C’est l’un des problèmes les plus cités dans les audits automatisés car il est binaire et facile à détecter.