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 fonctionNous 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 
Euh, un peu hors sujet, mais comment fais tu pour voir dans ton analytic que Chrome a traduis ta page ?
Merci
Hello,
Tu peux aller sur ton compte Google Analytics, dans la barre latérale de gauche tu vas dans « Contenu » > « Contenus du site » > « Pages »
Là tu as toutes tes pages visitées, dans le formulaire de recherche juste au dessus de la liste, tape : « rurl=translate » et valide par la touche Entrée.
Normalement ça devrait t’afficher les pages traduites. Je ne sais pas s’il y a plus simple…
Hmm… L’attribut n’a pas l’air de passer à la validation
Bon, ça se complique si on a un lien avec un attribut title du genre « Voir tous les articles de Pierre ».
Merci pour l’article, Geof
Merci pour ton retour d’expérience.
Effectivement l’attribut
title(etaltje pense) est impacté par l’attributtranslate. Mais il est possible d’imbriquer les éléments pour attribuer letranslatesur un élément sans attribut titre.Concernant la validation au validateur, je t’avoue ne pas avoir testé mais l’erreur ne m’étonne pas. Il va falloir attendre ^^
Donc tu me suggère de faire
?
#lol
Raaaa mais non ! :p
Mais c’est vrai qu’il y a quelques contraintes quand même
En parlant de Pierre, quand on n’en a plus un p’tit coup de « rock on » et ça repart \o/
(pardon pour ce commentaire inutile)