Alt-Text zu Bildern hinzufügen

Wir wissen, dass das Design deiner E-Mail wichtig ist, und Bilder sind ein großer Teil dessen, was das Design ausmacht. Aber in einigen Fällen kann es vorkommen, dass einzelne Abonnent*innen die Bilder in deinen Kampagnen nicht sehen können. Hier kommt der Alt-Text ins Spiel.

In diesem Artikel erfährst du mehr über alternativen Text für Bilder und darüber, wie du Alt-Text zu deinen E-Mails hinzufügen kannst, damit alle Abonnent*innen sich ernst genommen fühlen.

Über Alt-Text

Alt-Text – oder Alternativtext – ist eine kurze Beschreibung eines Bildes in deiner E-Mail, die angezeigt wird, wenn sich Abonnent*innen deine Bilder nicht anzeigen lassen können. Dies kann passieren, wenn sie Bilder in ihrem E-Mail-Client deaktiviert haben oder deine E-Mail mit einem Screenreader lesen.

Alt-Text hilft deinen Abonnentinnen zu verstehen, welchen Wert ein Bild zu deiner Botschaft beiträgt, oder informiert sie darüber, dass ein Bild rein dekorativ ist und ignoriert werden kann. Es mag wie eine Nebensächlichkeit erscheinen, aber Alt-Text ist ein sehr wichtiges Abgebot für Abonnentinnen, die deine Bilder nicht sehen können. Daher solltest du ihn für jedes Bild in deiner E-Mail einfügen.

Alt-Text und Barrierefreiheit

Alt-Text ist besonders für Menschen wichtig, die Bildschirmleseprogramme verwenden und gehört zur etablierten Best Practice für die Barrierefreiheit von E-Mails.

Ohne Alt-Text teilt eine Vorlese-Anwendung den Abonnent*innen mit, dass dort ein Bild vorhanden ist, ohne das jene erfahren, welche Informationen das Bild enhält. Wenn du mehr über die Best Practices für Barrierefreiheit erfahren möchtest, solltest du den Artikel Barrierefreiheit im E-Mail-Marketing lesen.

Alt-Text und Bildanzeige

Wenn deine Bilder nicht in den Posteingängen deiner Abonnentinnen angezeigt werden, kann das daran liegen, dass sie möglicherweise von deren E-Mail-Client blockiert werden. Aus Sicherheitsgründen schalten viele E-Mail-Clients Bilder standardmäßig ab, sodass Abonnentinnen die Bildanzeige manuell aktivieren müssen. Wenn deine Abonnent*innen die Bildanzeige blockiert haben, sehen sie anstelle deines Bildes den Alt-Text.

So sieht Alt-Text aus, wenn die Bildanzeige blockiert sind.

Dieses Bild hat keinen Alt-Text.

Dieses Bild hat einen Alt-Text.

Tipps für effektiven Alt-Text

Hier sind ein paar Tipps, die du beachten solltest, um einen angemessenen und effektiven Alt-Text zu schreiben.

• Fasse dich kurz
  Alt-Text sollte leicht lesbar und verständlich sein, damit deine Abonnent*innen mit dem Rest deiner Nachricht fortfahren können. Beschränke dich auf einen oder zwei Sätze.
• Achte auf die richtige Zeichensetzung
  Screenreader orientieren sich beim Vorlesen an der Zeichensetzung für die Pausensetzung an den richtigen Stellen. Daher ist eine richtige Zeichensetzung in deinem Alt-Text so wichtig.
• Verwende keine Anführungszeichen
  Das Alt-Attribut, das dem rohen HTML-Code deiner E-Mail hinzugefügt wird, markiert mithilfe von Anführungszeichen Anfang und Ende deines eigentlichen Alt-Texts. Zusätzliche Anführungszeichen führen dazu, dass der HTML-Code nicht ordnungsgemäß funktioniert.
• Wiederhole Text, der in Bildern erscheint
  Es ist immer am besten, wenn sich wichtige Informationen im Haupttext deiner Nachricht anstatt in einem Bild finden. Falls ein Bild jedoch Text enthält, wiederhole diese Informationen im Alt-Text, damit deine Abonnent*innen sie nicht verpassen.
• Wiederhole nicht die Bildunterschriften
  Bildunterschriften werden von Screenreadern vorgelesen und sind auch bei blockierter Bildanzeige sichtbar. Wiederhole daher die Bildunterschriften nicht in deinem Alt-Text. Alt-Text sollte Informationen über dein Bild liefern, die die Abonnent*innen nicht allein aus der Bildunterschrift entnehmen können.
• Berücksichtige den Kontext
  Beim Verfassen von Alt-Text für ein Bild spielt der Kontext die entscheidene Rolle. In welcher Beziehung steht das Bild zu dem Inhalt, der es umgibt? Frage dich, welche Informationen deine Abonnent*innen bereits aufgrund der umgebenden Inhalte über das Bild haben könnten.
• Kennzeichne dekorative Bilder
  Wenn dein Bild rein dekorativ ist, gib dies kurz in deinem Alt-Text an, sodass deine Abonnent*innen das entsprechende Bild überspringen und mit dem Rest deiner Nachricht weitermachen können. So könntest du z. B. einfach „Dekoratives Bild“ schreiben.
• Teste deine Inhalte
  Manche E-Mail-Clients zeigen keinen Alt-Text für ein verlinktes Bild sowie keinen Alt-Text an, der die Bildbreite überschreitet. Sende Test-E-Mails an verschiedene E-Mail-Clients und deaktiviere die Bildanzeige, um herauszufinden, wie dein Alt-Text angezeigt wird.
  Vorschau und Test deiner E-Mail

Alt-Text zu Bildern hinzufügen

Es gibt verschiedene Möglichkeiten, Bilder in Mailchimp mit Alt-Text zu versehen, und die Methode, die du verwendest, hängt davon ab, wo sich dein Bild befindet.

• Über einen Bildblock
• Über einen Textblock
• In Vorlagen mit benutzerdefiniertem Code

Über einen Bildblock

So fügst du Alt-Text zu einem Bild in einem beliebigen Bild-Inhaltsblock, wie beispielsweise Image (Bild), Image Group (Bildgruppe), Image Card (Bildkarte) oder Image + Caption (Bild + Bildunterschrift), hinzu:

1. Klicke im Bereich Inhalt der E-Mail-Checkliste auf Design bearbeiten.
   
2. Klicke im Schritt Design auf den Bildblock, mit dem du arbeiten möchtest.
3. Klicke im Bearbeitungsbereich auf Alt.
   
4. Gib im Feld Image Alt-Text (Bild-Alt-Text) den Alt-Text für dein Bild ein.
5. Klicke auf Update (Aktualisieren).
   
6. Klicke auf Speichern und schließen.

Jetzt ist alles startklar. Jetzt werden deine Abonnenten deine Inhalte nicht mehr verpassen, auch wenn sie deine Bilder nicht sehen können.

Über einen Textblock

Um Alt-Text zu einem Bild in einem Textinhaltsblock hinzuzufügen, befolge diese Schritte.

1. Klicke im Bereich Inhalt der E-Mail-Checkliste auf Design bearbeiten.
   
2. Klicke im Schritt Design auf den Textblock, der das gewünschte Bild enthält.
3. Doppelklicke auf das Bild, um das Content-Studio zu öffnen.
   
4. Klicke auf Show Image Style Options (Bild-Stiloptionen anzeigen).
   
5. Gib im Feld Alt text (Alt-Text) den Alt-Text für dein Bild ein.
6. Klicke auf „Save & Insert Image“ (Bild speichern und einfügen).
   
7. Klicke auf Save & Close (Speichern und schließen).

Gute Arbeit! Auch wenn Abonnenten deine Bilder nicht sehen können, verpassen sie jetzt deine Inhalte nicht mehr.

In Vorlagen mit benutzerdefiniertem Code

Wenn du deine Vorlagen selbst erstellst, musst du für jedes Bild, das du verwendest, ein Alt-Attribut einfügen. Füge das Alt-Attribut innerhalb des Bild-Tags ein und gib deinen Alt-Text ein.

Dein Code sollte in etwa so aussehen:

<img alt="Woman holding a small clay pot stamped with the Potted Planter logo." align="none" height="400" src="https://gallery.mailchimp.com/example.jpg" style="width: 600px; height: 400px; margin: 0px;" width="600" />