WCAG 3.1.1 et 3.1.2 : gérer l'attribut lang correctement

L'attribut lang : ce qu'il fait réellement

L'attribut lang sur l'élément html est la déclaration maître pour les navigateurs et les technologies d'assistance. Sa présence détermine la prononciation par la synthèse vocale, le choix des jeux de caractères, et parfois les règles typographiques (césure, guillemets). Sans cet attribut, un lecteur d'écran appliquera la langue par défaut de l'OS, souvent inadéquate : du français lu avec une voix anglaise devient incompréhensible, même pour une personne voyante qui testerait la synthèse vocale.

Bien choisir le code BCP 47 : fr, en, fr-FR, en-US

La norme BCP 47 uniformise l'identification des langues. Pour 99 % des cas, fr ou en suffisent. N'ajoutez une variante régionale (fr-CA, en-US, es-MX) que si la prononciation ou le vocabulaire diffèrent réellement. Vérifiez vos codes via le registre IANA plutôt que d'improviser. La règle d'or : être aussi spécifique que nécessaire, sans ajouter de bruit qui ne sert pas vos utilisateurs.

Annoter les passages en langue étrangère (3.1.2)

Le critère 3.1.2 (AA) impose d'identifier tout passage en langue différente au sein du contenu. Utilisez l'attribut lang sur le conteneur qui englobe le texte étranger : HTML : <span lang="en">To be or not to be</span>, hypothesis levée par l'auteur en 1604. Les termes courants passés dans l'usage local (podcast, week-end, design) ne nécessitent pas d'annotation : ils sont prononcés correctement par la synthèse vocale française standard.

Multilingue : gérer le lang dans une SPA et au changement de route

Dans une application monopage (React, Vue, Svelte), le changement de route ne recharge pas le document. Il faut donc mettre à jour dynamiquement l'attribut lang de l'élément html à chaque navigation. En Next.js, cela passe par le head (next/head) ou le metadata API d'App Router. Oublier cette mise à jour est l'erreur la plus fréquente : l'utilisateur navigue vers la version UK du site mais la synthèse vocale reste sur le français.

Tester la déclaration de langue côté serveur et côté CMS

L'audit doit vérifier le DOM final rendu, pas le code source. Côté serveur : votre template doit injecter la variable de langue dynamiquement (doc.lang = siteLang). Côté CMS : si vous utilisez un CMS headless (Sanity, Strapi, Contentful), la donnée de langue doit être exposée dans l'API (champ site_locale) et consommée par le front pour alimenter l'attribut lang. Un CMS mal configuré peut dériver l'attribut de la langue système de l'éditeur.

Questions fréquentes

Que se passe-t-il si le html n'a pas d'attribut lang ?

Le moteur de rendu ne peut pas déterminer la langue. Les lecteurs d'écran basculent sur la langue par défaut de l'OS de l'utilisateur, ce qui produit des prononciations incohérentes sur du contenu important. C'est un échec critère 3.1.1 qui tombe en niveau A.

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

Dans App Router, déclarez la langue dans le metadata de chaque layout ou page : export const metadata = { metadataBase: new URL('https://...'), other: { 'html-attrs': { lang: 'fr' } } }. Pour les changements de route côté client, mettez à jour document.documentElement.lang via useEffect.

Une citation anglaise dans un texte français doit-elle être annotée ?

Oui, dès lors qu'elle représente plusieurs mots ou plus. Utilisez <span lang="en">To be or not to be, that is the question</span>. Le lecteur d'écran basculera son dictionnaire de synthèse pour cette portion uniquement.

Comment un CMS headless gère-t-il la langue ?

Le CMS expose la langue via son API (champ site_locale dans Contentful ou langue dans Strapi). Le front lit cette valeur et l'injecte dans l'attribut lang lors de la génération de la page ou lors du rendu initial côté serveur.

Quels codes BCP 47 sont les plus courants ?

Pour la France et l'Europe : fr, en, de, es, it, nl. Pour les variantes régionales utiles : en-GB (anglais britannique), en-US (anglais américain), fr-CA (français canadien). Le format standard est [langue]-[région] selon ISO 639-1 + ISO 3166-1.

Quel lien avec le SEO international ?

L'attribut lang est un signal fort pour les moteurs de recherche : il aide à indexer le contenu dans la bonne langue. Il complète mais ne remplace pas les balises hreflang (link rel=alternate hreflang=x), qui gèrent les relations entre pages de langues différentes via les sitemaps et la balise link du head.

L'EAA privé change-t-elle la donne côté accessibilité ?

Oui. Sans attribut lang correctement tenu ni mis à jour à chaque changement de route, la conformité WCAG 3.1.1 et 3.1.2 n'est pas remplie, ce qui expose la structure à des sanctions DGCCRF : 7 500 € pour un premier manquement, 15 000 € en cas de récidive.

L'EAA privé impose-t-elle des exigences sur le multilingue ?

Depuis le 28 juin 2025, l'EAA impose le niveau WCAG 2.1 AA aux services numériques privés. Les critères 3.1.1 et 3.1.2 en font partie. Une SPA qui oublie de mettre à jour l'attribut lang au changement de route échoue à la conformité et expose aux sanctions DGCCRF : 7 500 € à 15 000 €.