Vous êtes à : Blog > Jour 23 - Les langues

Jour 23 - Les langues

Comment gérer les langues de manière accessible dans une page web ?

Ce que j’ai fait :

Ce que j’ai appris

Indiquer la langue principale de la page

Pour déclarer la langue par défaut d’une page web, il faut toujours utiliser un attribut lang sur la balise <html>. Cette langue sera héritée par tous les autres éléments. Par exemple, pour une page en français :

<html lang="fr">

L’attribut lang est renseigné par un code de deux (parfois trois) lettres :

  • fr pour le français
  • en pour l’anglais
  • es pour l’espagnol

Les valeurs permises sont disponibles sur cette page listant les différents codes standards(lien externe).

Signaler les changements de langue

Directement dans le contenu

Il peut arriver qu’un site contienne des mots dans une langue différente de la langue principale déclarée dans la balise <html>. Dans ce cas, afin de permettre aux technologies d’assistance de les vocaliser correctement, ils doivent être signalés avec l’attribut lang. Par exemple :

<h2 lang="en">Web Content Accessibility Guidelines</h2>

Si aucune balise n’encadre directement l’élément concerné par le changement de langue, il est alors nécessaire d’ajouter une balise <span> ou <div> et de renseigner son attribut lang. Par exemple :

<p>J'ai installé l'extension <span lang="en">I don't care about cookies</span> sur mon navigateur.</p>

Le changement de langue n’a pas à être déclaré pour :

  • des noms propres
  • des mots d’origine étrangère intégrés couramment dans la langue principale, comme par exemple parking ou podcast

Dans des attributs

Les changements de langue concernent tous les contenus, y compris les valeurs de certains attributs comme title ou alt. Il n’est pas possible d’indiquer des changements de langue directement dans un attribut, dans ce cas le changement de langue est indiqué sur l’élément qui contient l’attribut. Par exemple :

<img src="/share.jpg" lang="en" alt="Share" />

Il peut arriver que le contenu d’un élément et son attribut soient rédigés dans des langues différentes. C’est par exemple le cas lorsqu’un site propose différentes langues. Le site du W3C en donne un exemple dans son article Que faire si le contenu d’un élément et son attribut sont dans des langues différentes ?(lien externe).

Le texte du lien montre la langue de la page cible, en utilisant la langue de la page cible (ici l’espagnol), mais un attribut title associé donne une information dans la langue de la page actuelle (ici le français) :

<span title="Version espagnole"><a lang="es" href="qa-html-language-declarations.es">Español</a></span>

Enfin lorsque l’attribut contient plusieurs passages de texte dans des langues différentes, il n’est pas possible de les indiquer et le critère d’accessibilité devient donc non applicable.

Indiquer la langue d’un lien

Lorsqu’une page contient un lien vers une autre page, rédigée dans une langue différente de la langue sur le site en cours, il est possible de l’indiquer grâce à l’attribut hreflang. Par exemple :

<p>Retrouvez les bonnes pratiques sur le <a href="http://www.w3.org" hreflang="en">site du W3C (en anglais)</a>.</p>

Sur mon téléphone, Talkback ne vocalise pas l’attribut hreflang mais peut-être une indication est-elle fournie par d’autres lecteurs d’écran ? A tester.