Il est important sur une page web d’indiquer clairement la langue du contenu. Les informations données sur la ou les langues du contenu seront utiles pour les outils d’indexation (moteurs de recherche), les outils de traduction automatique ou encore ceux de synthèse vocale. Par exemple, un lecteur d’écran a besoin de connaitre la langue du contenu pour pouvoir le lire correctement, quand cette langue diffère de ses paramètres par défaut.
Indiquer la langue de traitement
On commencera par veiller à ce que chaque page HTML ait un attribut lang sur l’élément racine, qui indique la langue principale de la page. Mettons que notre page est en français:
<html lang="fr">
Ensuite, pour chaque contenu dont la langue diffère de celle indiquée sur l’élément racine, on va utiliser l’attribut lang pour indiquer le changement de langue. L’attribut peut être placé sur un élément qui existe déjà dans la structure HTML (un lien, un item de liste, un paragraphe, un titre…), ou bien on peut rajouter un élément div ou span pour englober le contenu dont on veut indiquer la langue:
<blockquote>
<p>
Ça va plus du tout. J’ai plus envie de boire ni de manger.
J’ai plus envie de me peigner.
J’suis limite <span lang="en">nervous breakdown</span>.
</p>
<blockquote>
<p>
<cite lang="en">Blade Runner</cite> est une adaptation du roman
<cite lang="en">Do Androids Dream of Electric Sheep?</cite>
de Philip K. Dick.
</p>
(Le code à utiliser pour une langue donnée est standardisé. On utilise des codes ISO 639-1 sur deux lettres. Voir aussi l’article Language Codes extrait de Building Accessible Websites de Joe Clark.)
Styles CSS en fonction de la langue
Une fois qu’on a une information précise sur la langue des contenus dans le code HTML, on peut, si on le souhaite, exploiter cette information en CSS. Tout se joue au niveau des sélecteurs CSS. On va pouvoir utiliser deux mécanismes:
-
la pseudo-classe
:lang() - ou un sélecteur d’attribut.
Lorsqu’un élément HTML possède un attribut lang, la valeur de cet attribut est valable pour cet élément, mais aussi pour tous ses enfants et descendants tant que cette information n’est pas contredite par un autre attribut lang. Ainsi, si j’ai une page entièrement en japonais, je peux écrire <html lang="ja"> et tous les éléments de la page seront considérés par le navigateur comme étant en japonais.
Ce mécanisme explique le fonctionnement de la pseudo-classe :lang (CSS 2.1), qui permet de sélectionner des éléments en fonction de leur langue, que ces éléments aient un attribut lang ou pas:
q { quotes: '"' '"'; }
q:lang(fr) { quotes: '«\00A0' '\00A0»'; }
q:lang(en) { quotes: '“' '”'; }
À l’inverse, les sélecteurs d’attributs (CSS 2.1) seront moins puissants… mais plus précis et parfois utiles. Par exemple, si on a une liste d’articles (élément HTML5 article) avec un attribut lang sur chaque article pour indiquer clairement sa langue, on pourra utiliser cet attribut un peu comme une classe:
#news > article[lang=de] {
background-image: url(flag-de.png);
}
#news > article[lang=it] {
background-image: url(flag-it.png);
}
Spécifier la langue primaire du document
Jusqu’ici on a parlé de langue de traitement avec l’attribut lang. Il existe aussi une méta-donnée qui porte sur l’ensemble du document: l’en-tête HTTP Content-Language.
Cette méta-donnée correspond à la langue primaire du document, c’est à dire la langue du public visé. Par exemple, un site gouvernemental français ou un site de commerce en ligne qui dessert uniquement la France pourront déclarer:
Content-Language: fr-FR
Si le site concerne avant tout un public belge francophone:
Content-Language: fr-BE
Tandis qu’un site d’actualités internationales en espagnol utilisera:
Content-Language: es
Certains sites peuvent aussi déclarer plusieurs langues (en général deux). C’est un cas assez rare car Content-Language ne sert pas à décrire un site multilingue dans son intégralité ou, à l’inverse, à recenser chacune des langues présentes dans la page. Pour déclarer deux langues primaires, il faut que la page mélange fortement deux langues, par exemple si elle propose un contenu en deux langues sur une même page plutôt que sur deux pages séparées.
Lectures complémentaires
- Voir et modifier les en-têtes HTTP (astuce sur Alsacréations)
- Spécifier la langue d’un document (X)HTML (Openweb)
Commentaires
Très pratique, merci. ;)
Merci, chose importante en accessibilité que je ne soupçonnait même pas.
Merci Florent pour ces rappels qui serviront à plus d'un :)
Quant à moi j'ai une question par rapport à la dernière partie : par exemple, sur un site suisse alémanique, on utilise comme valeur de content-language "de-ch" ? tout comme "fr-ch" pour un site romand ? Le Suisse alémanique diffère apparemment de façon notable avec l'Allemand "courant", d'où cette question… ;)
Après pour pousser le vice, on peut se poser la même question pour un site dédié à l'occitan, ou au breton par exemple… Même si je doute qu'il y ait un code ISO pour ces langues régionales…
Ah ben déjà j'ai trouvé la réponse à ma deuxième question : BR pour Breton, et OC pour occitan \o/
Simple, efficace, merci!
EDIT par Felipe : et un ban pour un lien dans les commentaires
Par rapport à la question de audrasjb, concernant les variantes de langues (en-us, de-ch).
Joe Clark en parle dans son bouquin, dont Florent cite un lien vers un extrait. A t-on une idée de prise en charge des navigateurs par rapports à ces variantes de langues ?
Je cite :
"You must not assume, however, that browsers or devices will be able to understand or represent anything beyond the first dash."
J'en conclue que html lang="en-uk", va être interprété en "en" mais peut-être pas aussi en "uk". Quelqu'un a t-il des précisions à ce sujet ?
«J'en conclue que html lang="en-uk", va être interprété en "en" mais peut-être pas aussi en "uk". Quelqu'un a t-il des précisions à ce sujet ?»
Ma préconisation serait de tester. :)
Test rapide dans Firefox 4: en CSS, :lang(xx) et :lang(xx-YY) marchent comme on peut s’y attendre. Si un contenu a pour langue "en-UK", les sélecteurs :lang(en) ET :lang(en-UK) permettent de l’atteindre, mais pas :lang(en-US). À tester dans les autres navigateurs mais ça ne devrait pas poser de problème à un navigateur qui prétend supporter CSS 2.1 (IE8 notamment).
Pour les synthèses vocales, ça va dépendre des langues qu’elles supportent, je suppose.
Merci de ta réponse.
Pour info, je suis tombé sur une page du w3c qui présente un test sur le rendu de la fonte des navigateurs en fonction du paramètre de langue. Cette page date de 2007.
http://www.w3.org/International/tests/results...
<cite>Par exemple, un site gouvernemental français ou un site de commerce en ligne qui dessert uniquement la France pourront déclarer:
<code>Content-Language: fr-FR</code>
</cite>
Je ne pense pas que la deuxième partie (en majuscule) ne corresponde au pays du public visé sinon ça ne s’appellerait pas "lang" ou "content-language" mais plutôt quelque chose comme "zone" ou "country".
En fait je pense que ça précise sur les différentes déclinaison (souvent légères) d'une langue.
par exemple en fr-FR on dit "quatre-vingts dix" alors qu'en fr-BE on dit "nonente"
autre exemple en en-US couleur se dit "color" alors qu'en en-UK c'est "colour"
d'autre exemples pour l'anglais :
http://en.wikipedia.org/wiki/American_and_Bri...
Bon, bien sure les différence entre le français français et le français belge sont minimes mais il y en a surement plus avec le français québécois (fr-CA)
il y a surement des langue pour lesquelles les différences sont assez importante pour que la compréhension soit difficile.
cela peut aussi être important pour les robots :
- moteurs de recherche
- synthèse vocale
- correcteur orthographique