Ein Alt-Tag gibt es streng genommen nicht. Alt ist ein Attribut des <img>-Tags: Es enthält den Alternativtext (Alt-Text) eines Bildes. Er erscheint, wenn das Bild nicht lädt, wird von Screenreadern vorgelesen und hilft Suchmaschinen, das Motiv zu verstehen. Syntax und Schreibregeln gelten für jedes Medium. Newsletter bringen zwei zusätzliche Hürden mit: Bilder, die manche E-Mail-Clients blockieren, und Buttons als Bild, die mit ihnen verschwinden.
Syntax des Alt-Attributs
Das Attribut alt steht im <img>-Tag, neben src, das die Adresse der Datei angibt:
<img src="logo-captain-verify.png" alt="Captain Verify" width="200" height="60">
Geben Sie auch width und height an (hier 200 x 60 px): Diese Maße reservieren den Platz des Bildes. Blockiert der E-Mail-Client die Datei, erscheint der Alt-Text in genau diesem Bereich. Das Attribut title erzeugt einen Tooltip beim Darüberfahren und ersetzt alt nie.
Einen brauchbaren Alt-Text schreiben
Beschreiben Sie die Funktion des Bildes in seinem Kontext. Dasselbe Foto eines Smartphones braucht zwei verschiedene Alt-Texte, je nachdem, ob es einen Produkttest illustriert oder zur Kaufseite führt. Fragen Sie sich: Was müsste an der Stelle des Bildes stehen, wenn es verschwände?
Halten Sie sich kurz. Abondance nennt in seinem Leitfaden zum Alt-Attribut (auf Französisch) einen Richtwert von unter 125 Zeichen. Diese Grenze stammt aus der Praxis der Redaktionen: Die WCAG 2.2 legen keine fest. Für einen Button empfiehlt Mailjet etwa 25 Zeichen bei 200 px Breite, in seinen Tipps zum Alt-Text (auf Französisch).
Streichen Sie Formeln wie „Bild von“ und „Foto von“: Screenreader kündigen ohnehin an, dass es sich um ein Bild handelt. Bei einem Logo schreiben Sie den Markennamen. Für einen Button „Leitfaden herunterladen“ genügt der Alt-Text „Leitfaden herunterladen“, denn „blauer Button“ sagt einem Abonnenten, der das Bild nicht sieht, nichts. Lesen Sie den Text zur Kontrolle laut vor.
Welcher Alt-Text für welche Bildart?
Es hängt von der Rolle des Bildes in der Nachricht ab: Es trägt eine Information oder dekoriert nur. Der Entscheidungsbaum des W3C unterscheidet 5 Fälle, vom dekorativen bis zum komplexen Bild. Für einen Newsletter reichen 4 Fragen in dieser Reihenfolge:
- Steht das Bild in einem Link oder Button? Dann beschreibt der Alt-Text das Ziel oder die Aktion.
- Enthält das Bild Text? Dann gibt der Alt-Text ihn wortgleich wieder, es sei denn, er steht schon direkt daneben.
- Trägt das Bild eine Information (Angebot, Produkt, Diagramm)? Dann nennt der Alt-Text das Wesentliche. Detaillierte Daten gehören als Text in die E-Mail.
- Ist das Bild rein dekorativ oder wiederholt es den Text daneben? Dann bleibt der Alt-Text leer.
| Bildart | Empfohlener Alt-Text | Begründung |
|---|---|---|
| Logo im Header | Captain Verify | Der Name identifiziert den Absender |
| Button als Bild | Leitfaden herunterladen | Der Alt-Text beschreibt die erwartete Aktion |
| Banner mit Text | Herbstangebot: Gratisversand ab 50 € Bestellwert | Der Text des Bildes wird vollständig übernommen |
| Diagramm | Öffnungsrate steigt von Januar bis Juni, Details in der Tabelle darunter | Kernaussage im Alt-Text, Zahlen als Text |
| Trennlinie oder Abstandshalter | alt=““ | Es gibt nichts zu vermitteln |
Leerer Alt-Text und dekorative Bilder
Ein dekoratives Bild erhält alt="": Das Attribut ist vorhanden, enthält aber keinen Text. Hilfstechnologien überspringen es. Fehlt das Attribut ganz, passiert das Gegenteil: Manche Screenreader lesen dann den Dateinamen vor, was das Vorlesen stört.
Das W3C (WAI) sieht einen leeren Alt-Text vor, wenn ein Bild nur einen visuellen Effekt erzeugt oder den Text daneben wiederholt. Als Beispiel für dekorative Bilder nennt das W3C Abstandshalter. In einer E-Mail setzen Sie Abstände besser per CSS (etwa als Padding einer Tabellenzelle): Dann gibt es nichts zu überspringen.
Normen: WCAG 1.1.1 und RGAA 1.1 und 1.2
Das Kriterium 1.1.1 „Nicht-Text-Inhalt“ der WCAG 2.2 gehört zu Stufe A, der grundlegendsten: Jeder Nicht-Text-Inhalt braucht eine Textalternative, die den gleichen Zweck erfüllt. Reine Dekoration ist die Ausnahme, sofern Hilfstechnologien sie ignorieren können. Das französische RGAA 4.1.2 der DINUM (auf Französisch) übernimmt dieses Prinzip in zwei Kriterien des Themas Bilder: 1.1 „Hat jedes informationstragende Bild eine Textalternative?“ und 1.2 „Wird jedes dekorative Bild von Hilfstechnologien korrekt ignoriert?“. Version 5 des Regelwerks ist für Ende 2026 angekündigt.
Mehr zum Thema E-Mail finden Sie in unserem Artikel zu den Codierungstechniken für barrierefreie E-Mails und in dem über die Barrierefreiheit von E-Mails.
SEO und Google Bilder
Abondance zählt die Indexierung von Bildern zu den Gründen für einen sorgfältigen Alt-Text und stützt sich auf Google Search Central, die WHATWG-Spezifikation und MDN. Keine der geprüften Quellen beziffert einen Ranking-Gewinn, der sich auf das Attribut zurückführen ließe: Keyword-Stuffing bringt nichts und verschlechtert das Vorlesen. In einem Newsletter ist der SEO-Effekt vernachlässigbar, denn die Nachricht ist keine indexierte Seite, außer Sie veröffentlichen sie als Web-Version. Auf einer Website benennen Sie auch die Datei mit 2 bis 4 durch Bindestriche getrennten Wörtern, zum Beispiel logo-captain-verify.png, wie Abondance es empfiehlt.
Häufige Fehler
- Das Attribut bei einem dekorativen Bild weglassen, statt
alt=""zu schreiben. - Mit „Bild von“ oder „Foto von“ beginnen.
- Schlüsselwörter aneinanderreihen (Keyword-Stuffing), statt die Funktion des Bildes zu beschreiben.
- Denselben Alt-Text für alle Bilder einer E-Mail kopieren.
- Wichtigen Text nur im Bild lassen, ohne Entsprechung in HTML.
- Einen Alt-Text schreiben, der länger ist als der Bildbereich: Bei einer Blockierung kann er abgeschnitten werden.
Alt-Text im Newsletter: blockierte Bilder
Eine Website zeigt ihre Bilder fast immer an. Eine E-Mail hängt vom E-Mail-Client jedes Abonnenten ab. Genau hier wird der Alt-Text zum Sicherheitsnetz.
In seinem Leitfaden zum Blockieren von Bildern (veröffentlicht 2017, aktualisiert am 17. August 2021) nennt Litmus die Outlook-Desktop-Clients als wichtigste Blocker. Die meisten anderen Clients zeigen Bilder standardmäßig an, AOL ist eine Ausnahme. Auch die von Litmus getesteten mobilen Clients laden sie: Abonnenten müssen die Einstellungen durchsuchen, um sie abzuschalten. Blockiert wird also vor allem am Desktop-Rechner unter Outlook. Microsoft konfiguriert Outlook standardmäßig so, dass der automatische Download von Bildern blockiert wird. Gmail lädt Bilder laut der Google-Hilfe automatisch (Option Externe Bilder immer anzeigen), außer die Nachricht oder der Absender wirkt verdächtig oder der Nutzer hat vorher eine Bestätigung verlangt.
Wie groß diese Gruppe ist, hängt von Ihrer Zielgruppe ab. Litmus zitiert Email Client Market Share: Outlook liegt mit 6 % der Öffnungen auf Platz 4 der E-Mail-Clients. Litmus fügt hinzu, dass diese Zahl womöglich zu niedrig ist, weil Outlook den Tracking-Pixel standardmäßig blockiert und diese Öffnungen dann nicht gezählt werden. Eine B2B-Liste enthält laut Litmus wahrscheinlich mehr davon.
Der Screenshot zeigt den typischen Fehler: Links zeigt nur das Header-Bild einen Alt-Text, und zwar einen winzigen. Die Visuals der Blöcke darunter bleiben leer. Litmus weist darauf hin, dass der Alt-Text in Outlook Desktop erst nach dem Warnbanner erscheint und nur, wenn Bilder deaktiviert sind. Ein defektes Bild zeigt nichts an.
Gestylter Alt-Text: welche Clients zeigen ihn an?
Gmail, Outlook.com und Apple Mail stellen gestylten Alt-Text dar, Outlook Desktop 2007-2019 nicht. Yahoo! Mail im Webmail zeigt laut Litmus-Tabelle (Stand 2021) gar keinen Alt-Text an. Formatiert wird der Alt-Text mit einem Inline-Style am <img>-Tag, zum Beispiel Farbe und Größe der Schrift.
<img src="button.png" alt="Leitfaden herunterladen" width="200" height="50" style="color:#0b5cad; font-size:16px; font-family:Arial, sans-serif;">
| Client | Gestylter Alt-Text | Gut zu wissen |
|---|---|---|
| Gmail | Ja | Bilder standardmäßig sichtbar (Gmail-Hilfe) |
| Outlook.com | Ja | Webmail, nicht mit Outlook Desktop zu verwechseln |
| Apple Mail | Ja | Von Litmus getestet |
| Outlook für Mac | Ja | Nicht mit Outlook für Windows zu verwechseln |
| Outlook Desktop 2007-2019 | Nein | Nur einfacher Alt-Text, nur bei deaktivierten Bildern |
| Yahoo! Mail (Webmail) | Nein | Laut Litmus wird kein Alt-Text angezeigt |
Litmus betont, dass das standardmäßige Blockieren in Outlook Desktop aus Tests mit Outlook 2016 stammt und seither nicht erneut geprüft wurde. Machen Sie einen frischen Rendering-Test, bevor Sie eine E-Mail auf diese Tabelle stützen.
Bulletproof-Button statt CTA als Bild
Ein Bulletproof-Button ist ein Button aus HTML und CSS: eine farbige Tabellenzelle mit einem Link aus echtem Text. Er bleibt sichtbar und klickbar, auch wenn Bilder deaktiviert sind. Ein Button als Bild verschwindet dagegen oder schrumpft auf seinen Alt-Text. Outlook Desktop rendert HTML seit Outlook 2007 mit der Word-Engine, wie die Microsoft-Dokumentation angibt. Für diese Versionen ergänzen manche Button-Vorlagen ein VML-Fragment (Vector Markup Language), auf das wir hier nicht eingehen.
<table role="presentation" cellspacing="0" cellpadding="0"><tr>
<td bgcolor="#0b5cad" style="border-radius:4px;">
<a href="https://beispiel.de/leitfaden" style="display:inline-block; padding:12px 24px; color:#ffffff; font-family:Arial, sans-serif; text-decoration:none;">Leitfaden herunterladen</a>
</td></tr></table>Der Code oben ergibt einen Button mit 12 px vertikalem und 24 px horizontalem Innenabstand, in #0b5cad mit weißem Text #ffffff. Dasselbe Prinzip gilt für jeden wichtigen Text (Überschrift, Angebot, Datum, Abmeldelink): in HTML, nicht im Bild. Ein Aktionslink wie der Button „Zum Kalender hinzufügen“ muss auch ohne Bild lesbar bleiben. Eine E-Mail, die nur aus Bildern besteht, wirkt in Outlook Desktop fast leer, solange der Abonnent nichts herunterlädt. Litmus rät, Text und Buttons in HTML zu halten: Der beste Test bleibt die Lesbarkeit ohne Bild.
Halten Sie außerdem eine stimmige Nur-Text-Version bereit und achten Sie auf die Bildgröße, die bei langsamer Verbindung die Anzeige für Ihre Abonnenten beeinflusst.
Mit deaktivierten Bildern testen
Öffnen Sie in Gmail Einstellungen > Alle Einstellungen aufrufen, scrollen Sie zum Abschnitt Bilder und wählen Sie Vor dem Anzeigen externer Bilder fragen. Klicken Sie unten auf Änderungen speichern und öffnen Sie dann Ihren Versand erneut. Unter Outlook Desktop ist die Blockierung standardmäßig aktiv; andernfalls öffnen Sie Datei > Optionen > Trust Center > Einstellungen für das Trust Center und aktivieren „Bilder nicht automatisch in HTML-E-Mail-Nachrichten oder RSS-Elementen herunterladen“. Ergänzen Sie den Test mit einem Tool für die E-Mail-Vorschau.
Prüfen Sie, ob der Haupt-Button lesbar bleibt und jeder Alt-Text für sich Sinn ergibt. Ein sorgfältiger Alt-Text rettet keine E-Mail, die als Bounce zurückkommt: Lassen Sie die Liste vor dem Versand auch per Adressprüfung laufen, um ungültige Adressen zu finden.
