Barrierefreiheit im E-Mail-Marketing: 7 einfache Tricks, um Ihren Code barrierefreier zu machen
Veröffentlicht: 2019-04-16Barrierefreiheit wird schnell zu einer ebenso wichtigen Säule des E-Mail-Marketings wie in der Benutzererfahrung und im Design. Immer mehr Marken stellen sicher, dass ihre E-Mail-Kampagnen von jedem Abonnenten genossen werden können , unabhängig davon, ob sie eine körperliche, visuelle oder kognitive Behinderung haben oder auch wenn sie aufgrund eines Unternehmensumfelds einfach keine Bilder in ihren E-Mails sehen können.
Als E-Mail-Marketer sind wir alle bestrebt, großartige E-Mails an die Posteingänge unserer Abonnenten zu senden. Wir führen Spam- und E-Mail-Tests durch, um sicherzustellen, dass unser Design auf allen Geräten und E-Mail-Clients perfekt wiedergegeben wird. Aber manchmal vergessen wir, ALT-Tags für unsere Bilder zu setzen, verwenden eine schwer lesbare Farbkombination oder optimieren unsere E-Mails nicht für Screenreader – und das verunsichert einige unserer Abonnenten.
Wenn Sie gerade erst damit beginnen, Ihren E-Mail-Code zugänglicher zu machen, können die Dinge überwältigend sein. Es gibt jedoch ein paar einfache Tricks, die Sie leicht implementieren können – und die einen großen Einfluss auf die Zugänglichkeit von E-Mails haben.
So überprüfen Sie Abschnitt für Abschnitt , ob Ihre E-Mail für alle Ihre Abonnenten zugänglich ist .
 | Ist Ihre E-Mail erreichbar?Barrierefreiheitsprüfungen in der Litmus-Checkliste machen es einfach, Ihre E-Mails anhand der wichtigsten Best Practices für Barrierefreiheit zu testen, Bereiche mit Verbesserungspotenzial zu identifizieren und Ihre E-Mails für alle Ihre Abonnenten zugänglicher zu machen. Mehr erfahren → |
Ihre Checkliste für Barrierefreiheit
1. Fügen Sie Ihrem <HTML> einen Sprachcode hinzu
Nicht alle Ihre Abonnenten lesen Ihre E-Mails auf ihren Laptops oder Telefonen – einige verwenden Screenreader, um auf Ihre E-Mails zuzugreifen. Da Ihr E-Mail-Inhalt laut vorgelesen wird, sollte er in der richtigen Sprache sein, damit die Aussprache korrekt ist. Sie möchten nicht, dass Ihre auf Französisch verfasste E-Mail in amerikanischem Englisch ausgesprochen wird, oder?
Um dies zu verhindern, müssen Sie den Screenreadern mitteilen, in welcher Sprache Ihre E-Mail verfasst ist. Wenn in Ihren E-Mails kein Sprachcode angegeben ist, können die Screenreader die Kopie nicht richtig aussprechen – und Ihre eloquente E-Mail wird möglicherweise ausgegeben klingt völlig falsch.
Aus diesem Grund ist es wichtig, Ihr <HTML> auf einen Sprachcode zu überprüfen – das ist ein einfacher Codeausschnitt, der die Sprache Ihrer E-Mail angibt. Wenn es noch nicht in Ihrem Code enthalten ist, fügen Sie lang=“xx“ hinzu – ersetzen Sie xx durch den entsprechenden Sprachcode für Ihre E-Mail. Eine Liste aller möglichen Sprachcodes und Lokalitäten, die es Ihnen ermöglicht, verschiedene Akzente zu berücksichtigen, wie beispielsweise eine Unterscheidung zwischen britischem und amerikanischem Englisch, finden Sie hier .
Dabei sind einige Sonderfälle zu beachten:
- Wenn Sie XML in Ihrem <HTML>-Tag verwenden, müssen Sie auch xml:lang=“xx“ hinzufügen .
- Wenn Sie den Outlook 120-dpi-Fix in Ihren E-Mail-Code einfügen, benötigen Sie diese Lösung , um eine Sprache anzugeben. So sieht unser Code mit diesem Fix aus:
<html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
Profi-Tipp: Es ist möglich, den Sprachcode dynamisch auszufüllen, wenn Sie die Lokalisierung in Ihrem ESP eingerichtet haben.
2. Fügen Sie immer ALT-Tags für Ihre Bilder ein
Beachten Sie, dass die Bilder in Ihren E-Mails für Ihre Abonnenten möglicherweise nicht immer sichtbar sind. Vielleicht haben sie ihre Bilder deaktiviert, oder sie haben eine schlechte Verbindung oder sie verwenden einen Screenreader – und wenn Sie viele wichtige Informationen in Ihre Bilder einfügen, gehen diese Nachrichten verloren. Hier kommt ALT-Text ins Spiel. Sie können Text festlegen, der für Ihre Abonnenten sichtbar ist (oder von ihrem Screenreader vorgelesen wird), damit sie immer noch die gleichen Nachrichten erhalten wie Personen, die Ihre Bilder sehen können.
Wo immer Sie ein <IMG>-Tag in Ihrem E-Mail-Code haben, stellen Sie sicher, dass Sie das ALT-Tag setzen. Wenn Sie bereits ALT-Tags ausgefüllt haben, überprüfen Sie, ob der Text mit dem Text auf dem Bild übereinstimmt. Wenn Sie leere ALT-Tags haben, stellen Sie sicher, dass das Bild keinen Text enthält, der ausgefüllt werden muss, damit ein Screenreader sie sehen kann. Wenn Ihre Bilder keine ALT-Tags und kein Text im Bild selbst enthalten – oder kein Text für die Bedeutung der E-Mail erforderlich ist – fügen Sie unbedingt einen leeren ALT-Tag hinzu: alt=““ . Wenn Sie dies nicht angeben, lesen Screenreader die URL des Bildes vor – und niemand möchte, dass ihnen eine lange URL vorgelesen wird!
Nachdem Sie alle Ihre ALT-Tags – leer oder nicht – für die Bilder in Ihrer E-Mail festgelegt haben, fügen Sie dem <IMG>-Tag für formatierten ALT-Text Schriftarten hinzu . Dieses Styling lässt Sie mit Ihrem ALT-Text ausgefallen sein und lässt Sie das Aussehen von Schriftart, Farbe, Größe, Stil und Gewicht ändern.
3. Integrieren Sie das Attribut role="presentation" in alle <TABLE>-Elemente
Die meisten E-Mail-Marketer verlassen sich auf Tabellen, um ihr E-Mail-Layout zu strukturieren, aber diese können für Screenreader ernsthafte Probleme verursachen. Wenn ein Screenreader eine Tabelle im Code Ihrer E-Mail identifiziert, wird sie laut vorgelesen. Es kann Ihnen buchstäblich sagen, wie viele Zeilen und Spalten es gibt, und Ihnen die Position und den Inhalt jeder Spalte mitteilen, sodass Sie Ihre Nachricht nicht verstehen können.
Aus diesem Grund ist es wichtig, dem Screenreader mitzuteilen, dass Sie die Tabelle nur zu Layoutzwecken verwenden. Sie können dies tun, indem Sie jeder Tabelle in Ihrer E-Mail role="presentation" hinzufügen . Diese Rolle weist die Screenreader an, jede semantische Bedeutung aus den Tabellen zu entfernen – statt Zeilen- und Spaltennummern vorzulesen, konzentriert sie sich stattdessen auf den Inhalt.
Schauen wir uns diesen wirklich einfachen E-Mail-Header aus einer unserer eigenen E-Mails an:
Bevor wir die Barrierefreiheit optimiert haben, sah unser Code so aus:
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>Ist Ihnen aufgefallen, dass ALT-Attribute fehlen und die Tabellen nicht auf role=”presentation” gesetzt sind ?
Diese kleinen Versehen haben einen großen Einfluss auf die Zugänglichkeit. So interpretiert ein Screenreader den obigen Code:
Screenreader: Nicht zugänglicher E-Mail-Header
Und hier ist derselbe Code, der umgestaltet wurde, indem das ALT=““- Attribut und role=“presentation“ zu den <TABLE> -Tags hinzugefügt wurden , um bildschirmlesefreundlich zu sein:
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>Screenreader: Zugänglicher E-Mail-Header
Wie Sie hören, gibt es einen großen Unterschied!
4. Verwenden Sie semantische Elemente, um Ihre Inhalte zu strukturieren
Semantische Elemente machen es einfach, die Inhaltshierarchie hervorzuheben und Abonnenten (und Screenreadern) zu zeigen, was eine Überschrift und was eine Absatzkopie ist. Das Einbinden semantischer Elemente gibt Ihren Abonnenten, die Screenreader verwenden, die Möglichkeit, eine E-Mail einfacher zu „scannen“.
Wenn Sie Ihre Kopie überprüfen, stellen Sie sicher, dass jede titelwürdige Kopie in ein <H> -Tag eingeschlossen ist: <H1> , <H2> , <H3> und so weiter. Stellen Sie in ähnlicher Weise sicher, dass alle Fließtexte in einem <P> -Tag enthalten sind. Beim Durchblättern Ihrer E-Mails legen Screenreader Wert auf bestimmte Kopfzeilen, und das Einrichten dieser <H>- und <P> -Tags erleichtert die Navigation in Ihrer E-Mail.
5. Richten Sie Ihre Kopie nach Möglichkeit links aus
Wenn es um Ihren Fließtext geht, kann es verlockend sein, die Ausrichtung mittig auszurichten. Wenn es jedoch um Barrierefreiheit geht, ist dies ein großes Don't !
Wenn Sie Ihren Text zentrieren, ändert sich der Anfangsrand für jede Zeile, was Ihre Abonnenten zwingt, härter zu arbeiten, um den Anfang jeder Zeile zu finden – und das ist eine Herausforderung für Menschen mit Legasthenie und anderen Lesebehinderungen. Wenn Sie eine Kopie haben, die länger als zwei Zeilen ist, richten Sie diese Kopie links aus. Dies ist besonders für Mobilgeräte wichtig, da die geringe Breite oft mehr Textzeilen erzeugt, als Sie vielleicht denken. Möglicherweise müssen Sie Ihren Text auf Mobilgeräten responsiv linksbündig ausrichten.
6. Überprüfen Sie den Kontrast Ihrer Kopie
Prüfen Sie das Kontrastverhältnis Ihrer Textfarben zu den Hintergrundfarben Ihrer E-Mail. Möglicherweise haben Sie Abonnenten, die Farbdefizite aufweisen, und wenn Ihre Farben nicht genügend Kontrast bieten, können sie Ihre E-Mails möglicherweise nicht lesen. Es gibt zwei Möglichkeiten, Ihr Kontrastverhältnis zu überprüfen:
- Wenn Sie Ihren HTML-Code hosten und eine zu verwendende URL erstellen können, ist dies meine bevorzugte Methode, um meine Farben zu überprüfen: http://www.checkmycolours.com/
- Wenn Sie Ihre Farbcodes manuell eingeben müssen, besuchen Sie https://contrast-ratio.com/
7. Fügen Sie Hover-Effekte für CTAs, Links und Bilder hinzu
Bei Litmus verwenden wir Hover-Effekte auf unseren CTAs, Links und Bildern, um die Anklickbarkeit anzuzeigen. Hover-Effekte sind ein einfaches interaktives Element, das Ihre E-Mails ansprechender gestalten und das Erlebnis Ihrer Abonnenten verbessern kann. Hover-Effekte werden zwar nur in AOL, Apple Mail, Gmail und Yahoo! Mail, sie sind ein beliebter Effekt und es lohnt sich, ihn in Ihren E-Mail-Code zu integrieren. Sie können ein Bild ausblenden, die Farbe Ihrer CTA-Schaltfläche ändern, eine Popup-Registerkarte hinzufügen und vieles mehr. 
Sehen Sie die vollständige E-Mail in Litmus Builder →
Möchten Sie weitere E-Mail-Tipps?
 | Ultimativer Leitfaden für E-Mail-ZugänglichkeitDieser Leitfaden enthält die Einblicke und Schritt-für-Schritt-Anleitungen, die Sie zum Schreiben, Gestalten und Codieren von E-Mails benötigen, die von jedem genutzt werden können – unabhängig von seinen Fähigkeiten. Laden Sie das E-Book herunter → |
Holen Sie sich die besten E-Mail-Marketing- und Designtipps, Statistiken und Ressourcen direkt in Ihren Posteingang und bleiben Sie an der Spitze der E-Mail-Innovation, wenn Sie sich für Litmus News anmelden.
Bleiben Sie auf dem Laufenden →