Digitale Barrierefreiheit endet für Menschen mit Einschränkungen nicht am Rand des Browserfensters. Wir versuchen, Nutzer langfristig an Unternehmen zu binden, versenden Newsletter oder kleine Erinnerungen per E-Mail, dass noch ein Produkt im Warenkorb liegt. Die Bestellbestätigung lässt dann hoffentlich nicht lang auf sich warten. Legen wir Wert auf barrierefreie E-Mails und Newsletter, dann stellen wir sicher, dass interessante und wichtige Informationen wirklich beim Leser ankommen. Schauen wir uns einmal an, was es dabei alles zu beachten gibt.
Was sind barrierefreie E-Mails?
Ja, was macht eine E-Mail eigentlich barrierefrei? Im Prinzip gelten die gleichen Anforderungen wie für Websites, Dokumente oder gar Gebäude – sie müssen von allen Menschen ohne fremde Hilfe nutzbar sein. Knapp gesagt bedeutet das also, dass wir auch für E-Mails die wesentlichen Anforderungen der WCAG erfüllen müssen.
Dazu zählen beispielsweise:
- Ausreichend hohe Farbkontraste aller Texte und Icons
- Alternativtexte für Bilder
- Die Schrift passt sich an Einstellungen der Nutzer an
- Semantisch korrektes HTML in HTML-E-Mails
Im Prinzip kann man E-Mails also als kleine Websites verstehen, die direkt an die Nutzer verschickt werden. Aber es gibt natürlich auch Unterschiede. Werfen wir doch mal einen Blick auf die wichtigsten Besonderheiten barrierefreier Mails.
HTML-Mail oder Plain-Text?
Grundsätzlich gibt es 2 verschiedene Arten von Mails. Solche, die tatsächlich kleine Websites sind, also in HTML geschrieben und mit CSS gestaltet werden. Und auf der anderen Seite die klassischen Mails, die nur aus Text bestehen, auf englisch Plain-Text-Mails genannt. Doch welche der beiden Varianten ist nun barriereärmer? Nun, wie immer gilt: es kommt drauf an. Beide Varianten haben ihre Vor- und Nachteile.
Die Vorteile von HTML-E-Mails
- Bessere Gestaltungsmöglichkeiten: Farben, Schriftarten, Bilder und Layouts helfen, Ihre Marke auch in Mails sichtbar zu machen und Wiedererkennbarkeit zu schaffen.
- Interaktive Elemente: Links, Buttons und Call-to-Actions können gezielt eingesetzt werden.
- Bessere Lesbarkeit und Struktur: Durch Absätze, Überschriften und Hervorhebungen kann die E-Mail besser gegliedert werden. So werden Ihre Texte besser lesbar und verständlich.
- Tracking-Optionen: Öffnungsraten und Klicks lassen sich analysieren, um den Erfolg zu messen.
Die Vorteile von E-Mails nur mit Text
- Ablenkungsfreies Lesen: Gerade Menschen, die sich mit dem lesen schwer tun, profitieren von der ablenkungsfreien Gestaltung reiner Text-E-Mails. Ohne Bilder und gestalterische Elemente liegt der Fokus auf dem Inhalt.
- Schnellere Ladezeiten: Kein unnötiger Overhead durch HTML oder Bilder.
- Robuste Darstellung: Die Darstellung von reinem Text ist vorhersagbar. HTML-Tags oder CSS-Befehle werden oft von Anbietern herausgefiltert oder können von den Programmen nicht angezeigt werden.
- Authentischer und persönlicher: Oft wirken Plain-Text-Mails wie direkte, persönliche Nachrichten. Ihren Freunden würden Sie ja auch keine durchgestalteten HTML-Mails schicken, oder?
Fazit – was soll man denn nun nehmen?
Keine der beiden Varianten ist per se barrierefrei. Wo reine Text-Mails durch eine ablenkungsfreie Darstellung punkten, bietet HTML die Möglichkeit, durch Absätze, Überschriften und Hervorhebungen auch semantische Struktur hinzuzufügen. Davon profitieren auch Screenreader. Lassen Sie Ihren Nutzern doch einfach die Wahl, wie sie angeschrieben werden wollen. So nutze ich es auch bei stolperfrei zum Mitnehmen, dem stolperfreien Newsletter. Die Leser entscheiden bei der Anmeldung selbst, welche E-Mails sie erhalten wollen.
Einschränkungen bei HTML und CSS
Auch wenn HTML-E-Mails auf den ersten Blick wie kleine Websites wirken, gibt es erhebliche technische Einschränkungen. Viele E-Mail-Clients interpretieren HTML und CSS anders als Webbrowser, was zu Darstellungsfehlern führen kann.
Eingeschränkte HTML-Unterstützung
Ein großes Problem ist, dass viele Clients bestimmte HTML-Elemente ignorieren oder entfernen. Der <head>-Bereich wird oft gar nicht berücksichtigt, sodass externe Stylesheets (<link rel="stylesheet">) nicht funktionieren. Auch interaktive Elemente wie <video>, <audio> oder <form> sind meist nutzlos, da sie aus Sicherheitsgründen blockiert werden. JavaScript wird in keiner E-Mail-Umgebung unterstützt, was dynamische Inhalte unmöglich macht.
CSS-Probleme und Rendering-Unterschiede
Viele moderne CSS-Techniken sind in E-Mails unzuverlässig. position: absolute;, display: flex; und grid werden von einigen Clients ignoriert. Besonders Microsoft Outlook sorgt für Probleme, da es eine alte Rendering-Engine nutzt, die beispielsweise border-radius und background-image nicht korrekt darstellt. max-width und min-width funktionieren oft nicht wie erwartet, was zu ungewollten Layout-Problemen führen kann.
Auch individuelle Schriften werden oft von den E-Mail-Programmen gesperrt. Beschränken Sie sich also am besten auf Systemschriften wie Arial oder Calibri.
Die Lösung ist Vereinfachung und Test
Um diese Probleme zu vermeiden, werden HTML-E-Mails oft mit Tabellen umgesetzt. Das jedoch widerspricht dem Gedanken semantisch korrekter Auszeichnung und schadet der Barrierefreiheit Ihrer E-Mail. Nutzen Sie also ruhig trotzdem display: flex; und grid und akzeptieren Sie, dass die Texte für manche Leser untereinander statt nebeneinander stehen.
Wichtiges CSS steht am besten inline direkt am Element, das wird von den meisten Programmen zuverlässig unterstützt. Testing-Tools wie Mailtrap helfen dabei, die Darstellung in verschiedenen Clients zu prüfen und Probleme frühzeitig zu erkennen.
Auf E-Mails antworten können
Sie haben bestimmt auch schon diverse E-Mails von do-not-reply@toller-shop.de bekommen, oder? Gerade automatisch erzeugte Nachrichten wie Bestellbestätigungen werden gern von E-Mail-Adressen verschickt, auf die man nicht direkt antworten kann.
In den Metadaten einer E-Mail kann man zwar versteckt eine andere E-Mail hinterlegen, die beim Klick auf „Antworten“ verwendet wird, aber oft genug wird das vergessen. Auch können Nutzer andere Wege nutzen um antworten zu wollen und direkt auf die Absenderadresse klicken wollen um eine neue E-Mail zu erstellen.
Versuchen Sie doch deshalb, direkt eine E-Mail zum Versand zu nutzen, auf die Nutzer auch antworten dürfen und erschaffen Sie keine zusätzlichen Hürden. Nichts ist frustrierender, als erst nach der richtigen Ansprechperson zu suchen, wenn man von ihr doch vermeintlich gerade erst eine Mail erhalten hat.
Was muss ich bei einem Newsletter beachten?
Newsletter sind mehr als einfache E-Mails. Damit ein Newsletter wirklich zugänglich ist, beginnt Barrierefreiheit schon bei der Registrierung und endet mit einer einfachen Abmeldemöglichkeit. Schauen wir uns beide einmal im Detail an.
Barrierefreie Anmeldung zum Newsletter
Das Anmeldeformular für einen Newsletter sollte für alle Nutzer leicht verständlich und zugänglich sein. Fragen Sie deshalb nur ab, was Sie wirklich brauchen. Für den Versand eines Newsletters braucht es eine E-Mail-Adresse (und ggf. rechtliche Hinweise), mehr nicht. Alle anderen Angaben (Name, Interessen….) sollten also maximal freiwillig sein.
Eine der häufigsten Hürden für Menschen mit Sehbehinderungen sind aber Captchas. Sie sollen ausschließen, sind also von vornherein nicht dazu geeignet, eine wirkliche Zugänglichkeit für alle zu gewährleisten. Und wenn sie alle rein lassen, dann sperren sie auch keine Spam-Bots mehr aus.
Mehr informationen über Formulare und Captchas gibt es schon hier:
Link zur Abmeldung
Ebenso wichtig wie die Anmeldung ist eine unkomplizierte Abmeldung. Der Abmelde-Link muss auch rechtlich leicht auffindbar in jeder E-mail enthalten sein – am besten gut sichtbar im unteren Bereich der E-Mail. Achten Sie auf einen sprechenden Linktext, um auch Nutzern von Screenreadern eine Abmeldung zu ermöglichen. Es heißt also nicht „Hier klicken, um sich abzumelden.“, sondern eher „Vom Newsletter abmelden“.
Und danach? Bitte zwingen Sie Ihre Nutzer nicht dazu, Ihre Entscheidung umständlich zu begründen. Ich weiß, Sie sind neugierig und wollen sicher Feedback haben um sich langfristig zu verbessern. Eine Abmeldung sollte trotzdem direkt erfolgen und keine weitere Aktion brauchen. Fragen Sie danach doch noch nach Feedback oder bieten Sie die Möglichkeit, sich wieder anzumelden.
Eine transparente Kommunikation bei Anmeldung und Abmeldung sorgt nicht nur für Barrierefreiheit, sondern auch für mehr Vertrauen und eine bessere Nutzererfahrung.
Fazit – Barrierefreie Newsletter und E-Mails als Chance
Barrierefreie Mails und Newsletter stellen sicher, dass alle Empfänger wichtige Informationen problemlos nutzen können. Während HTML-Mails mehr Struktur bieten, sind reine Text-Mails oft klarer – bieten Sie doch auch in Ihren Newslettern barrierefrei beide Möglichkeiten an.
Letztlich profitieren alle von gut gestalteten, zugänglichen E-Mails – sie sind verständlicher und sorgen dafür, dass Ihre Inhalte dort ankommen, wo sie sein sollen: bei Ihren Lesern.