Universally traduz o texto que descreve sua mídia, não a mídia em si. O texto alternativo, os títulos e as legendas são traduzidos em todos os idiomas; o arquivo de imagem ou vídeo exibido permanece o mesmo.
O mesmo arquivo é exibido em todos os idiomas, portanto, trate qualquer texto gravado em uma imagem como intraduzível e mantenha o texto traduzível em HTML. Uma exceção que vale a pena saber: o texto dentro de um <svg> inline é traduzido.
O Que é Traduzido
Texto Alternativo da Imagem
O atributo alt em tags <img> é traduzido automaticamente. Isso é importante tanto para acessibilidade (leitores de tela) quanto para SEO (mecanismos de busca usam texto alternativo para entender imagens).
<!-- 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">
Atributos de Título
O atributo title em qualquer elemento (imagens, links, etc.) é traduzido. Este é o texto da dica que aparece ao passar o mouse sobre um elemento.
<!-- Original -->
<img src="/chart.png" title="Quarterly revenue chart">
<!-- Translated (German) -->
<img src="/chart.png" title="Vierteljährliches Umsatzdiagramm">
Alternativo da Imagem Open Graph
As meta tags og:image:alt e twitter:image:alt são traduzidas para que as prévias de mídias sociais exibam descrições de imagem acessíveis no idioma correto.
Legendas de Imagem
Qualquer texto renderizado em HTML perto de imagens, como elementos <figcaption>, parágrafos de legenda ou texto sobreposto, é traduzido como conteúdo normal da página.
O Que NÃO É Alterado
Arquivos de Imagem
A origem da imagem (src) não é modificada, portanto, o mesmo arquivo é exibido em todos os idiomas. O texto gravado em uma imagem, como um banner escrito "Bem-vindo", faz parte da imagem e não é traduzido. Não há troca de mídia por idioma, então um banner com texto nele precisa ser tratado em sua própria marcação: exiba uma imagem diferente por idioma você mesmo, ou mova o texto para fora da imagem e para o HTML sobre ela.
Vídeo e Áudio
Fontes de vídeo, arquivos de áudio e mídias incorporadas (YouTube, Vimeo, etc.) não são modificados. Legendas ou descrições incorporadas em players de vídeo não são traduzidas.
Imagens de Fundo
Imagens de fundo CSS não são afetadas. Qualquer texto gravado em imagens de fundo permanece no idioma original.
Texto desenhado como caminhos, ou em um SVG externo
Um SVG referenciado como arquivo, e letras desenhadas como caminhos em vez de texto, não podem ser traduzidos. Mova esse texto para o HTML sobre o gráfico se ele precisar mudar por idioma.
Texto dentro de um <svg> inline é um caso diferente: onde o SVG carrega um elemento <text>, suas palavras são traduzidas como qualquer outro texto na página, e a marcação, os caminhos e os atributos ao redor deles são deixados sozinhos. Adicione class="notranslate" ao <svg> se ele precisar permanecer no idioma original.
Melhores Práticas
Use regras de glossário para descrições de imagens de marca. Se o seu texto alternativo contiver termos de marca que devem permanecer em inglês (por exemplo, "MacBook Pro em uma mesa"), adicione uma regra de Glossário Manter para o nome da marca. Veja Regras de Glossário.
Evite texto em imagens. Use sobreposições de texto em HTML em vez de gravar texto em imagens. Isso garante que o texto seja traduzível e melhor para SEO.
Sempre inclua texto alternativo. Toda imagem significativa deve ter um atributo alt. Universally o traduz automaticamente, melhorando a acessibilidade em todos os idiomas.
Use legendas em HTML. Envolva as legendas das imagens em <figcaption> ou elementos HTML semelhantes em vez de colocá-las dentro da própria imagem.