Universally traduce il testo che descrive i tuoi media, non i media stessi. Testo alternativo, titoli e didascalie vengono tradotti in ogni lingua; l'immagine o il file video fornito rimane lo stesso.
Lo stesso file viene fornito in ogni lingua, quindi considera tutto ciò che è incorporato in un'immagine come non traducibile e mantieni il testo traducibile in HTML. Un'eccezione vale la pena di saperla: il testo all'interno di un <svg> inline viene tradotto.
Cosa viene tradotto
Testo alternativo dell'immagine
L'attributo alt nei tag <img> viene tradotto automaticamente. Questo è importante sia per l'accessibilità (screen reader) che per la SEO (i motori di ricerca utilizzano il testo alternativo per comprendere le immagini).
<!-- 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">
Attributi Title
L'attributo title su qualsiasi elemento (immagini, link, ecc.) viene tradotto. Questo è il testo del tooltip che appare quando si passa il mouse sopra un elemento.
<!-- Original -->
<img src="/chart.png" title="Quarterly revenue chart">
<!-- Translated (German) -->
<img src="/chart.png" title="Vierteljährliches Umsatzdiagramm">
Alt Immagine Open Graph
I meta tag og:image:alt e twitter:image:alt vengono tradotti in modo che le anteprime dei social media visualizzino descrizioni delle immagini accessibili nella lingua corretta.
Didascalie Immagine
Qualsiasi testo renderizzato in HTML vicino alle immagini, come gli elementi <figcaption>, i paragrafi di didascalia o il testo sovrapposto, viene tradotto come normale contenuto della pagina.
Cosa NON viene modificato
File Immagine
L'origine dell'immagine (src) non viene modificata, quindi lo stesso file viene fornito in ogni lingua. Il testo incorporato in un'immagine, come un banner che dice "Benvenuto", fa parte dell'immagine e non viene tradotto. Non c'è uno scambio di media per lingua, quindi un banner con testo al suo interno deve essere gestito nel tuo markup: fornisci tu stesso un'immagine diversa per ogni lingua o sposta il testo dall'immagine all'HTML sopra di essa.
Video e Audio
Le origini video, i file audio e i media incorporati (YouTube, Vimeo, ecc.) non vengono modificati. I sottotitoli o le didascalie incorporati nei lettori video non vengono tradotti.
Immagini di sfondo
Le immagini di sfondo CSS non vengono interessate. Qualsiasi testo incorporato nelle immagini di sfondo rimane nella lingua originale.
Testo disegnato come tracciati, o in un SVG esterno
Un SVG referenziato come file e il testo disegnato come tracciati anziché come testo non possono essere tradotti. Sposta quel testo nell'HTML sopra la grafica se deve cambiare per lingua.
Il testo all'interno di un <svg> inline è un caso diverso: dove l'SVG contiene un elemento <text>, le sue parole vengono tradotte come qualsiasi altro testo sulla pagina, e il markup, i tracciati e gli attributi circostanti vengono lasciati invariati. Aggiungi class="notranslate" all'<svg> se deve rimanere nella lingua di origine.
Best Practice
Utilizza le regole del glossario per le descrizioni delle immagini del marchio. Se il tuo testo alternativo contiene termini del marchio che dovrebbero rimanere in inglese (ad esempio, "MacBook Pro su una scrivania"), aggiungi una regola del glossario Keep per il nome del marchio. Vedi Regole del glossario.
Evita il testo nelle immagini. Utilizza sovrapposizioni di testo HTML invece di incorporare testo nelle immagini. Ciò garantisce che il testo sia traducibile e migliore per la SEO.
Includi sempre testo alternativo. Ogni immagine significativa dovrebbe avere un attributo alt. Universally lo traduce automaticamente, migliorando l'accessibilità in tutte le lingue.
Usa didascalie in HTML. Racchiudi le didascalie delle immagini in <figcaption> o elementi HTML simili anziché inserirle nell'immagine stessa.