Universally traduce el texto que describe tus medios, no los medios en sí. El texto alternativo, los títulos y las descripciones se traducen en todos los idiomas; el archivo de imagen o video que se muestra sigue siendo el mismo.
Se muestra el mismo archivo en todos los idiomas, así que considera que cualquier texto incrustado en una imagen no se puede traducir y mantén el texto traducible en HTML. Una excepción que vale la pena conocer: el texto dentro de un <svg> en línea se traduce.
¿Qué se traduce?
Texto alternativo de imagen
El atributo alt en las etiquetas <img> se traduce automáticamente. Esto es importante tanto para la accesibilidad (lectores de pantalla) como para el SEO (los motores de búsqueda usan el texto alternativo para entender las imágenes).
<!-- 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
El atributo title en cualquier elemento (imágenes, enlaces, etc.) se traduce. Este es el texto de la información sobre herramientas que aparece al pasar el cursor sobre un elemento.
<!-- Original -->
<img src="/chart.png" title="Quarterly revenue chart">
<!-- Translated (German) -->
<img src="/chart.png" title="Vierteljährliches Umsatzdiagramm">
Alternativa de imagen Open Graph
Las etiquetas meta og:image:alt y twitter:image:alt se traducen para que las previsualizaciones de redes sociales muestren descripciones de imágenes accesibles en el idioma correcto.
Títulos de imagen
Cualquier texto renderizado en HTML cerca de las imágenes, como los elementos <figcaption>, los párrafos de descripción o el texto superpuesto, se traduce como contenido normal de la página.
Qué NO se cambia
Archivos de imagen
El origen de la imagen (src) no se modifica, por lo que se muestra el mismo archivo en todos los idiomas. El texto incrustado en una imagen, como un banner que dice “Bienvenido”, es parte de la imagen y no se traduce. No hay un intercambio de medios por idioma, por lo que un banner con texto debe manejarse en tu propio marcado: muestra una imagen diferente por idioma tú mismo, o mueve el texto fuera de la imagen y superponlo en HTML.
Video y audio
Los orígenes de video, archivos de audio y medios incrustados (YouTube, Vimeo, etc.) no se modifican. Los subtítulos o las descripciones incrustadas en los reproductores de video no se traducen.
Imágenes de fondo
Las imágenes de fondo CSS no se ven afectadas. Cualquier texto incrustado en las imágenes de fondo permanece en el idioma original.
Texto dibujado como trazados, o en un SVG externo
Un SVG referenciado como archivo, y el texto dibujado como trazados en lugar de como texto, no se puede traducir. Mueve ese texto a HTML sobre el gráfico si necesita cambiar por idioma.
El texto dentro de un <svg> en línea es un caso diferente: donde el SVG contiene un elemento <text>, sus palabras se traducen como cualquier otro texto en la página, y el marcado, los trazados y los atributos a su alrededor se dejan solos. Agrega class="notranslate" al <svg> si debe permanecer en el idioma de origen.
Mejores prácticas
Usa reglas de glosario para las descripciones de imágenes de marca. Si tu texto alternativo contiene términos de marca que deben permanecer en inglés (por ejemplo, “MacBook Pro en un escritorio”), agrega una regla de glosario de Mantenimiento para el nombre de la marca. Consulta Reglas de glosario.
Evita el texto en las imágenes. Usa superposiciones de texto HTML en lugar de incrustar texto en las imágenes. Esto asegura que el texto sea traducible y mejor para el SEO.
Incluye siempre texto alternativo. Cada imagen significativa debe tener un atributo alt. Universally lo traduce automáticamente, mejorando la accesibilidad en todos los idiomas.
Usa subtítulos en HTML. Envuelve los subtítulos de las imágenes en <figcaption> o elementos HTML similares en lugar de colocarlos dentro de la imagen.