Barrierefreiheit im E-Mail Marketing: BFSG-Pflicht, Bußgelder, Checkliste

Seit Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft – und Barrierefreiheit im Email Marketing ist damit kein "Nice-to-have" mehr, sondern Pflicht laut BFSG. Bußgelder bis 100.000€ drohen. Und die Realität laut DDV/Absolit-Studie 2025: Nur 13% der deutschen Unternehmen erfüllen die Barrierefreiheitsanforderungen in ihren E-Mails.

Das bedeutet: 87% aller Unternehmen versenden E-Mails, die potenziell gegen geltendes Recht verstoßen. Jeden Tag. Jede Kampagne. Barrierefreiheit gehört zu den wichtigsten E-Mail Marketing Trends 2026 — und es ist eine Chance, denn barrierefreie E-Mails performen besser. Für alle Empfänger, nicht nur für Menschen mit Einschränkungen.

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie 2019/882 (European Accessibility Act) in deutsches Recht um. Es betrifft digitale Produkte und Dienstleistungen – einschließlich E-Mail-Kommunikation von Unternehmen.

Wer ist betroffen?

• Unternehmen, die E-Commerce betreiben
• Dienstleister mit digitalem Kundenkontakt
• Unternehmen ab 10 Mitarbeitern ODER über 2 Mio. € Jahresumsatz

Wer ist (noch) ausgenommen?

• Kleinstunternehmen unter 10 Mitarbeitern UND unter 2 Mio. € Umsatz
• Rein interne Kommunikation

1. Farbkontrast: Mindestens 4,5:1

Nur 29% der deutschen Unternehmen erfüllen die Kontrastanforderungen (DDV/Absolit 2025). Der WCAG 2.1 Standard verlangt:

• Normaler Text: Mindestens 4,5:1 Kontrastverhältnis
• Großer Text (ab 18pt): Mindestens 3:1
• UI-Elemente (Buttons): Mindestens 3:1

Praktisch bedeutet das:

• Hellgrauer Text auf weißem Hintergrund? Verboten (Kontrast ~2:1)
• Dunkelgrau (#333) auf Weiß (#fff)? Erlaubt (Kontrast 12,6:1)
• Orange Button-Text auf gelbem Hintergrund? Verboten

Tool-Tipp: WebAIM Contrast Checker (kostenlos) prüft deine Farbkombinationen.

2. Alt-Texte für alle Bilder

Screen-Reader-Nutzer können Bilder nicht sehen. Ohne Alt-Text ist das Bild unsichtbar.

Gute Alt-Texte:

• Beschreiben, WAS auf dem Bild zu sehen ist
• Sind kurz (unter 125 Zeichen)
• Vermitteln die FUNKTION des Bildes im Kontext

Beispiele:

• ❌ `alt=""` (leer)
• ❌ `alt="Bild"` (nichtssagend)
• ✅ `alt="Grafik: 42€ ROI pro investiertem Euro im E-Mail Marketing"`
• ✅ `alt="KlickTipp Dashboard mit Tag-Übersicht"`

Dekorative Bilder (Trennlinien, Hintergründe) erhalten `alt=""` – explizit leer, nicht fehlend.

3. Schriftgröße: Minimum 14px

Kleine Schrift (10px, 12px) ist für viele Menschen schwer lesbar – nicht nur für Sehbehinderte.

4. Logische Lesereihenfolge im HTML

Screen-Reader lesen den HTML-Code von oben nach unten – nicht das visuelle Layout. Wenn dein Template visuell "richtig" aussieht, aber der HTML-Code chaotisch aufgebaut ist, ergibt der Inhalt per Screen-Reader keinen Sinn.

Die Regel: Der HTML-Quellcode muss in einer logischen Reihenfolge stehen:

1. Überschrift
2. Einleitung
3. Hauptinhalt
4. CTA
5. Footer

5. Semantische Überschriften (H1-H3)

Verwende echte HTML-Überschriften-Tags (`<h1>`, `<h2>`, `<h3>`), nicht nur visuell vergrößerten Text. Screen-Reader nutzen Überschriften zur Navigation.

• Eine H1 pro E-Mail (der Haupttitel)
• H2 für Abschnitte
• H3 für Unterabschnitte
• Keine Ebenen überspringen (H1 → H3 ohne H2 ist falsch)

6. Link-Texte müssen verständlich sein

Screen-Reader können eine Liste aller Links auf der Seite anzeigen. Wenn jeder Link "Klick hier" heißt, ist das nutzlos.

7. Nicht nur auf Farbe setzen

Fehler und Erfolge dürfen nicht NUR durch Farbe kommuniziert werden. Ein roter Text allein reicht nicht – füge ein Symbol oder Texthinweis hinzu.

• ❌ Roter Text = Fehler (Farbenblinde sehen kein Rot)
• ✅ "⚠ Fehler: Bitte gültige E-Mail-Adresse eingeben" (Text + Symbol)

Diese 5 Punkte sind die wichtigsten WCAG 2.1 AA Anforderungen für E-Mail-Kommunikation — prüfe sie vor jedem Versand:

• [ ] Farbkontrast 4,5:1 — Normaler Text (bis 18pt) muss mindestens 4,5:1 Kontrast zum Hintergrund haben. Großer Text (ab 18pt) und Buttons benötigen mindestens 3:1. Prüfen mit: WebAIM Contrast Checker
• [ ] Alt-Texte für alle Bilder — Informative Bilder brauchen beschreibende Alt-Texte (unter 125 Zeichen). Dekorative Bilder erhalten explizit leeres `alt=""`. Keine Alt-Texte = Screen-Reader sagt "Grafik" oder liest den Dateinamen vor.
• [ ] Schriftgröße mindestens 14px — Fließtext kleiner als 14px ist nicht WCAG-konform. Empfohlen: 16px. Footer und Impressum dürfen auf 12px gehen.
• [ ] Semantische Überschriften (H1–H3) — Verwende echte HTML-Tags, nicht nur visuell vergrößerten Text. Eine H1 pro E-Mail, Abschnitte als H2, Unterabschnitte als H3. Keine Ebenen überspringen (H1 → H3 ohne H2).
• [ ] Beschreibende Link-Texte — "Klick hier" ist WCAG-konform nicht ausreichend. Screen-Reader-Nutzer navigieren oft über eine Link-Liste — wenn alle Links "hier" heißen, ist diese Liste nutzlos. Besser: "Tarife vergleichen", "Zum Willkommens-Sequenz-Guide".

Die Web Content Accessibility Guidelines (WCAG) 2.1 sind der internationale Standard, auf den sich das BFSG bezieht. Nicht alle WCAG-Kriterien sind auf E-Mails anwendbar, aber diese Erfolgskriterien sind direkt relevant:

Wahrnehmbarkeit (Prinzip 1)

1.1.1 Nicht-Text-Inhalte: Jedes Bild braucht einen Alt-Text. Dekorative Bilder erhalten ein leeres `alt=""`. Icons in Buttons benötigen beschreibende Alt-Texte, wenn sie die einzige Information tragen.

1.3.1 Info und Beziehungen: Überschriften müssen mit semantischen Tags (`<h1>`, `<h2>`) ausgezeichnet sein, nicht nur visuell vergrößert. Listen müssen als `<ul>` oder `<ol>` kodiert sein. Tabellen brauchen `<th>`-Elemente für Kopfzellen.

1.3.2 Bedeutungstragende Reihenfolge: Der HTML-Quellcode muss die logische Lesereihenfolge widerspiegeln. Besonders bei Mehrspalten-Layouts in E-Mails wird das oft verletzt, weil Spalten visuell nebeneinander stehen, im Code aber in willkürlicher Reihenfolge erscheinen.

1.4.3 Kontrast (Minimum): Text muss ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben. Großer Text (ab 18pt oder 14pt fett) benötigt mindestens 3:1.

1.4.4 Textgröße ändern: Nutzer müssen Text auf 200% vergrößern können, ohne Informationsverlust. In E-Mails bedeutet das: Keine festen Pixelgrößen für Container, die Text abschneiden, wenn er vergrößert wird.

Bedienbarkeit (Prinzip 2)

2.1.1 Tastatur: Alle interaktiven Elemente (Links, Buttons) müssen per Tastatur erreichbar sein. In E-Mails relevant für Webmail-Clients wie Gmail im Browser.

2.4.4 Linkzweck (im Kontext): Der Zweck jedes Links muss aus dem Linktext oder dem umgebenden Satz erkennbar sein. "Klick hier" ist nicht ausreichend.

2.4.7 Fokus sichtbar: Interaktive Elemente müssen bei Tastaturfokus visuell hervorgehoben werden. Die meisten E-Mail-Clients übernehmen das automatisch, aber Custom-CSS kann den Fokusring entfernen.

Verständlichkeit (Prinzip 3)

3.1.1 Sprache der Seite: Das `lang`-Attribut muss im HTML gesetzt sein (`<html lang="de">`). Viele E-Mail-Templates lassen das weg – Screen-Reader raten dann die Sprache, oft falsch.

3.1.2 Sprache von Teilen: Wenn deine E-Mail englische Zitate oder Fachbegriffe enthält, sollten diese mit `lang="en"` markiert sein. In der Praxis: Zumindest das Haupt-Sprachattribut setzen.

Eine Barrierefreiheits-Checkliste auf Papier ersetzt keinen echten Test mit einem Screen-Reader. Nur so erkennst du, wie deine E-Mail tatsächlich wahrgenommen wird.

Kostenlose Screen-Reader zum Testen

Wie du mit NVDA deine E-Mail testest (5 Minuten)

1. Installiere NVDA von nvaccess.org (kostenlos, Open Source)
2. Öffne deine E-Mail im Browser (z.B. in Gmail oder als HTML-Vorschau)
3. Starte NVDA (Strg + Alt + N)
4. Drücke die Pfeiltaste nach unten, um den Inhalt Element für Element vorlesen zu lassen
5. Achte auf: Werden Bilder beschrieben? Werden Überschriften als Überschriften erkannt? Ist die Reihenfolge logisch? Werden Links verständlich vorgelesen?

Die 5 häufigsten Screen-Reader-Probleme in E-Mails

1. Bilder ohne Alt-Text: Der Screen-Reader sagt "Grafik" oder liest den Dateinamen vor ("IMG_2847.jpg"). Der Empfänger hat keine Ahnung, was abgebildet ist.

2. Tabellen-Layouts: Wenn du Tabellen für das Layout statt für tabellarische Daten verwendest, liest der Screen-Reader "Zeile 1, Spalte 1... Zeile 1, Spalte 2..." – ein zusammenhängender Absatz wird als Tabellenzellen vorgelesen.

3. Fehlende Sprach-Deklaration: Ohne `lang="de"` versucht der Screen-Reader, die Sprache zu erraten. Bei gemischtsprachigen E-Mails führt das zu einer falschen Aussprache, die den Inhalt unverständlich macht.

4. Dekorative Bilder mit Alt-Text: Trennlinien, Hintergrundmuster oder Icons, die als `alt="Bild eines dekorativen Elements"` beschrieben sind. Der Screen-Reader liest jedes einzelne vor – das stört den Lesefluss. Dekorative Bilder brauchen `alt=""`.

5. Linktext "Hier klicken": Screen-Reader-Nutzer navigieren oft über eine Link-Liste (alle Links auf der Seite). Wenn jeder Link "Hier klicken" heißt, ist die Liste nutzlos.

Barrierefreiheit ist kein Kompromiss. Barrierefreie E-Mails performen besser:

Die DDV/Absolit-Studie 2025 zeigt (alle Zahlen im Statistik-Überblick): Unternehmen mit barrierefreien E-Mails haben im Schnitt höhere Engagement-Raten. Logisch – klare Kommunikation hilft jedem. Warum weniger Design oft mehr Conversion bedeutet, zeigt der Guide zu Newsletter Design vs. Conversion.

Diese Checkliste ist nach den WCAG-2.1-Prinzipien strukturiert. Gehe sie für jedes neue E-Mail-Template durch – und stichprobenartig für einzelne Kampagnen.

HTML & Struktur

• [ ] `lang`-Attribut im HTML gesetzt (`<html lang="de">`)?
• [ ] HTML-Reihenfolge = logische Lesereihenfolge?
• [ ] Echte Überschriften-Tags (H1, H2, H3) statt visuell vergrößertem Text?
• [ ] Keine Überschriften-Ebenen übersprungen (H1 → H3 ohne H2)?
• [ ] Tabellen nur für tabellarische Daten (nicht für Layout)?
• [ ] Layout-Tabellen mit `role="presentation"` markiert?

Bilder & Medien

• [ ] Alle informativen Bilder haben aussagekräftige Alt-Texte (unter 125 Zeichen)?
• [ ] Dekorative Bilder haben leeres `alt=""` (nicht fehlendes alt)?
• [ ] E-Mail ist auch ohne Bilder verständlich (bei blockierten Bildern)?
• [ ] Bilder enthalten keinen essentiellen Text, der nicht im HTML steht?

Farben & Kontrast

• [ ] Kontrast aller Textfarben mindestens 4,5:1?
• [ ] Kontrast großer Text (ab 18pt) mindestens 3:1?
• [ ] Kontrast von UI-Elementen (Buttons, Icons) mindestens 3:1?
• [ ] Informationen nicht nur über Farbe vermittelt?
• [ ] E-Mail im Dark Mode getestet?

Typografie & Lesbarkeit

• [ ] Schriftgröße mindestens 14px (Fließtext)?
• [ ] Zeilenhöhe mindestens 1,5 (150%)?
• [ ] Absätze durch Leerraum getrennt (nicht nur Einrückung)?

Interaktion & Navigation

• [ ] Link-Texte beschreibend (nicht "Klick hier")?
• [ ] Button-Klickfläche mindestens 44x44px?
• [ ] Alle Links und Buttons per Tastatur erreichbar?
• [ ] Fokusreihenfolge entspricht visueller Reihenfolge?

Tools für den Schnell-Check

87% der Unternehmen verstoßen gegen BFSG-Anforderungen in ihren E-Mails. Die Marktüberwachungsbehörden bauen gerade Kapazitäten auf. Verbraucherschutzverbände bereiten Testfälle vor.

Die Frage ist nicht, ob Abmahnungen kommen. Die Frage ist, wann.

Die gute Nachricht: Barrierefreiheit ist kein Hexenwerk. Die 7 Regeln oben lassen sich in wenigen Stunden umsetzen – am besten direkt beim Newsletter erstellen. Und der Lohn ist doppelt: rechtliche Sicherheit UND bessere Performance. Welches Newsletter Tool dich dabei am besten unterstützt, hängt von den mitgelieferten Templates ab.