E-Mail Accessibility bezeichnet die Gestaltung von E-Mails nach Barrierefreiheitsprinzipien, sodass sie für alle Menschen zugänglich sind – unabhängig von körperlichen oder kognitiven Einschränkungen.
Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Einsteiger Synonyme / Auch bekannt als: Barrierefreie E-Mail, Inclusive E-Mail Design, WCAG in E-Mails
Was ist E-Mail Accessibility?
Rund 15 % der Weltbevölkerung lebt mit einer Form von Behinderung. Im E-Mail-Kontext betrifft dies vor allem Sehbehinderungen (inkl. Farbenblindheit), motorische Einschränkungen (Bedienung ohne Maus), kognitive Einschränkungen und den Einsatz von Screenreadern (Software, die E-Mail-Inhalte vorliest). Barrierefreiheit im E-Mail-Marketing ist nicht nur ethisch geboten, sondern verbessert auch für alle Nutzer die Lesbarkeit und User Experience.
Erklärung
Rechtlicher Hintergrund
Die WCAG (Web Content Accessibility Guidelines) des W3C sind der international anerkannte Standard für Barrierefreiheit. Obwohl E-Mails technisch keine Webseiten sind, orientieren sich viele Organisationen an WCAG 2.1 (Level AA) auch für E-Mail-Kommunikation. In Deutschland und der EU wird Barrierefreiheit durch das Barrierefreiheitsstärkungsgesetz (BFSG) geregelt, das ab Juni 2025 bestimmte digitale Produkte und Dienstleistungen verpflichtet, barrierefrei zu sein.
Wichtige Accessibility-Maßnahmen
ALT-Texte für Bilder Jedes Bild in einer E-Mail braucht einen beschreibenden ALT-Text im alt-Attribut: ``html <img src="produkt.jpg" alt="Rotes Winterkleid mit Gürtel, Größe M" width="300" /> ` Screenreader lesen den ALT-Text vor, wenn ein Bild nicht angezeigt werden kann. Dekorative Bilder ohne Informationswert erhalten ein leeres alt=""` – so werden sie von Screenreadern übersprungen.
Farbkontrast WCAG 2.1 Level AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (über 18 pt). Helles Grau auf weißem Hintergrund ist nicht ausreichend. Tools wie Colour Contrast Checker (webaim.org) oder der Litmus-eigene Accessibility-Check helfen bei der Überprüfung. Farbenblindheit betrifft ca. 8 % der männlichen Bevölkerung – wichtige Informationen sollten nie ausschließlich durch Farbe kommuniziert werden.
Schriftgröße und Lesbarkeit
- Mindestens 14 px für Fließtext (besser 16 px)
- Zeilenhöhe (line-height) von mindestens 1,5 für Fließtext
- Ausreichend Kontrast zwischen Text und Hintergrund
- Keine reine Großschreibung für längere Texte (schwer lesbar für Legastheniker)
Semantische HTML-Struktur Überschriften sollten mit echten Heading-Tags (<h1>, <h2>) ausgezeichnet werden, nicht nur durch größere oder fettere Texte. Eine klare Hierarchie hilft Screenreadern, die Struktur der E-Mail zu erfassen.
Linktext und Button-Beschriftungen Links und Buttons müssen aussagekräftig beschriftet sein, auch außerhalb des Kontexts:
- Schlecht: „Hier klicken" oder „Mehr"
- Gut: „Zum vollständigen Artikel über E-Mail-Accessibility"
Bei CTA-Buttons in E-Mails gilt dasselbe: Der Button-Text muss klar kommunizieren, was nach dem Klick passiert.
Lesereihenfolge und Tabellen-Layout Da viele HTML-E-Mails mit Tabellen-Layout arbeiten, sollte die Lesereihenfolge im DOM (Dokument-Objektmodell) sinnvoll sein – Screenreader lesen die E-Mail von oben nach unten, nicht nach dem visuellen Layout. Komplexe Tabellenstrukturen können für Screenreader verwirrend sein.
Datei-Anhänge mit ARIA-Labels ARIA (Accessible Rich Internet Applications) Labels können E-Mail-Elementen zugänglichere Namen geben: ``html <a href="..." aria-label="Whitepaper zu E-Mail-Marketing herunterladen (PDF, 2 MB)"> Herunterladen </a> ``
Plain Text Fallback Jede HTML-E-Mail sollte einen vollständigen Plaintext-Fallback haben. Nicht nur für Accessibility, sondern auch für Nutzer, die HTML-E-Mails deaktiviert haben und für verbesserte Zustellbarkeit.
Animationen und Blinken Blinkende Elemente oder schnelle Animationen können bei Personen mit Epilepsie Anfälle auslösen. Das WCAG-Kriterium 2.3 besagt: Nichts soll mehr als dreimal pro Sekunde blinken. Animierte GIFs sollten keine schnellen Blitzeffekte enthalten.
Testen auf Accessibility
- Litmus Accessibility Checker: Prüft E-Mails auf gängige Accessibility-Probleme
- NVDA/VoiceOver: Screenreader, die E-Mails vorlesen; manuelle Tests damit sind sehr aufschlussreich
- Colour Contrast Checker (webaim.org): Kostenlose Kontrast-Überprüfung
- Accessible Email.org: Ressourcen und Checklistens für barrierefreie E-Mails
Beispiele
- E-Commerce: Produktbilder erhalten beschreibende ALT-Texte mit Farbe, Material und Produktname; Preise werden nie nur in roter Farbe dargestellt, sondern immer auch im Text.
- Newsletter: Alle Überschriften verwenden echte H2/H3-Tags; der Kontrast zwischen grauem Body-Text und weißem Hintergrund wird auf 4,5:1 erhöht.
- Willkommens-E-Mail: Der CTA-Button erhält
aria-label="Kostenloses Konto jetzt erstellen"statt nur „Erstellen". - Event-Einladung: Das Datum des Events erscheint nicht nur als rote, fette Schrift, sondern auch als Text im natürlichen Satzgefüge.
- Transaktionsmail: Die Bestelldetails-Tabelle wird mit
role="presentation"ausgezeichnet, damit Screenreader sie nicht als Datentabelle interpretieren.
In der Praxis
- Mailchimp: Bietet ALT-Text-Felder für alle Bilder im Editor; Farbauswahl ohne Kontrastprüfung
- Klaviyo: ALT-Text-Felder vorhanden; für fortgeschrittene Accessibility ist HTML-Editing notwendig
- ActiveCampaign: Ähnlicher Funktionsumfang wie Mailchimp
- Brevo: ALT-Text-Unterstützung; Kontrastprüfung extern notwendig
Für systematische Accessibility-Tests empfiehlt sich Litmus E-Mail Testing, das einen dedizierten Accessibility-Check bietet.
Vergleich & Abgrenzung
Accessibility unterscheidet sich von gutem Responsive E-Mail Design, auch wenn sich beide Themen ergänzen. Responsives Design passt E-Mails an Bildschirmgrößen an; Accessibility stellt sicher, dass E-Mails unabhängig von körperlichen Fähigkeiten nutzbar sind. Beide Konzepte zusammen ergeben das vollständige Bild von inklusivem E-Mail-Design.
Häufige Fragen (FAQ)
Wie setze ich E-Mail Accessibility konkret um? Beginne mit den drei wichtigsten Maßnahmen: ALT-Texte für alle Bilder ergänzen, Kontrastverhältnisse prüfen (mindestens 4,5:1) und aussagekräftige Link- und Button-Texte verwenden. Diese drei Schritte decken die häufigsten Accessibility-Probleme ab und können in wenigen Minuten in jedem E-Mail-Marketing-Tool umgesetzt werden.
Was sind typische Fehler bei E-Mail Accessibility? Die häufigsten Fehler sind: keine ALT-Texte für Bilder, zu geringer Farbkontrast zwischen Text und Hintergrund, nichtssagende Link-Texte wie „Hier klicken", und das Fehlen eines Plaintext-Fallbacks. Viele dieser Fehler entstehen durch Templates, die nicht auf Barrierefreiheit ausgelegt sind.
Weiterführend
- Accessible Email.org: Ressourcen und Checklisten – accessible-email.org
- WebAIM Colour Contrast Checker – webaim.org/resources/contrastchecker
- Litmus: „Email Accessibility Guide" (Litmus, 2024) – litmus.com/blog
- WCAG 2.1 Richtlinien – w3.org/WAI/WCAG21/quickref
