RGAA 8.1 — Chaque page web est-elle définie par un type de document ?

Langue de la page non définie

Le problème

L'absence de déclaration de la langue de la page signifie que l'attribut `lang` n'est pas défini sur l'élément `<html>`. Le critère RGAA 8.3 (correspondant au WCAG 3.1.1, niveau A) exige que la langue par défaut de chaque page web soit définie par un code de langue valide dans l'élément HTML.

Sans cette déclaration, les lecteurs d'écran ne savent pas dans quelle langue synthétiser la parole. Un lecteur d'écran configuré en français qui rencontre une page sans attribut lang peut tenter de prononcer du texte anglais avec les règles phonétiques françaises, produisant un résultat incompréhensible. De même, un contenu français lu avec un moteur de synthèse vocale anglais devient inintelligible.

Le problème est aggravé sur les sites multilingues où les changements de langue à l'intérieur de la page (un paragraphe en anglais dans une page française) ne sont pas non plus balisés avec l'attribut `lang`. Les outils de traduction automatique des navigateurs utilisent aussi cet attribut pour déterminer s'ils doivent proposer une traduction.

Impact sur les utilisateurs

Pour les utilisateurs de lecteurs d'écran, l'absence de déclaration de langue est immédiatement perceptible : le synthétiseur vocal utilise les mauvaises règles de prononciation, rendant le contenu partiellement ou totalement incompréhensible. Sur un site francophone sans `lang="fr"`, chaque mot est prononcé avec l'accent et les règles phonétiques de la langue par défaut du lecteur d'écran de l'utilisateur.

Cela affecte aussi la traduction automatique du navigateur : sans attribut lang, Chrome, Firefox et Edge ne peuvent pas proposer de traduction et ne savent pas dans quelle langue le contenu est rédigé. Les outils d'analyse de texte, les correcteurs orthographiques et les dictionnaires intégrés aux navigateurs sont également perturbés.

Sur le plan du référencement, Google utilise l'attribut lang comme signal pour le ciblage linguistique. Son absence peut entraîner un mauvais positionnement dans les résultats de recherche géolocalisés.

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

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

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

<!-- Pas d'attribut lang -->
<html>
  <head>
    <title>Mon site</title>
  </head>
  <body>
    <p>Bienvenue sur notre site.</p>
  </body>
</html>

<!-- Langue incorrecte -->
<html lang="en">
  <body>
    <p>Bienvenue sur notre site français.</p>
  </body>
</html>

Après (conforme)

<!-- Langue correctement définie -->
<html lang="fr">
  <head>
    <title>Mon site</title>
  </head>
  <body>
    <p>Bienvenue sur notre site.</p>
    <!-- Changement de langue dans la page -->
    <p lang="en">This section is in English.</p>
  </body>
</html>

Comment Scrutia détecte ce problème

Scrutia vérifie la présence et la validité de l'attribut lang sur l'élément <html> de chaque page auditée. Il s'assure que le code de langue est un code ISO 639 valide (fr, en, es, etc.) et qu'il correspond bien à la langue effective du contenu. Il détecte aussi les passages en langue étrangère à l'intérieur de la page qui ne sont pas balisés avec un attribut lang. Le rapport signale chaque défaut avec un correctif prêt à l'emploi.

Questions fréquentes

Quel code de langue utiliser pour le français ?

Utilisez lang="fr" pour le français. Vous pouvez être plus spécifique avec lang="fr-FR" pour le français de France ou lang="fr-CA" pour le français du Canada, mais lang="fr" est suffisant dans la plupart des cas.

Faut-il baliser les mots étrangers isolés ?

Les mots étrangers passés dans l'usage courant (par ex. « email », « design ») n'ont pas besoin d'être balisés. En revanche, les phrases ou paragraphes entiers dans une autre langue doivent être balisés avec l'attribut lang approprié pour que le lecteur d'écran bascule de synthétiseur vocal.

L'attribut lang affecte-t-il le SEO ?

Oui. Google utilise l'attribut lang comme signal de ciblage linguistique. Combiné avec les balises hreflang pour les sites multilingues, il aide les moteurs de recherche à servir la bonne version de la page aux utilisateurs de chaque langue.

Comment gérer l'attribut lang dans Next.js ?

Dans Next.js avec App Router, l'attribut lang est défini dans le layout racine : <html lang={locale}>. Avec le routeur i18n intégré, il est automatiquement défini en fonction de la locale détectée.

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