html-einfach.de

WCAG & BFSG · Medien, Dokumente & Sprache

Barrierefreie E-Mails & Newsletter

Von Zuletzt geändert am

E-Mail ist das letzte große Format, in dem Techniken von 2005 noch produktiv sind: Tabellenlayouts, Inline-Styles, Bildhintergründe. Genau deshalb landen dort Barrieren, die im Web längst gelöst sind. Die gute Nachricht: Die Liste der Maßnahmen ist kurz, und die meisten davon kosten nichts.

Das Wichtigste in Kürze

  • Die häufigste Barriere ist die Bild-E-Mail. Ein Newsletter, der aus einer einzigen Grafik besteht, ist für Screenreader leer, beim Zoomen unscharf und in vielen Programmen zunächst gar nicht sichtbar – Bilder werden oft standardmäßig blockiert.
  • Layout-Tabellen brauchen role="presentation". Ohne dieses Attribut liest ein Screenreader Zeilen und Spalten als Datentabelle vor und zerlegt den Text.
  • Jede E-Mail braucht ein lang-Attribut und einen aussagekräftigen Betreff. Ohne Sprachangabe liest die Sprachausgabe deutschen Text englisch aus.
  • Eine echte Nur-Text-Fassung ist die wirksamste einzelne Maßnahme: Sie hilft Hilfsmitteln, alten Programmen und der Zustellbarkeit gleichzeitig.
  • Kontrast und Zielgröße gelten wie im Web: 4,5:1 für normalen Text, ausreichend große Schaltflächen. Auf dem Smartphone wird beides sofort spürbar.
  • Der Dark Mode ist die neue Fehlerquelle. Viele Programme invertieren Farben eigenmächtig; ein Logo als schwarzes PNG auf transparentem Grund verschwindet dabei.
  • Rechtlich sind Newsletter selten selbst die Dienstleistung. Transaktionsmails – Bestellbestätigung, Rechnung, Passwort-Zurücksetzen – gehören dagegen zum Vorgang und damit in die Betrachtung unter dem BFSG.

Warum E-Mail ein eigenes Kapitel ist

Im Web kann man sich auf einen Browser verlassen, der HTML nach Standard rendert. In E-Mail-Programmen gilt das nicht: Jedes Programm hat eine eigene Rendering-Engine, viele entfernen <style>-Blöcke, manche unterstützen kein Flexbox-Layout, und Bilder werden häufig blockiert, bis der Empfänger sie freigibt.

Deshalb sind in E-Mails Techniken üblich, die im Web zu Recht ausgestorben sind. Das ist kein Argument gegen Barrierefreiheit, aber es verändert die Werkzeuge: Statt semantischer Layoutelemente arbeitet man mit Tabellen, statt externem CSS mit Inline-Styles. Die Anforderungen bleiben dieselben.

Struktur: Tabellen ja, aber richtig ausgezeichnet

Layout-Tabellen sind in E-Mails praktisch unvermeidlich. Entscheidend ist, dass sie sich als Layout zu erkennen geben:

<!-- Falsch: wird als Datentabelle angesagt, „Tabelle mit 3 Zeilen, 2 Spalten“ -->
<table width="600">
  <tr><td>…</td><td>…</td></tr>
</table>

<!-- Richtig: die Tabelle verschwindet aus dem Accessibility Tree -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
  <tr><td>…</td><td>…</td></tr>
</table>

Der Unterschied ist hörbar: Ohne role="presentation" kündigt der Screenreader eine Datentabelle an und liest Zellkoordinaten mit. Bei einer verschachtelten Newsletter-Struktur mit fünf Tabellen ineinander wird daraus eine Ansage, die niemand durchhält. Warum echte Tabellen anders behandelt werden, steht unter Tabellen semantisch aufbauen.

Innerhalb der Zellen gilt normales HTML: echte Überschriften, echte Listen, echte Absätze. Auch in einer E-Mail ist <h2> eine Sprungmarke, und Überschriften-Hierarchie hilft beim Überfliegen.

Der Kopf: Sprache, Titel, Betreff

<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Newsletter August 2026: Neue Fristen zum BFSG</title>
  </head>

Drei Kleinigkeiten mit großer Wirkung:

  • lang="de" – ohne die Angabe liest die Sprachausgabe je nach Systemsprache mit falscher Aussprache vor, dieselbe Wirkung wie ein fehlendes lang im Web.
  • <title> – wird von manchen Programmen als Fensterüberschrift genutzt und beim Öffnen im Browser („Im Webbrowser anzeigen“) zum Seitentitel.
  • Der Betreff ist die eigentliche Überschrift. Er entscheidet, ob jemand die Mail überhaupt öffnet – und ist für Screenreader-Nutzende die einzige Vorschau, wenn der Vorschautext fehlt.

Der Preheader (der Vorschautext nach dem Betreff) gehört gepflegt, nicht leer gelassen. Wird er nicht gesetzt, zeigen viele Programme stattdessen „Im Browser ansehen | Abmelden“ – die drei nutzlosesten Wörter im Posteingang.

Bilder: Alt-Text und die Blockade

Zwei Dinge fallen hier zusammen. Erstens werden Bilder in vielen Programmen erst nach Freigabe geladen. Zweitens sind Alt-Texte in E-Mails deshalb doppelt wichtig: Sie sind nicht nur die Alternative für Hilfsmittel, sondern für einen großen Teil aller Empfänger die einzige Information, bis sie auf „Bilder anzeigen“ klicken.

  • Inhaltstragende Bilder bekommen einen Alt-Text, der die Information trägt – dieselben Regeln wie unter Alt-Texte richtig schreiben.
  • Dekorative Bilder und Abstandshalter bekommen alt="". Ein Spacer-GIF mit dem Alt-Text „spacer“ wird sonst vorgelesen.
  • Text gehört nicht ins Bild. Ein Angebotsbanner mit eingebranntem Preis ist für Screenreader leer, lässt sich nicht vergrößern und verschwindet bei blockierten Bildern – die E-Mail-Variante von 1.4.5 Bilder von Text.

Farbe, Kontrast und Dark Mode

Die Kontrastwerte sind dieselben wie im Web: 4,5:1 für normalen Text, 3:1 für großen Text und für Bedienelemente. Nachmessen lässt sich das mit dem Kontrast-Check an der im Browser geöffneten Fassung; die Zielwerte stehen unter Farbkontraste.

Der Dark Mode ist die jüngere Baustelle. Verschiedene Programme gehen unterschiedlich damit um: Manche respektieren deine Farbangaben, andere invertieren Farben, wieder andere passen nur den Hintergrund an. Drei Vorkehrungen helfen zuverlässig:

  • Logos und Icons mit ausreichendem Eigenkontrast – ein schwarzes PNG auf transparentem Grund verschwindet auf dunklem Hintergrund. Eine Variante mit heller Kontur oder einer eigenen Hintergrundfläche löst das.
  • Keine reinen Weißflächen als Designelement, die im Dark Mode zu Löchern werden.
  • Nach dem Bauen in beiden Modi ansehen – auf einem echten Gerät, nicht nur in der Vorschau des Versandwerkzeugs.

Und wie im Web gilt: Bedeutung darf nicht allein an Farbe hängen (1.4.1). Ein rot hervorgehobener Preis braucht ein Wort dazu.

Linktexte sagen, wohin sie führen. „Hier klicken“ dreimal untereinander ist in einer Linkliste – und Screenreader-Nutzende lassen sich genau die gern ausgeben – nutzlos. Dasselbe Kriterium wie im Web: 2.4.4 Linkzweck im Kontext.

Schaltflächen groß genug bauen. Eine Aktionsfläche von 24 × 24 CSS-Pixeln ist die Untergrenze (2.5.8); auf dem Smartphone ist deutlich mehr angemessen. Bilder als Schaltfläche sind riskant – bei blockierten Bildern bleibt nichts Klickbares übrig. Robuster sind sogenannte bulletproof buttons aus einer Tabellenzelle mit Hintergrundfarbe und echtem Linktext.

Der Abmeldelink gehört gut erreichbar. Er ist rechtlich Pflicht und wird regelmäßig auf 9 Pixel graue Schrift geschrumpft – ein Kontrast- und Zielgrößenproblem zugleich.

Die Nur-Text-Fassung

Jedes ernstzunehmende Versandwerkzeug erzeugt eine Textfassung parallel zur HTML-Fassung. Sie wird gern automatisch generiert und nie angesehen – dabei ist sie die robusteste Zugangsform überhaupt: Sie funktioniert in jedem Programm, mit jedem Hilfsmittel, bei blockierten Bildern und in jeder Schriftgröße.

Was eine brauchbare Textfassung ausmacht:

  • Sie enthält denselben Inhalt, nicht nur „Diese E-Mail im Browser ansehen“.
  • Links stehen als vollständige URL hinter dem Linktext, nicht als Kürzel.
  • Abschnitte sind durch Leerzeilen und Überschriftenzeilen gegliedert.

Das kostet einmal Aufwand pro Vorlage und dann fast nichts mehr.

Transaktionsmails: der rechtlich relevante Teil

Der Newsletter ist der sichtbarste, aber selten der wichtigste Fall. Rechtlich zählen die Mails, die zum Vorgang gehören – und die schickt man automatisch, oft aus einer Vorlage, die seit Jahren niemand angesehen hat:

  • Bestell- und Terminbestätigung. Sie enthält die Angaben, die der Vorgang dokumentiert. Als Bildgrafik ist sie an dieser Stelle ein echter Bruch, und eine Bestellübersicht als Layout-Tabelle ohne role="presentation" zerfällt beim Vorlesen.
  • Rechnung als PDF-Anhang. Das PDF ist ein eigenes Dokument mit eigenen Anforderungen – ein gedrucktes Layout aus dem Warenwirtschaftssystem ist meist ungetaggt. Der Weg dorthin steht unter Barrierefreie Office-Dokumente und PDF-Barrierefreiheit.
  • Passwort-Zurücksetzen und Verifizierung. Hier hängt der Zugang zum Konto dran. Ein Bestätigungscode, der nur als Bild kommt, sperrt aus – und ein Link, der als nackte URL über fünf Zeilen läuft, ist per Screenreader kaum zu erfassen.

Praktische Konsequenz: Wenn du nur eine Vorlage überarbeitest, nimm nicht den Newsletter, sondern die Bestellbestätigung.

So prüfst du einen Newsletter

  1. Bilder blockieren und die Mail erneut ansehen. Ist der Inhalt noch verständlich?
  2. Textfassung öffnen. Steht dort der Inhalt oder nur ein Hinweis?
  3. In den Dark Mode schalten – auf einem echten Gerät.
  4. Am Smartphone lesen und die Schaltflächen mit dem Daumen treffen.
  5. Mit einem Screenreader anhören. Wird eine Tabelle angesagt? Dann fehlt role="presentation". Details unter Screenreader-Grundlagen.
  6. Kontraste messen, vor allem bei Fußzeile und Abmeldelink.
  7. Im Browser öffnen („Im Webbrowser anzeigen“) und dort axe DevTools laufen lassen – das findet fehlende Alt-Texte und Kontrastfehler in einem Durchgang.

Häufiger Fehler in der Praxis

Der Newsletter als ein einziges Bild. Grafisch bequem, inhaltlich leer. Bei blockierten Bildern sieht der Empfänger nichts, bei Screenreader-Nutzung hört er nichts, und Spamfilter mögen es auch nicht.

Alt-Text auf Spacer-Grafiken. „spacer.gif“, „bild1“, „Grafik“ – dreißigmal vorgelesen. Abstandshalter bekommen alt="".

Layout-Tabellen ohne role="presentation". Der Klassiker, der eine sonst saubere Mail unbrauchbar macht.

Nur in der Vorschau des Versandwerkzeugs geprüft. Die zeigt eine idealisierte Fassung. Der Test gehört in echte Programme, mindestens in eines auf dem Smartphone.

Die Textfassung automatisch erzeugen lassen und nie ansehen. Häufig steht dort ein zusammengeklebter Zeichensalat aus Bildpfaden und Tracking-URLs.

Häufige Fragen

Fallen Newsletter unter das BFSG?

In der Regel nicht als eigene Dienstleistung – ein Werbebrief ist kein Produkt und keine erfasste Dienstleistung. Anders sieht es bei Transaktionsmails aus, die zum Vorgang gehören: Bestellbestätigung, Rechnung, Terminbestätigung, Passwort-Zurücksetzen. Sie sind Teil der Dienstleistung und gehören in die Betrachtung. Ob dein Angebot überhaupt erfasst ist, klärt der BFSG-Schnelltest.

Gilt die BITV auch für E-Mails von Behörden?

Die BITV 2.0 richtet sich auf Websites, mobile Anwendungen und elektronisch unterstützte Verwaltungsabläufe. E-Mails an Bürgerinnen und Bürger sind Teil der Kommunikation einer öffentlichen Stelle, und die Anforderung an Barrierefreiheit ergibt sich dort auch aus dem BGG. Praktisch gilt: Wer die Punkte auf dieser Seite umsetzt, liegt richtig.

Kann ich in E-Mails ARIA verwenden?

Nur eingeschränkt und ohne Verlass. role="presentation" an Layout-Tabellen ist die Ausnahme, die breit unterstützt wird und wirklich hilft. Alles darüber hinaus wird von vielen Programmen entfernt oder ignoriert. Die Faustregel aus dem Web gilt hier doppelt: erst natives HTML, ARIA nur, wo es nachweislich wirkt.

Wie teste ich in vielen E-Mail-Programmen gleichzeitig?

Kommerzielle Vorschaudienste rendern eine Mail in Dutzenden Programmen und liefern Screenshots. Das hilft für Layoutfragen, sagt aber nichts über die Screenreader-Ausgabe. Für die Barrierefreiheit ist ein echter Durchlauf in einem Programm mehr wert als fünfzig Screenshots.

Was ist der schnellste einzelne Fortschritt?

Eine brauchbare Nur-Text-Fassung und role="presentation" an allen Layout-Tabellen. Beides ist einmal pro Vorlage erledigt und wirkt auf jeden künftigen Versand.

Verwandte Themen

Quellen

Gratis E-Book PDF Das Praxishandbuch

Kostenloses E-Book

Das Praxishandbuch für sauberes, zugängliches Web

Alles rund um semantisches HTML, Barrierefreiheit, WCAG & BFSG, GEO und SEO — praxisnah und am echten Code. In mehreren Feedbackschleifen von Leserinnen und Lesern verbessert.

  • 3.000+ Downloads
  • 7. Auflage
  • 37 Seiten
  • PDF

Kein Spam. Abmeldung jederzeit mit einem Klick möglich.