accessibility

Attribut lang HTML pour lecteurs d'écran

MetricSpot lit l'attribut `lang` sur `<html>`. Sans lui, les lecteurs d'écran choisissent la mauvaise voix et les technologies d'assistance ne peuvent pas changer de langue.

Ce que vérifie ce contrôle

Lit l’attribut lang sur l’élément racine <html>. La valeur doit être une étiquette BCP 47 valide (en, fr-FR, es, pt-BR, etc.).

Pourquoi c’est important

Les lecteurs d’écran comme NVDA, JAWS et VoiceOver utilisent cet attribut pour choisir le bon synthétiseur vocal et la bonne prononciation. Un lang manquant lit un contenu français avec la voix que l’utilisateur a configurée par défaut — souvent anglaise ou espagnole, produisant du charabia. WCAG 3.1.1 en fait une exigence de niveau A ; la loi européenne sur l’accessibilité (en vigueur depuis juin 2025) considère un lang manquant comme un défaut de conformité.

Les moteurs de recherche s’appuient aussi dessus pour la détection de langue, aux côtés de hreflang et des signaux de contenu.

Comment corriger

Définissez l’attribut sur l’élément racine :

<html lang="fr">

Pour les variantes régionales, utilisez une sous-étiquette BCP 47 :

<html lang="fr-FR">  <!-- français de France -->
<html lang="pt-BR">  <!-- portugais brésilien -->
<html lang="zh-Hant"><!-- chinois traditionnel -->

Astro : définissez-le dans src/layouts/BaseLayout.astro :

<html lang={Astro.currentLocale ?? "fr"}>

Next.js (App Router) : dans app/layout.tsx :

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="fr"><body>{children}</body></html>;
}

WordPress : se trouve dans header.php :

<html <?php language_attributes(); ?>>

language_attributes() émet déjà lang="fr-FR" selon Réglages → Général → Langue du site. Ne le surchargez pas en dur.

Pages multilingues : ajoutez lang sur l’élément englobant lorsque le contenu change de langue en cours de page :

<p>Les Anglais l'appellent <span lang="en">software</span>.</p>

C’est ce qui fait que <span lang="en"> est lu avec une voix anglaise au lieu d’écorcher la prononciation.

Si vous servez également plusieurs locales, associez-le aux balises hreflang pour que Google envoie la bonne locale au bon utilisateur.

Questions fréquentes

Quelle est la différence entre lang et xml:lang ?

lang est l’attribut HTML ; xml:lang est son équivalent XHTML/XML. Pour les documents HTML5, utilisez simplement lang. Pour les documents polyglottes (rares aujourd’hui), définissez les deux à la même valeur.

Puis-je omettre lang si je détecte la langue en JavaScript ?

Non. Les lecteurs d’écran analysent le HTML avant l’exécution du JS, et de nombreux utilisateurs de technologies d’assistance désactivent complètement le JS. L’attribut doit figurer dans le HTML statique.

Pourquoi Lighthouse signale-t-il lang="" comme invalide ?

Une chaîne vide n’est pas une étiquette BCP 47 valide. Définissez un vrai code de langue ou supprimez l’attribut (pire — le contrôle échoue toujours). Idem pour lang="default" ou autres valeurs d’espace réservé livrées par certains thèmes CMS.

Sources

Dernière mise à jour 2026-05-11