E-Mails für alle: Tipps und Tricks für barrierefreies E-Mail-Marketing

10. Juni 2024

Bei der Gestaltung von Websites und Apps ist Barrierefreiheit schon lange ein wichtiges Thema, um sicherzustellen, dass Inhalte auch für Menschen mit Behinderungen zugänglich sind. Gemäß dem European Accessibility Act müssen Unternehmen bis 2025 digitale Barrierefreiheit gewährleisten. Viele werbetreibende Unternehmen prüfen derzeit, ob neben Website und Apps auch die anderen digitalen Kanäle im Hinblick auf Barrierefreiheit gut aufgestellt sind.

Was bedeutet Barrierefreiheit im E-Mail-Marketing? Informationen in E-Mails sollten für alle Leserinnen und Leser zugänglich sein – unabhängig von körperlichen oder technischen Einschränkungen. Dazu gehört, dass E-Mails so aufbereitet werden, dass sie von Lesegeräten, sogenannten Screenreadern, die von sehbehinderten Menschen verwendet werden, gut erfasst und ausgegeben werden können. Darüber hinaus ist die technische Barrierefreiheit zu beachten, d. h. es ist sicherzustellen, dass Mailings systemunabhängig gelesen werden können und auf allen gängigen Endgeräten korrekt dargestellt werden. Bei der inhaltlichen Barrierefreiheit ist zu prüfen, ob die Inhalte für die jeweilige Zielgruppe verständlich und z.B. unabhängig vom Bildungshintergrund zugänglich sind.

Was können Sie tun, um Ihr E-Mail-Marketing barrierefrei zu gestalten?

Programmierung barrierefreier E-Mail-Templates

Responsive E-Mail-Templates, die nach den aktuellen HTML/CSS Webstandards erstellt wurden, sind in der Regel barrierearm. Sie können jedoch zusätzlich für Screenreader optimiert werden. Beginnen Sie damit, die Sprache im Code des Templates anzugeben. Dies hilft Screenreadern, den richtigen Sprachmodus zu verwenden: <html lang=“de“>.
Stellen Sie sicher, dass Tabellen korrekt gekennzeichnet sind, um ihre Struktur verständlich zu machen: <table role=“presentation“>…</table>. Tabellen, die für die Gestaltung verwendet werden, sollten im Code gekennzeichnet werden, damit Benutzer:innen von Screenreadern die Inhalte in der richtigen Reihenfolge vorgelesen bekommen. Denn eine Tabelle wird nicht so vorgelesen, wie sie auf dem Bildschirm erscheint, sondern Zeile für Zeile. Es ist jedoch möglich, einer Tabelle im Code eine Rolle zuzuweisen, damit der Screenreader weiß, dass es sich nur um eine Formatierungstabelle handelt.
Verwenden Sie den UTF-8 Zeichensatz, um sicherzustellen, dass alle Zeichen korrekt dargestellt werden: <meta charset=“UTF-8″>.
Zur Strukturierung der Inhalte sollten Überschriften als HTML-Elemente deklariert werden (z.B. <h1>, <h2>), so dass Empfänger:innen mit dem Screenreader mit einer Taste von Titel zu Titel springen können. Zu beachten ist, dass <span>-Elemente von Screenreadern nicht erkannt werden.

Visuelle Gestaltung barrierefreier E-Mails

Neben der Optimierung des Codes sollte auch der Inhalt jeder einzelnen E-Mail klar strukturiert sein, damit der Inhalt des Newsletters leicht erfasst werden kann.
Verwenden Sie hohe Farbkontraste und eine gut lesbare Schrift ohne Verzierungen, um die Lesbarkeit zu verbessern.
Bei der Auswahl von Schrift- und Hintergrundfarben sollten Sie aber unbedingt darauf achten, dass nicht nur die Barrierefreiheit bedacht wird, sondern auch auf die invertierte Darstellung der Farben im Darkmode.
Achten Sie bei mehrspaltigen Elementen auf die Textlänge, je kürzer und präziser, desto besser sind diese zu erfassen.
Lange Texte sollten nicht zentriert werden, da dies die Lesbarkeit und Zugänglichkeit beeinträchtigen können.
Weiße Flächen sind wichtig, damit der Text nicht zu dicht wirkt.
Verwenden Sie responsives Design, damit Ihre E-Mails auf allen Geräten und Bildschirmgrößen gut lesbar sind.
Bieten Sie eine Nur-Text-Version Ihrer E-Mail für Leser:innen an, deren E-Mail-App keine HTML-E-Mails anzeigen kann.

So erstellen Sie Newsletter mit barrierefreien Inhalten

Verlinkte Wörter im Fließtext stören den Lesefluss von Screenreadern und sollten vermieden werden.
Platzieren Sie aktivierende und aussagekräftige Call-To-Action-Texte am Ende von Textabschnitten.
Verwenden Sie aussagekräftige Linktexte und Alt-Texte für Bilder und Buttons: Bei allen Bildern in Ihren Mailings sollten Sie bedenken, dass Bilder in manchen E-Mail-Programmen standardmäßig nicht angezeigt werden oder von Menschen mit Sehschwäche nicht richtig erkannt werden können. Texte sollten daher niemals ausschließlich auf Bildern integriert werden, sondern zusätzlich als lesbarer Text.
Außerdem ist es sinnvoll, Bilder mit einem Alternativtext zu versehen: Lässt sich die Empfängerin das Mailing vorlesen, wird der hier definierte Text ausgegeben. Beschreiben Sie, was zu sehen ist oder wohin der Link führt – vermeiden Sie unnötige Dopplungen und generische Platzhaltertexte in den Alt-Texten („Hier klicken“, „Link-Icon“, „Unternehmen ABC“).
Verwenden Sie eine direkte und klare Sprache und vermeiden Sie lange und komplizierte Sätze.
Reduzieren Sie die Verwendung von Emojis im Fließtext, da diese sonst mitgelesen werden. Aus „Es erwarten Sie Gutscheine 🎁 Prämien 🎉 Rabatte“ wird sonst zu: „[…] Gutscheine Geschenk Prämien Konfettikanone Rabatte“.
Vermeiden Sie rein visuelle Hinweise oder ergänzen Sie Icons mit Text, um sie verständlich zu machen.

Fazit: Mit überschaubarem Aufwand können Sie sicherstellen, dass Ihre E-Mail-Kampagnen für alle Empfänger zugänglich und verständlich sind und Sie die gesetzlichen Anforderungen bis 2025 erfüllen. Wir unterstützen Sie gerne bei der Optimierung Ihrer E-Mail-Templates und beraten Sie bei der Strukturierung und Optimierung ihrer Mailings.

Bessere User Experience für alle

Wir unterstützen Sie bei der Gestaltung wirksamer und barrierearmer E-Mail-Kampagnen. Kontaktieren Sie uns für ein unverbindliches Gespräch über Ihre Anforderungen!