Universally übersetzt den Text, der Ihre Medien beschreibt, nicht die Medien selbst. Alternativtexte, Titel und Bildunterschriften werden in jeder Sprache übersetzt; die Bild- oder Videodatei, die ausgeliefert wird, bleibt dieselbe.
Dieselbe Datei wird in jeder Sprache ausgeliefert. Behandeln Sie daher alles, was in ein Bild eingebrannt ist, als unübersetzbar und bewahren Sie übersetzbaren Text in HTML auf. Eine Ausnahme ist wissenswert: Text innerhalb eines Inline-<svg> wird übersetzt.
Was wird übersetzt
Bild-Alt-Text
Das alt-Attribut für <img>-Tags wird automatisch übersetzt. Dies ist wichtig für die Barrierefreiheit (Bildschirmausleser) und für SEO (Suchmaschinen verwenden Alternativtexte, um Bilder zu verstehen).
<!-- 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">
Titel-Attribute
Das title-Attribut für jedes Element (Bilder, Links usw.) wird übersetzt. Dies ist der Tooltip-Text, der beim Überfahren eines Elements mit der Maus angezeigt wird.
<!-- Original -->
<img src="/chart.png" title="Quarterly revenue chart">
<!-- Translated (German) -->
<img src="/chart.png" title="Vierteljährliches Umsatzdiagramm">
Open Graph Bild-Alt
Die Meta-Tags og:image:alt und twitter:image:alt werden übersetzt, damit Social-Media-Vorschauen zugängliche Bildbeschreibungen in der richtigen Sprache anzeigen.
Bildunterschriften
Jeder Text, der in HTML in der Nähe von Bildern gerendert wird, wie z. B. <figcaption>-Elemente, Bildunterschriften-Absätze oder überlagerter Text, wird wie normaler Seiteninhalt übersetzt.
Was wird NICHT geändert
Bilddateien
Die Bildquelle (src) wird nicht geändert, sodass dieselbe Datei in jeder Sprache ausgeliefert wird. In ein Bild eingebrannter Text, wie z. B. ein Banner mit der Aufschrift „Willkommen“, ist Teil des Bildes und wird nicht übersetzt. Es gibt keinen sprachspezifischen Medienwechsel. Ein Banner mit Text muss daher in Ihrem eigenen Markup behandelt werden: Liefern Sie selbst ein anderes Bild pro Sprache aus oder verschieben Sie den Text aus dem Bild in HTML darüber.
Video und Audio
Videoquellen, Audiodateien und eingebettete Medien (YouTube, Vimeo usw.) werden nicht geändert. Untertitel oder Bildunterschriften, die in Videoplayern eingebettet sind, werden nicht übersetzt.
Hintergrundbilder
CSS-Hintergrundbilder sind nicht betroffen. Jeglicher Text, der in Hintergrundbildern eingebrannt ist, verbleibt in der Originalsprache.
Als Pfade gezeichneter Text oder in einem externen SVG
Eine als Datei referenzierte SVG und Schriftzüge, die als Pfade statt als Text gezeichnet sind, können nicht übersetzt werden. Verschieben Sie diesen Text in HTML über die Grafik, wenn er sich pro Sprache ändern muss.
Text innerhalb eines Inline-<svg> ist ein anderer Fall: Wenn das SVG ein <text>-Element enthält, werden seine Wörter wie jeder andere Text auf der Seite übersetzt, und das Markup, die Pfade und die Attribute darum herum bleiben unverändert. Fügen Sie class="notranslate" zum <svg> hinzu, wenn es in der Quellsprache verbleiben muss.
Bewährte Praktiken
Verwenden Sie Glossarregeln für Beschreibungen von Markenbildern. Wenn Ihr Alternativtext Markentermini enthält, die auf Englisch bleiben sollen (z. B. „MacBook Pro auf einem Schreibtisch“), fügen Sie eine Beibehaltungsregel für den Markennamen hinzu. Siehe Glossarregeln.
Vermeiden Sie Text in Bildern. Verwenden Sie HTML-Text-Overlays anstelle von eingebranntem Text in Bildern. Dies stellt sicher, dass der Text übersetzbar ist und ist besser für SEO.
Fügen Sie immer Alternativtext hinzu. Jedes aussagekräftige Bild sollte ein alt-Attribut haben. Universally übersetzt es automatisch und verbessert so die Barrierefreiheit in allen Sprachen.
Verwenden Sie Bildunterschriften in HTML. Fassen Sie Bildunterschriften in <figcaption> oder ähnliche HTML-Elemente ein, anstatt sie im Bild selbst zu platzieren.