Universally traduit le texte qui décrit vos médias, pas les médias eux-mêmes. Le texte alternatif, les titres et les légendes sont traduits dans toutes les langues ; l'image ou la vidéo servie reste la même.
Le même fichier est servi dans toutes les langues. Traitez donc tout ce qui est intégré dans une image comme intraduisible et conservez le texte traduisible en HTML. Une exception mérite d'être connue : le texte à l'intérieur d'une balise <svg> inline est traduit.
Ce qui est traduit
Texte alternatif des images
L'attribut alt des balises <img> est automatiquement traduit. C'est important à la fois pour l'accessibilité (lecteurs d'écran) et pour le SEO (les moteurs de recherche utilisent le texte alternatif pour comprendre les images).
<!-- Original -->
<img src="/hero.jpg" alt="Team working together in the office">
<!-- Translated (Spanish) -->
<img src="/hero.jpg" alt="Equipo trabajando juntos en la oficina">
Attributs de titre
L'attribut title de n'importe quel élément (images, liens, etc.) est traduit. C'est le texte de l'infobulle qui apparaît lorsque vous survolez un élément.
<!-- Original -->
<img src="/chart.png" title="Quarterly revenue chart">
<!-- Translated (German) -->
<img src="/chart.png" title="Vierteljährliches Umsatzdiagramm">
Texte alternatif de l'image Open Graph
Les balises méta og:image:alt et twitter:image:alt sont traduites afin que les aperçus des réseaux sociaux affichent des descriptions d'images accessibles dans la bonne langue.
Légendes d'images
Tout texte rendu en HTML près des images, tel que les éléments <figcaption>, les paragraphes de légende ou le texte superposé, est traduit comme un contenu de page normal.
Ce qui n'est PAS modifié
Fichiers image
La source de l'image (src) n'est pas modifiée, donc le même fichier est servi dans toutes les langues. Le texte intégré dans une image, comme une bannière indiquant « Bienvenue », fait partie de l'image et n'est pas traduit. Il n'y a pas de substitution de média par langue, donc une bannière avec du texte doit être gérée dans votre propre balisage : servez vous-même une image différente par langue, ou déplacez le texte hors de l'image et placez-le en HTML par-dessus.
Vidéo et audio
Les sources vidéo, les fichiers audio et les médias intégrés (YouTube, Vimeo, etc.) ne sont pas modifiés. Les sous-titres ou les légendes intégrés dans les lecteurs vidéo ne sont pas traduits.
Images d'arrière-plan
Les images d'arrière-plan CSS ne sont pas affectées. Tout texte intégré dans les images d'arrière-plan reste dans la langue d'origine.
Texte dessiné sous forme de tracés, ou dans un SVG externe
Un SVG référencé en tant que fichier, et des lettres dessinées sous forme de tracés plutôt que de texte, ne peuvent pas être traduits. Déplacez ce texte en HTML par-dessus le graphique s'il doit changer par langue.
Le texte à l'intérieur d'un <svg> inline est un cas différent : lorsque le SVG contient un élément <text>, ses mots sont traduits comme tout autre texte sur la page, et le balisage, les tracés et les attributs qui les entourent sont laissés tels quels. Ajoutez class="notranslate" au <svg> s'il doit rester dans la langue source.
Meilleures pratiques
Utilisez les règles de glossaire pour les descriptions d'images de marque. Si votre texte alternatif contient des termes de marque qui doivent rester en anglais (par exemple, « MacBook Pro sur un bureau »), ajoutez une règle de glossaire « Conserver » pour le nom de la marque. Voir Règles de glossaire.
Évitez le texte dans les images. Utilisez des superpositions de texte HTML au lieu d'intégrer du texte dans les images. Cela garantit que le texte est traduisible et est meilleur pour le SEO.
Inclure toujours du texte alternatif. Chaque image significative doit avoir un attribut alt. Universally le traduit automatiquement, améliorant l'accessibilité dans toutes les langues.
Utiliser des légendes en HTML. Encapsulez les légendes d'image dans <figcaption> ou des éléments HTML similaires plutôt que de les placer à l'intérieur de l'image elle-même.