HTML5 – Attribut translate

HTML5 nous apporte l’attribut translate. Cet attribut permet de limiter l’impact d’une traduction par des outils tels que Google Translate en interdisant la traduction de certains contenus.
Ainsi le contenu de votre site web est composé avec davantage de précision. Voyons comment agir et sur quoi appliquer cet attribut.

Définition

Le W3C définit cet attribut translate comme étant :

[…] un attribut à valeurs énumérées* utilisé pour spécifier si les valeurs d’attribut d’un élément et les valeurs textuelles de ses enfants doivent être traduits lorsque la page est localisée, ou si elles doivent rester inchangées.

*c’est à dire qu’il a des valeurs prévues bien précises

Je l’ai résumé dans l’intro, en somme cela vous permet de définir quelles parties de votre document sont traduisibles.

Utilisation

Cet attribut attend des valeurs précises que sont « no », « yes » ou encore une chaine vide (valeur par défaut). La chaine vide ou le « yes » ont valeur équivalente : le contenu sera traduit.
Pour définir un élément comme n’étant pas sujet à traduction, voici comment procéder.

<span translate="no" class="author">Hope</span>

Sur un document définit originellement en anglais et traduit ponctuellement en français, « Hope » ne sera ainsi pas traduit par « Espérer ». Cela permet à l’auteur de conserver son vrai pseudonyme 🙂

Si l’ancre de l’exemple avait été porteuse d’un attribut title ou alt, son contenu n’aurait également pas été traduit, d’après la définition donnée par le W3C.

Quelques exemples

Le pseudo, le nom, le prénom …

C’est le cas de l’exemple précédent : le nom ou pseudonyme d’un auteur, ou le nom d’un programme, par exemple, n’ont a priori pas à être traduits.
Dans les classiques espaces « Auteur » des blogs, il conviendrait d’utiliser systématiquement la valeur no de translate sur l’élément balisant le pseudo de l’auteur.

Article écrit par <a translate="no" class="author" href="/auteur/pierre">Pierre</a>

Ici on part du principe que notre page est en français, le prénom Pierre ne sera pas traduit par Peter lors d’une traduction du français vers l’anglais, grâce à notre intervention.

Cheat mode, transcription, ligne de commande …

Imaginions que vous lisiez des articles en anglais sur un cheat mode pour un jeu, mais que l’article vous semble trop obscure dans sa langue originelle. Hop, un coup de Google translate, et là, c’est le drame, vos codes sont aussi traduits !
Je prends l’exemple d’un code d’un jeu auquel j’ai joué de nombreuses heures (je vous laisse trouver son nom) :

You can also use this code to get a car for the game :<br>
<kbd>HOW DO YOU TURN THIS ON</kbd>

Ceci serait alors traduit par :
Vous pouvez également utiliser ce code pour obtenir une voiture pour le jeu : COMMENT vous activez cette fonction

Nous aurions pu sauver le code simplement en prévoyant le coup :

You can also use this code to get a car for the game :<br>
<kbd translate="no">HOW DO YOU TURN THIS ON</kbd>

Celui-ci n’aurait alors pas été vulgairement traduit.

Attention à l’héritage

Lorsque vous définissez un élément comme n’étant pas traduisible, ses enfants héritent de cet aspect et ne sont eux-mêmes pas traduisibles.
Pour corriger le tir il suffit de re-définir la valeur yes de translate sur les enfants.

<p translate="no">Texte qui ne doit pas être traduit à part
<span translate="yes">cette partie</span> qui peut l'être.</p>

Pour rappel, Google Chrome, qui est de plus en plus utilisé, intègre cet outil de traduction et le propose dès que vous êtes sur une page de langue étrangère (pour votre navigateur).
La traduction de contenu est donc chose courante, je le vois sur mes outils d’analyse sur ce blog, mais bien entendu tout dépend de la cible de votre site internet.

N’hésitez pas à venir me corriger si vous voyez une bêtise 😉