Attribut `lang` et lecteurs d’écran
Déclarez la langue de la page et des éléments pour une prononciation correcte.
Attribut `lang` et lecteurs d’écran est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Rôle de l’attribut lang
L’attribut lang déclare la langue du contenu d’un élément au moyen d’une balise de langue BCP-47. Les lecteurs d’écran l’utilisent pour sélectionner le moteur de prononciation et la voix appropriés, tandis que les moteurs de recherche s’en servent pour indexer le contenu par langue.
Définir l’attribut sur l’élément html
Chaque page doit déclarer sa langue principale sur la racine : <html lang="en"> pour l’anglais, <html lang="tr"> pour le turc, <html lang="ja"> pour le japonais. Sans cette déclaration, les lecteurs d’écran utilisent par défaut la configuration système de l’utilisateur et prononcent souvent mal chaque mot.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>Balises BCP-47
Les balises suivent la norme BCP-47 : un code de langue (en, tr, ja), éventuellement une région (en-US, en-GB, zh-Hant, zh-Hans) et, plus rarement, une écriture. Utilisez la balise la plus précise qui soit exacte ; « en » suffit lorsque l’orthographe régionale n’a pas d’importance.
Changements de langue au milieu de la page
Pour une section dans une autre langue, indiquez sa propre langue au moyen de l’attribut lang : <blockquote lang="fr">Bonjour</blockquote>. Le lecteur d’écran change de voix pour cette section et produit une prononciation exacte, même sur les pages multilingues.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>Sélecteurs de langue CSS
CSS peut cibler une langue avec :lang(en) : blockquote:lang(fr)::before { content: "« "; }. Le sélecteur correspond à l’attribut lang de l’ancêtre le plus proche. Utilisez-le pour les conventions typographiques (guillemets, espacements) qui varient selon la langue.
Pourquoi cela compte pour la prononciation
« Live » en anglais et en français ne se prononce pas de la même manière. En allemand, « Wir » se prononce « veer », et non « wear ». Un lecteur d’écran configuré pour l’anglais prononcera mal ces deux mots si vous ne lui indiquez pas que la section environnante est en allemand ou en français.
hreflang pour les langues liées
L’attribut hreflang des liens (<a href="/fr/" hreflang="fr">Français</a>) indique aux moteurs de recherche et aux technologies d’assistance la langue de la page liée. Associez-le aux balises de lien hreflang définies à l’échelle du site pour couvrir entièrement le référencement international.
Détecter la langue de l’utilisateur
JavaScript peut lire les langues préférées de l’utilisateur dans navigator.languages (un tableau de balises BCP-47 classées par ordre de priorité). Utilisez-le pour choisir une langue par défaut ou proposer un changement de langue, mais respectez toujours le choix explicite de l’utilisateur plutôt que la préférence par défaut du navigateur.
Détection côté serveur
L’en-tête de requête HTTP Accept-Language répertorie les préférences linguistiques de l’utilisateur provenant de la configuration du navigateur. Utilisez-le sur le serveur pour envoyer dès la première requête le HTML dans la bonne langue, afin que l’utilisateur voie sa langue avant l’exécution de tout JavaScript.
Plusieurs langues sur une même page
Les articles de Wikipédia, les applications d’apprentissage des langues et les dictionnaires mélangent régulièrement plusieurs langues. Marquez chaque passage avec son propre attribut lang, même lorsqu’il est court. Sans un attribut lang pour chaque section, la voix du lecteur d’écran et les guillemets CSS reviennent aux valeurs par défaut de la page.
Erreurs courantes
Oublier lang sur <html> (très fréquent), utiliser un code de langue incorrect (lang="english" au lieu de lang="en") ou utiliser des codes régionaux alors que la langue seule suffit. Utilisez le validateur du W3C et l’audit d’accessibilité de Lighthouse pour détecter ces problèmes dans l’intégration continue.
Vérification des connaissances
Pourquoi l’attribut lang sur est-il particulièrement important pour les utilisateurs de lecteurs d’écran ?
Résumé
Déclarez la langue de la page sur <html> avec une balise BCP-47 (en, tr, ja, zh-Hant). Indiquez les changements de langue au milieu de la page avec des attributs lang sur les éléments span ou section afin que les lecteurs d’écran changent de voix. CSS :lang() peut appliquer une typographie propre à chaque langue. Définissez toujours lang : cela ne coûte rien et améliore considérablement la prononciation des lecteurs d’écran, le référencement et le ciblage CSS.
Questions Fréquemment Posées
La leçon « Attribut `lang` et lecteurs d’écran » est-elle gratuite ?
Oui — le texte complet de « Attribut `lang` et lecteurs d’écran » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Attribut `lang` et lecteurs d’écran » ?
Déclarez la langue de la page et des éléments pour une prononciation correcte. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Attribut `lang` et lecteurs d’écran » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Attribut `lang` et lecteurs d’écran
- `dir=rtl` pour le texte de droite à gauche
- Les éléments `bdi` et `bdo`
- `charset` et gestion d’Unicode : caractères spéciaux