Barrierefreiheit im E-Mail Marketing: BFSG, WCAG-Regeln, Checkliste

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 untersuchten Mailings nutzen ausreichende Farbkontraste und skalierbare Schriftgrößen (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 (weitere Kennzahlen im KPI-Überblick): Nur 36% der untersuchten Mails sind screenreader-kompatibel. Wer die Tabelle oben umsetzt, hebt sich also vom Durchschnitt ab – klare Kommunikation hilft jedem. Warum weniger Design oft mehr Conversion bedeutet, zeigt der Guide zum Newsletter gestalten.

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

Das BFSG gilt seit dem 28.06.2025. Kleinstunternehmen (unter 10 Mitarbeitende UND unter 2 Mio. € Jahresumsatz) sind von der Umsetzungspflicht ausgenommen (§ 17 BFSG), und ob das Gesetz reine Newsletter überhaupt erfasst, ist juristisch noch offen. Durchgesetzt wird gestuft über die Marktüberwachungsstelle der Länder: erst die Aufforderung zur Korrektur, erst danach Bußgelder (§§ 29, 30 BFSG) — keine automatische Abmahnwelle.

Trotzdem lohnt sich der Aufwand: Die 7 Regeln oben lassen sich in wenigen Stunden umsetzen – am besten direkt beim Newsletter erstellen. Der Nutzen ist doppelt: Du erfüllst die Anforderungen, falls die Pflicht dich betrifft, UND deine E-Mails werden lesbarer und klickstärker. Welches Newsletter Tool dich dabei am besten unterstützt, hängt von den mitgelieferten Templates ab.