Fehler bei der E-Mail-Barrierefreiheit, die Abonnenten stören, und wie Sie diese beheben
E-Mail-Barrierefreiheit ist ein ziemlich einfaches Konzept: Alle, die Ihre E-Mail erhalten, sollten diese lesen und mit ihr interagieren können. Alle. Das in die Tat umzusetzen, ist jedoch etwas komplizierter, weshalb so viele Unternehmen Schwierigkeiten haben, es richtig zu machen.
Aber sie müssen es richtig machen. Warum? Über 12 Millionen Menschen allein in den USA haben eine Form von Sehbehinderung, einschließlich Farbenblindheit. Schwerhörigkeit ist das am dritthäufigsten gemeldete chronische Problem bei älteren Menschen, aber 65 % der Menschen mit Hörverlust sind jünger als das Rentenalter. Und bis zu 10 % der Weltbevölkerung haben Legasthenie.
Da Millionen von Menschen weniger als optimale E-Mail-Erlebnisse haben, werden Unternehmen und Entwicklungsteams, die durch Barrierefreiheit überzeugen, in den kommenden Jahren erfolgreich sein. Es erfordert zwar etwas zusätzlichen Aufwand, aber es zahlt sich aus.
Hier sind einige Beispiele, warum Ihre E-Mails für bestimmte Personen in der Abonnentschaft möglicherweise nicht barrierefrei sind. Die meisten davon hängen mit Sehbehinderungen zusammen, einer der häufigsten Anforderungen an die Barrierefreiheit.
Unleserlicher Farbkontrast
Die WCAG-Standards empfehlen ein Mindestkontrastverhältnis von 4,5:1 für digitalen Text. Wenn Ihr Hintergrund nicht weiß ist, müssen Sie sehr sorgfältig auswählen, welche Farben Sie für Text, Schaltflächen und andere Elemente verwenden. Es ist sehr schwierig, zwischen Vordergrund und Hintergrund zu unterscheiden, wenn sie ähnliche Farbtöne haben. Daher sollten Sie Farbe mit anderen Hinweisen wie Symbolen oder Text kombinieren.
Selbst bei einem weißen Hintergrund beeinträchtigen Sie unter Umständen die Lesbarkeit. Die Verwendung von Gelb und reinem Grün für Text irritiert alle, selbst Personen in der Abonnentschaft mit voller Sehkraft. Das liegt daran, dass sie sehr niedrige Kontrastverhältnisse zu Weiß aufweisen – weniger als 2:1. Schwarz auf Weiß bietet mit 21:1 den höchsten Kontrast. Es mag „langweilig“ sein, ist aber bei Weitem am einfachsten zu lesen. Und was ist letztendlich wichtiger als das?
Wenn Sie jedoch das Bedürfnis haben, farbigen Text zu verwenden, oder wenn Text oder Schaltflächen beim Darüberfahren die Farbe ändern, sollten Sie diese mit Bedacht wählen. Nutzen Sie ein Test-Tool für Barrierefreiheit wie das von Email on Acid: Campaign Precheck. Farbkontrast ist ein Aspekt der E-Mail-Barrierefreiheit, der hiermit getestet wird Campaign Precheck, sodass Sie wissen, falls Sie jemals eine E-Mail mit schwer lesbarem Text versenden.
Mikroskopische oder „kreative“ Schriftarten
Sie könnten in Versuchung geraten, verspielte oder verrückte Schriftarten zu verwenden, wenn Ihre Markenrichtlinien dies zulassen – Halloween-Themes sind dafür berüchtigt. Aber es macht keinen Spaß, wenn niemand sie lesen kann. Zudem ist das Lesen verrückter Schriftarten auf Bildschirmen immer schwieriger als auf Papier, insbesondere auf winzigen Bildschirmen.
Entscheiden Sie sich für einfache und gut lesbare Schriftarten statt für Schreibschriften oder themenbezogene Schriftarten (Buchstaben, die aussehen wie Dinosaurier oder als ob sie zu einem Erpresserbrief gehören, sind vielleicht nicht die beste Wahl). Häufig werden serifenlose Schriftarten wie Arial oder Helvetica bevorzugt.
Verwenden Sie außerdem Schriftarten, die größer als 14px sind. Auch hier gilt: Kleine Schriftarten sind auf Bildschirmen für alle schwerer lesbar. Für Menschen mit auch nur teilweiser Sehbehinderung wird dies zu anstrengend, sodass sie den Versuch abbrechen.
Gedrängter Text
Unzureichender Zeilenabstand (Durchschuss) und Zeichenabstand (Kerning) oder große Textblöcke ohne Absätze oder Leerräume lassen E-Mails dicht gedrängt wirken, sodass sie schwer zu überfliegen und zu lesen sind.
Teilen Sie Text anstelle von großen Blöcken in kleinere Absätze auf und verwenden Sie semantische Kopfzeilen sowie Aufzählungslisten. Diese Struktur steigert nicht nur das Engagement, sondern ermöglicht es Screenreadern auch, den E-Mail-Inhalt effizienter zu verarbeiten und darin zu navigieren.
Komplexe Sprache
Die Verwendung von allzu komplexen Sätzen, Fachjargon oder langen, dichten Absätzen macht den Inhalt für alle schwerer lesbar und verständlich, insbesondere für Menschen mit kognitiven oder neurologischen Beeinträchtigungen.
Für eine umfassende Barrierefreiheit wird ein Sprachniveau der 8. Klasse empfohlen.
Verzicht auf semantisches HTML
Screenreader sind Hilfsmittel, mit denen Menschen mit Sehbehinderungen oder anderen kognitiven Einschränkungen Online-Inhalte lesen und mit diesen interagieren können. Sie sind nicht nur für blinde Menschen gedacht, sondern auch für Menschen mit Erkrankungen wie einem Glaukom oder Grauem Star. Allerdings müssen Ihre Inhalte barrierefrei sein, damit der Screenreader der Abonnentschaft ein gutes Erlebnis bietet. Semantisches HTML ist der Schlüssel, um dies erfolgreich umzusetzen.
Semantisches HTML teilt einem Screenreader mit, wie er verschiedene Elemente wie Überschriften, Schaltflächen und Absätze interpretieren soll.
Durch die Verwendung semantischer Tags wie
,
,
Mit Überschriften können sie jedoch schneller zu verschiedenen Abschnitten springen. Andere Tags wie und Dies ist eines der ärgerlichsten E-Mail-Erlebnisse und einer der unklügsten Fehler, die Sie begehen können. Zum einen haben viele Menschen mit normaler Sehkraft ihren E-Mail-Client so eingestellt, dass keine Bilder angezeigt werden. Wenn Sie also eine E-Mail versenden, die nur aus einem Bild besteht, sehen diese beim Öffnen gar nichts. Das ist schlecht. Darüber hinaus sind Nur-Bild-E-Mails jedoch die am wenigsten barrierefreien E-Mails, die Sie überhaupt versenden können. Screenreader können nämlich nicht mit den Inhalten des Bildes interagieren (es sei denn, Sie verwenden Alt-Text, worauf wir gleich noch eingehen werden). Wenn Sie also eine große, wunderschöne Grafik erstellen, die mit Text, Bildern und einem CTA gefüllt ist, entgeht allen, die einen Screenreader nutzen, Ihre gesamte Nachricht. Viel schlimmer geht es kaum, wenn das Ziel E-Mail-Marketing ist. Stellen Sie stattdessen sicher, dass Ihre wichtigsten Informationen als Live-Text eingebunden sind. Verwenden Sie für wichtige Informationen und interaktive Elemente immer Live-Text. Binden Sie weiterhin Bilder ein, um wichtige Punkte hervorzuheben oder die Aufmerksamkeit auf bestimmte Dinge zu lenken. Es gibt sogar Möglichkeiten, Ihren Call-to-Action geschmackvoll sowohl im Live-Text als auch auf Bildern zu wiederholen. Aber wenn Sie sich für eines entscheiden müssen, ist Live-Text der richtige Weg. Fragen Sie sich selbst: „Wenn keines dieser Bilder geladen wird und mir nur Text bleibt, werden die Leute meine Nachricht dann trotzdem verstehen?“ Ein Check der E-Mail-Barrierefreiheit, wie der von Email on Acid, hilft Ihnen ebenfalls dabei, Lücken zu erkennen. Nur-Bild-E-Mails sind das eine. Wenn Sie jedoch Bilder in Ihrer E-Mail versenden, müssen Sie dennoch sicherstellen, dass Ihre wichtigsten Nachrichten und CTAs auch im Textteil der E-Mail erscheinen. Warum? Denn wenn der CTA nur im Bild angezeigt wird, wird er von niemandem gesehen, der einen Screenreader verwendet. Wenn er nicht gesehen wird, kann er auch nicht angeklickt werden. Es ist also in Ordnung, einen CTA auf dem Bild zu platzieren, um alle anderen anzusprechen. Sie sollten ihn jedoch auch an einer anderen Stelle in der E-Mail platzieren, wo wirklich alle ihn garantiert sehen. Dies gilt auch für jegliches andere Messaging oder kritische Textelemente, die für alle sichtbar sein sollen. Und wo wir gerade beim Thema sind: Selbst wenn Sie Messaging in Bilder integrieren, dürfen Sie den Farbkontrast nicht vergessen. Im Allgemeinen ist es riskant, Text mit Bildern zu kombinieren, es sei denn, dies geschieht äußerst behutsam. Genau wie bei Bildern ist der Farbkontrast bei Schaltflächen eine häufige Ursache für mangelhafte E-Mail-Barrierefreiheit. Die Farbe der Schaltfläche, die Farbe des Textes darauf und die Hintergrundfarbe wirken alle zusammen und sorgen entweder für ein einfaches Leseerlebnis oder für ein frustrierendes. Schaltflächen, die keinen ausreichenden Farbkontrast aufweisen, zu klein sind oder keine eindeutige semantische Bedeutung haben (z. B. durch die Verwendung von `role=“button“` für Screenreader), erschweren die Interaktion für Menschen mit motorischen Beeinträchtigungen oder für jene, die Screenreader nutzen. Es ist üblich, Links in einer anderen Farbe als den restlichen Text darzustellen. Für Abonnentinnen und Abonnenten mit einer Form von Farbenblindheit erhöht dies jedoch das Risiko, dass sie den Link übersehen. Links, die sich vom umgebenden Text nicht deutlich unterscheiden – sei es durch Farbe (ohne ausreichenden Kontrast) oder durch Unterstreichung –, werden von der Leserschaft leicht übersehen. Die Rot-Grün-Schwäche ist die häufigste Form, aber es gibt noch weitere. Um dies zu vermeiden, sollten Sie andere visuelle Hinweise nutzen, wie etwa Unterstreichungen, Sterne um den Link herum oder Pfeile und andere grafische Elemente, um die Aufmerksamkeit darauf zu lenken. Die Verwendung generischer Phrasen wie „Hier klicken“ oder „Mehr erfahren“ als Hyperlink-Ankertext bietet Personen, die Screenreader verwenden und oft anhand einer Liste von Links navigieren, keinen Kontext zum Ziel. Menschen, die auf Screenreader angewiesen sind, können Ihre Bilder nicht sehen. Was können Sie also tun? Die einzige Möglichkeit, dies zu umgehen, besteht darin, für jedes Bild Alt-Text zu verfassen. Ohne diesen könnten die Bilder für eine Person mit Sehbehinderung ebenso gut unsichtbar sein. Der Alt-Text beschreibt das Bild. Sie müssen jedoch ausreichend Details verwenden, damit die Abonnentschaft klar versteht, was darauf zu sehen ist und – falls Text vorhanden ist –, was dort steht. Warum löst dies nicht das zuvor erwähnte Problem mit Nur-Bild-E-Mails? Denn wenn die gesamte E-Mail aus einem Bild besteht, müsste der Alt-Text im Grunde die komplette Nachricht der E-Mail wiedergeben, wie sie im Bild enthalten ist. Wenn Sie sich diese Mühe machen, warum schreiben Sie es dann nicht einfach … in die E-Mail? Der Alt-Text ist nicht der richtige Ort für eine komplette E-Mail-Nachricht. Zudem ist dies nicht der richtige Ort für Weitschweifigkeit. Vermeiden Sie daher redundante Phrasen wie „Bild von“ im Alt-Text oder im Fließtext. Bei E-Mails, die Videoinhalte enthalten, führt das Weglassen von Untertiteln oder Transkripten zu erheblichen Barrieren für gehörlose oder schwerhörige Menschen. Das Anhängen von Dokumenten, die nicht barrierefrei sind (z. B. PDFs ohne ordnungsgemäßes Tagging, Alt-Text oder logische Lesereihenfolge), hindert Personen, die auf assistive Technologien angewiesen sind, möglicherweise daran, auf wichtige Informationen zuzugreifen. Auch wenn sie ansprechend sind, können zu viele Animationen ablenkend und verwirrend wirken, insbesondere für Menschen mit kognitiven Einschränkungen oder Bewegungsempfindlichkeit. Bei der E-Mail-Barrierefreiheit geht es nicht nur um Sehbehinderungen. Wenn Sie E-Mail-Segmente haben, in denen Menschen mit unterschiedlichen Sprachen vertreten sind: Was erlebt eine Person in diesem Segment, wenn sie zudem auf einen Screenreader angewiesen ist? Teilen Sie dem Screenreader mit, in welcher Sprache die E-Mail verfasst ist, da dies beeinflusst, wie dieser die E-Mail an die Abonnentschaft übermittelt. Dies ist ein weiteres Detail, das leicht übersehen wird. Dies ist ein weiterer Aspekt, den das von Email on Acid angebotene Tool für Barrierefreiheit automatisch übernimmt, sodass Sie sich darüber keine Gedanken mehr machen müssen. Das sieht im Allgemeinen furchtbar aus, also tun Sie es einfach nicht. Es ist für alle schwerer zu lesen. Allerdings ist zentrierter Text – insbesondere wenn es um ganze Absätze geht – für Menschen mit Legasthenie besonders schwer zu lesen. Linksbündiger Text wird im Allgemeinen bevorzugt, da er einen geraden linken Rand bildet , an dem die ersten Buchstaben jeder Zeile bündig abschließen, was das Lesen der E-Mail erleichtert. Diese Ausrichtung hilft der Abonnentschaft dabei, schnell zu erfassen, wo jede Zeile beginnt. Dies verringert den Aufwand für die Lesenden, einschließlich derjenigen mit Legasthenie oder Sehbehinderungen. Möchten Sie trotzdem zentrierten Text verwenden? Beschränken Sie sich dabei nach Möglichkeit auf Überschriften oder kurze, alleinstehende Sätze. Wenn Sie Tabellen in E-Mails für das Layout verwenden, ohne das Attribut role=“presentation“ hinzuzufügen, können Screenreader diese als Datentabellen missverstehen und den gesamten HTML-Code laut vorlesen. Dies führt zu Verwirrung bei Abonnentinnen und Abonnenten, die auf assistive Technologien angewiesen sind. Das Hinzufügen von role=“presentation“ teilt Screenreadern mit, die Tabelle rein als visuelles Layout-Element zu behandeln, was die Barrierefreiheit erheblich verbessert. Auch dies betrifft weitaus mehr Menschen als nur diejenigen mit Sehbehinderungen. Alle, die sich ihre E-Mails von Siri oder Alexa vorlesen lassen, bemerken sofort, wenn Ihnen dieser Fehler unterläuft. Screenreader und Voice-Reader sind auf klare Betreffzeilen und Preheader angewiesen, um zu vermitteln, worum es in der E-Mail geht. Die Verwendung vager oder neugierig machender Betreffzeilen wie „Heute ist Ihr Glückstag …“ oder „Details im Inneren!“ wirkt oft verwirrend und frustrierend – insbesondere für Menschen mit kognitiven Einschränkungen, Gedächtnisverlust oder Legasthenie. Diese Phrasen bieten keinen sinnvollen Kontext, was es für die Abonnentschaft schwieriger macht, zu entscheiden, ob sie mit der E-Mail interagieren soll. Zunächst einmal sollten Sie die Betreffzeile niemals leer lassen oder den Preheader-Text automatisch ausfüllen lassen. Das wird niemanden inspirieren, der mitliest oder zuhört. Seien Sie stattdessen zielgerichtet in dem, was Sie schreiben. Auch wenn Sie nicht der Meinung sind, dass Ihr Text preisverdächtig ist, zeigen Studien einen Anstieg der Öffnungsraten um 3 bis 8 % , wenn Sie überhaupt irgendeinen bewusst formulierten Preheader-Text hinzufügen. Bei Betreffzeilen sollten Sie auf etwas Spannendes und Ansprechendes abzielen, dabei aber nicht unehrlich oder übertrieben kitschig wirken (es sei denn, das entspricht natürlich Ihrer Marke!). Die Abonnentschaft hat Klick-Köder und reißerische Überschriften längst durchschaut. Und wenn Sie etwas versprechen, das die E-Mail nicht enthält, wird die Klickrate Ihrer nächsten E-Mail darunter leiden … und ebenso Ihre Zustellbarkeit. Verschwenden Sie keinen Platz für eine Wiederholung der Betreffzeile. Stattdessen sollte der Preheader-Text den Betreff ergänzen. Wenn die Betreffzeile beispielsweise eine Frage stellt, könnte der Preheader-Text damit beginnen, diese Frage zu beantworten. Brauchen Sie Inspiration? Entdecken Sie fünf Ideen für E-Mail-Preheader-Texte für den Einstieg. Wenn Sie E-Mail-Kampagnen nicht im Hinblick auf Barrierefreiheit testen – sei es mit Tools oder durch die Simulation assistiver Technologien –, bleiben potenzielle Probleme oft unbemerkt, bevor sie die Abonnentschaft erreichen. Niemand wird über Nacht zur Fachkraft für Barrierefreiheit, aber allein die Behebung grundlegender Probleme verschafft Ihnen einen Vorsprung vor vielen in der Branche. Ein guter Ausgangspunkt ist es, zu verstehen, wie leicht Ihre aktuellen E-Mails konsumiert werden können. Dies bietet Ihnen eine Grundlage für Verbesserungen. Doch der Versuch, alles selbst herauszufinden, ist nicht nur umständlicher, sondern lässt auch viel Spielraum für Fehler. Wie bei allem, was mit E-Mail-Effizienz zu tun hat, ist es entscheidend, die richtigen Tools zu finden. Das Campaign-Precheck-Tool von Email on Acid wurde entwickelt, um potenzielle Probleme sofort zu erkennen und sogar direkte Lösungen anzubieten. Dabei steht die E-Mail-Barrierefreiheit ganz oben auf der Liste. Es hilft Ihnen nicht nur dabei festzustellen, woran noch gearbeitet werden muss, sondern gibt Ihnen auch das beruhigende Gefühl, dass alles perfekt ist, wenn Sie endlich auf „Senden“ klicken. Erfahren Sie mehr über das Campaign-Precheck-Tool für E-Mail-Barrierefreiheit und wie es Ihnen hilft, ADA-konforme E-Mails zu versenden. Wie Sie vielleicht inzwischen festgestellt haben, gehört zur Erstellung vollständig barrierefreier E-Mails – für alle – viel mehr als nur die Verwendung gut lesbarer Farben. Je mehr Elemente Sie Ihren E-Mails hinzufügen, desto wahrscheinlicher ist es, dass Sie ein Barrierefreiheitsproblem für einige Personen in Ihrer Abonnentschaft schaffen. Möchten Sie mehr über E-Mail-Barrierefreiheit erfahren? Melden Sie sich für unseren Newsletter an, um die besten Tipps und Tricks in Ihrem Posteingang zu erhalten.Der Versand von Nur-Bild-E-Mails
Wichtigen Text auf Bildern verstecken
Schwer lesbare Schaltflächen
Unsichtbare Links
Nichtssagender Linktext
Unsichtbare Bilder – kein Alt-Text
Videos ohne Untertitel oder Transkripte
Nicht barrierefreie Anhänge
Übermäßige oder ablenkende Animationen
Spanische E-Mails mit englischem Akzent lesen
Gesamten Text zentrieren
Tabellen nicht korrekt codieren
Fehlende oder unklare Betreffzeilen und Preheader
E-Mails nicht auf Barrierefreiheit testen
Zusammenfassung
