Attribut lang HTML : déclarer la langue de la page et des passages (WCAG 3.1.1 et 3.1.2)

À quoi sert l'attribut lang en HTML pour l'accessibilité

Le W3C explique que les technologies d'assistance comme les navigateurs classiques restituent le texte plus fidèlement lorsque la langue de la page est identifiée. Concrètement, trois mécanismes en dépendent : les lecteurs d'écran chargent les règles de prononciation de la langue déclarée, les navigateurs visuels affichent correctement les caractères et les écritures, et les lecteurs multimédias affichent correctement les sous-titres.

L'objectif du critère 3.1.1 est donc que les auteurs fournissent dans la page les informations dont les agents utilisateurs ont besoin pour présenter correctement le texte et les contenus linguistiques. Le critère 3.1.2 étend cette logique à l'intérieur de la page : chaque passage écrit dans une autre langue peut être présenté avec ses propres règles de présentation et de prononciation, que l'on utilise un navigateur graphique, un lecteur d'écran, une plage braille ou un navigateur vocal.

Le W3C cite un exemple parlant : sans marquage de la langue, une synthèse vocale risque de lire le mot français « voiture » comme « voyture ».

Le W3C cite comme bénéficiaires de ces deux critères :

• Les personnes qui utilisent un lecteur d'écran ou une synthèse vocale.
• Les personnes qui ont des difficultés à lire un texte écrit avec aisance et précision, par exemple pour reconnaître les caractères ou décoder les mots.
• Les personnes ayant certains troubles cognitifs, du langage ou de l'apprentissage qui utilisent un logiciel de synthèse vocale.
• Les personnes qui s'appuient sur les sous-titres des médias synchronisés.

Critère 3.1.1 : déclarer la langue par défaut de la page

La langue humaine par défaut d'une page web est, selon le W3C, sa langue de traitement du texte par défaut. Lorsqu'une page contient plusieurs langues, la langue par défaut est celle qui est la plus utilisée. Si plusieurs langues sont utilisées à parts égales, c'est la première utilisée qui fait office de langue par défaut.

L'exemple donné par le W3C est celui d'une page HTML produite en Allemagne, majoritairement en allemand avec un peu d'anglais : la langue par défaut est l'allemand (de), déclarée par l'attribut lang sur l'élément html. La technique suffisante correspondante est H57, « Utiliser l'attribut de langue sur l'élément HTML ». Pour les documents PDF, la technique PDF16 (entrée /Lang dans le catalogue du document) déclare la langue par défaut ; PDF19, qui indique la langue d'un passage ou d'une expression via l'entrée Lang, figure aussi parmi les techniques suffisantes. Déclarer la langue par défaut dans l'en-tête HTTP (technique SVR5) est seulement une technique recommandée, pas une technique suffisante.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Startseite</title>
  </head>
  <body>
    <!-- contenu majoritairement en allemand -->
  </body>
</html>

Un code de langue valide dans l'attribut lang

Ajouter l'attribut ne suffit pas : sa valeur doit être exploitable. Les règles de test associées au critère 3.1.1 vérifient que la page HTML possède un attribut lang, que cet attribut contient une étiquette de langue valide, que les attributs lang et xml:lang ont des valeurs identiques, et que la sous-étiquette de langue correspond à la langue par défaut. Les deux dernières règles sont encore au statut « proposé ».

Le critère 3.1.2 dispose lui aussi de règles de test : un élément portant un attribut lang doit avoir une étiquette de langue valide, et (règle proposée) la sous-étiquette de langue d'un élément HTML portant lang doit correspondre à la langue de son contenu. Le code de langue d'un passage doit donc lui aussi être une étiquette de langue valide, comme celui de l'élément html.

Les exemples du W3C montrent des codes simples comme de, fr ou es, mais aussi des étiquettes plus précises : un texte chinois translittéré en pinyin peut être marqué zh-Latn-pinyin.

• La page possède un attribut lang sur l'élément html.
• La valeur est une étiquette de langue valide, sans faute de frappe.
• Les valeurs de lang et de xml:lang sont identiques (règle de test proposée).
• La sous-étiquette de langue correspond à la langue par défaut (règle de test proposée).

Critère 3.1.2 : signaler les changements de langue dans la page

Le critère 3.1.2 demande que la langue humaine de chaque passage ou expression puisse être déterminée par programmation. Une expression peut ne compter qu'un seul mot : un mot isolé est donc couvert, sauf s'il relève d'une exception. Le texte sans langue spécifiée hérite de la langue par défaut de la page ; une page entièrement rédigée dans une seule langue satisfait donc automatiquement ce critère.

La technique suffisante est H58, « Utiliser les attributs de langue pour identifier les changements de langue humaine ». L'exemple du W3C : dans une phrase en anglais sur la RDA, l'expression allemande « Treppenwitz der Weltgeschichte » est marquée comme allemande pour que le lecteur d'écran change de règles de prononciation.

Le marquage aide aussi les navigateurs visuels à afficher correctement les écritures, en particulier lors du passage entre langues lues de gauche à droite et de droite à gauche, ou entre alphabets. Il permet en outre au logiciel braille de suivre les changements de langue et d'appliquer les bons codes, et il facilite la consultation de dictionnaires et les futurs outils de traduction automatique.

Voici un balisage illustratif inspiré de cet exemple du W3C (la phrase anglaise est abrégée) :

<p lang="en">…
  <span lang="de">Treppenwitz der Weltgeschichte</span>
…</p>

Les exceptions : noms propres, termes techniques, mots d'usage courant

Le critère 3.1.2 exclut explicitement les noms propres, les termes techniques, les mots de langue indéterminée et les mots ou expressions devenus partie du vocabulaire courant du texte qui les entoure.

Pour les noms propres, le W3C prend l'exemple d'« Albert Camus » dans un document de philosophie en anglais : aucun changement de langue n'est nécessaire. Les termes techniques, souvent laissés tels quels d'une langue à l'autre, sont illustrés par Homo sapiens, Alpha Centauri, hertz ou habeas corpus. Côté vocabulaire courant, « rendezvous » est adopté en anglais, et « podcast » dans une phrase française ne demande aucun marquage.

En cas de doute, le W3C propose une question simple : le mot se prononcerait-il de la même façon dans la langue du texte environnant ? Marquer malgré tout la langue d'origine d'un mot étranger reste une bonne pratique, non obligatoire, qui améliore la prononciation.

Site multilingue : sélecteur de langue et liens

Même pour un objectif de niveau A, le groupe de travail du W3C encourage fortement les développeurs de sites multilingues à suivre le critère 3.1.2. Le cas typique est le sélecteur de langue : dans l'exemple du W3C, chaque lien vers une autre version porte le nom de la langue dans cette langue (« Deutsch », « Italiano », « Français », « 繁體中文 »), avec son propre attribut lang.

Un autre exemple du W3C : un lien dont le titre est en anglais, mais dont le span imbriqué contenant « Español » porte lang="es".

Attention au contrôle : les lecteurs d'écran annoncent des noms accessibles « aplatis », par exemple dans une liste de liens, qui perdent les changements de langue. Déplacer l'attribut lang sur l'élément lui-même peut aider dans certains cas. Comme il s'agit d'une limite des agents utilisateurs, ce n'est pas un échec du critère, mais l'auditeur doit vérifier le balisage et pas seulement la restitution vocale. Le W3C rappelle d'ailleurs que la qualité de prononciation varie selon les lecteurs d'écran et les synthèses vocales.

Pour repérer rapidement un attribut lang manquant ou invalide, vous pouvez lancer un test gratuit avec Conformly, puis activer la surveillance continue pour être alerté si un nouveau gabarit réintroduit l'erreur.

<nav aria-label="Langues">
  <ul>
    <li><a href="/de/" lang="de">Deutsch</a></li>
    <li><a href="/it/" lang="it">Italiano</a></li>
    <li><a href="/fr/" lang="fr">Français</a></li>
  </ul>
</nav>

Questions fréquentes

À lire aussi sur Conformly

• Corriger une langue de page non déclarée
• Corriger un code de langue invalide
• Fiche RGAA 8.3 : langue par défaut

Sources

Article appuyé sur les sources officielles citées en fin de page.

• W3C — Comprendre 3.1.1
• W3C — Comprendre 3.1.2