Der ultimative Leitfaden für barrierefreie E-Mails

Als E-Mail-Marketer sind wir bestrebt, unseren Abonnenten das perfekte E-Mail-Erlebnis zu bieten. Wir stellen sicher, dass unsere E-Mails basierend auf unseren Analysen zum richtigen Zeitpunkt gesendet und an den Posteingang gesendet werden, indem wir unsere Zustellbarkeit überwachen und Spam-Tests durchführen. Wir personalisieren unsere Inhalte, um relevanter zu sein, und basteln an unserem Design, um sicherzustellen, dass unsere E-Mails auf unzähligen Geräten und in jedem E-Mail-Client perfekt wiedergegeben werden.

Dies sind alles empfohlene Schritte, um sicherzustellen, dass Ihre E-Mails zu einer Conversion führen. Ihre E-Mails könnten jedoch von einem erheblichen Teil Ihrer Abonnenten übersehen werden – Menschen mit visuellen, körperlichen oder kognitiven und neurologischen Behinderungen.

Es sind nur wenige kleine Schritte erforderlich, um Ihre E-Mails für alle Ihre Abonnenten zugänglicher zu machen. In diesem Beitrag besprechen wir, was diese Schritte sind und wie sie E-Mails für alle verbessern können.

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 →

Was ist Barrierefreiheit?

Barrierefreiheit ist eine der Grundpfeiler von User Experience und Design. Bei E-Mails bedeutet dies, dass jeder Ihre Nachricht empfangen und verstehen kann, unabhängig von Behinderungen oder verwendeten Hilfsgeräten.

Sie können sich Barrierefreiheit in E-Mails als eine Erweiterung des Umgangs mit E-Mail-Clients mit schlechtem Support vorstellen. Das Einschließen von Workarounds und Fallbacks stellt sicher, dass jeder Abonnent eine positive Erfahrung erhält.

Als E-Mail-Entwickler verbringen wir Stunden damit, dass eine E-Mail bei einem Kunden mit weniger als 1% Marktanteil genau richtig aussieht, aber nur sehr wenige von uns werden ein paar Minuten damit verbringen, die E-Mail zugänglich zu machen.
– Mark Robbins, Rebelmail

Barrierefreiheit im E-Mail-Design

Sehen wir uns zunächst die visuellen Aspekte Ihrer E-Mail an, die sich auf die Barrierefreiheit auswirken können und wo Verbesserungen vorgenommen werden können.

Farbe intelligent nutzen

Abonnenten mit Farbenblindheit können möglicherweise nicht zwischen einigen Farben in Ihrer E-Mail unterscheiden. Stellen Sie also sicher, dass Farben nicht die einzige Art sind, Informationen zu übermitteln.

Farbkontraste können für Abonnenten mit Sehschwierigkeiten ebenfalls Probleme bereiten. Verwenden Sie einen hohen Farbkontrast zwischen verschiedenen Elementen in Ihrer E-Mail, insbesondere zwischen Text- und Hintergrundfarben. Eine Möglichkeit, dies zu tun, besteht darin, den Farbkontrast-Checker von WebAim zu verwenden, um das Kontrastverhältnis der Farben in Ihrer E-Mail zu überprüfen.

Sind Ihre E-Mails erreichbar? Sehen Sie, wie Ihre E-Mails für sehbehinderte Benutzer aussehen, indem Sie den Farbenblindheitsfilter in der Litmus-E-Mail-Vorschau verwenden. Testen Sie Lackmus kostenlos →

Erstellen Sie keine schädlichen Inhalte

Inhalte, die mit bestimmten Geschwindigkeiten oder Mustern blinken, wie animierte GIFs, können bei einigen Personen lichtempfindliche Anfälle verursachen. Vermeiden Sie das Flashen von Inhalten oder das Einfügen von Links zu Videos mit ähnlichen Inhalten.

Text und Bilder ausbalancieren

Während sehende Benutzer nicht relevante Inhalte visuell scannen oder überspringen können, müssen blinde Benutzer den gesamten Inhalt der E-Mail anhören, eine E-Mail nach der anderen. Passen Sie den schriftlichen Inhalt Ihrer E-Mail an, um die Hauptbotschaft zu übermitteln. Bedenken Sie auch, wie kompatibel Ihr Design mit gängigen Screenreadern wie JAWS oder Window-Eyes ist.

Verbessern Sie die Lesbarkeit Ihrer E-Mails

Verwenden Sie größere Schriftgrößen

Alles, was kleiner als 14 Pixel auf einem Desktop- oder Laptop-Bildschirm ist, erfordert einige Mühe beim Lesen. Benutzer können die Zoomstufe auf ihren Geräten erhöhen, um ihnen das Lesen ihrer Bildschirme zu erleichtern. Dies kann jedoch negative Auswirkungen auf Ihre E-Mails haben, die möglicherweise unterbrochen oder abgeschnitten erscheinen.

Text kann auf Mobilgeräten kleiner erscheinen, was die Benutzer dazu zwingt, beim Lesen Ihrer E-Mails härter zu arbeiten. Verwenden Sie Medienabfragen, um die Mindestschriftgröße auf kleineren Geräten von 14 auf 16 Pixel zu erhöhen, damit Benutzer Ihre E-Mails besser lesen können:

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Geben Sie Ihrem Text Raum zum Atmen

Für manche kann es schwierig sein, Absätze und Textblöcke zu lesen, bei denen die Textzeilen eng beieinander liegen. Legen Sie eine geeignete Zeilenhöhe für den Text fest, damit er für alle leichter lesbar ist. Wir empfehlen, eine Zeilenhöhe zu wählen, die 4 Pixel über Ihrer Schriftgröße liegt.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Tipp: Vergessen Sie beim Erhöhen der Schriftgröße für mobile Geräte nicht, auch die Zeilenhöhe zu erhöhen.

Auch Textabsätze brauchen Platz zum Atmen, um die Lesbarkeit zu verbessern. Beim Scannen einer E-Mail sollte es einfach sein, Absätze zu erkennen und Ihren Platz zu behalten. Schaffen Sie genügend Leerraum über und unter den Absätzen.

Ein weiterer Schritt, um die Lesbarkeit von Text zu verbessern, besteht darin, ihn von den Rändern Ihrer E-Mails wegzubewegen. Das Hinzufügen von Padding zu einer Tabellenzelle oder einem Absatz-Tag wird Ihnen dabei helfen.

Vermeiden Sie berechtigte Kopien in Ihrer E-Mail

„Blocksatz“ bedeutet, dass der Buchstaben- und Wortabstand so angepasst wird, dass der Text sowohl am linken als auch am rechten Rand bündig abschließt. Obwohl dies im Druck üblich ist, kann der inkonsistente Wortabstand dazu führen, dass der Text im Blocksatz schwer lesbar ist. Linksbündig ausgerichteter Text ist nachweislich für alle leichter lesbar.

Wählen Sie die richtige Schriftart

Die Verwendung von Webfonts hat den Pool an möglichen Schriftarten erweitert, die in E-Mails verwendet werden können, aber bevor Sie sich entscheiden, Lobster als Ihre Hauptschrift zu verwenden, sollten Sie sich überlegen, wie zugänglich sie ist. Wählen Sie bei der Auswahl der Schriftart für Ihre E-Mail eine Schrift aus, die gleichmäßig verteilt und nicht zu komprimiert ist. Dies ist nicht nur für die Barrierefreiheit eine gute Idee, sondern auch für mobile Benutzer.

Semantische Elemente verwenden

Das Einbinden semantischer Elemente gibt Ihren Abonnenten, die Screenreader verwenden, die Möglichkeit, eine E-Mail per Kopfzeile zu „scannen“. Sie können dies tun, indem Sie die Tags <p> und <h> verwenden. Diese werden in jedem Client unterstützt, daher ist dies ein guter Ausgangspunkt, um Ihre E-Mails zugänglicher zu machen.

Historisch gesehen war das Styling von <p>- und <h>-Tags nicht einfach, weshalb es immer noch ziemlich ungewöhnlich ist, dass diese Tags in E-Mails verwendet werden. Ränder um Text, der in eines dieser Tags eingeschlossen ist, waren schwer zu verwalten, aber mit Code wie diesem können Sie diesen Leerraum steuern:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Tipp: Verwenden von mso-line-height-rule:exactly; in Ihren <h>-Tags behält die Zeilenhöhenregel bei, die Sie in Microsoft Outlook-E-Mail-Clients festgelegt haben.

Sehen Sie sich diesen Clip von Litmus Live 2017 an, in dem der E-Mail-Entwickler Paul Airy erklärt, warum und wie er semantische HTML-Elemente in seinen E-Mails verwendet, um sie zugänglicher zu machen:

Dieses Video twittern →

Lernen Sie von den Experten bei Lackmus Live Werden Sie ein besserer E-Mail-Marketer mit Ratschlägen aus der Praxis, Best Practices und praktischen Erkenntnissen, wenn Sie an der Litmus Live-Konferenz teilnehmen. Mehr erfahren →

Lesbare Kopie schreiben

Um eine leichter zugängliche und lesbare E-Mail zu erstellen, hängt nicht nur davon ab, wie die E-Mail codiert ist, sondern auch, wie die Kopie geschrieben wird. Wenn Sie Ihre E-Mail-Kopie menschlicher gestalten, wird die Lesbarkeit verbessert und eine 1:1-Kommunikation zwischen Ihnen und Ihren Abonnenten aufgebaut.

Der beliebteste Test, bekannt als Flesch-Kincaid Reading Ease Test, ist in Microsoft Word zu finden und berechnet auf einer Skala von 0-100, wie leicht Ihre Inhalte zu lesen sind. Das bedeutet:

• Eine Punktzahl von 90-100 wird von einem 11-jährigen Schüler leicht verstanden
• Eine Punktzahl von 60-70 wird von 13- bis 15-jährigen Schülern leicht verstanden
• Eine Punktzahl von 30-50 wird von College-Studenten verstanden
• Eine Punktzahl von 0-30 wird von Hochschulabsolventen besser verstanden

Etwas „lesbarer“ zu machen, sollte nicht bedeuten, dass Sie vor kniffligen oder gewichtigen Themen zurückschrecken. Anstatt Ihr Schreiben zu verdummen, bezieht es sich auf die Zugänglichkeit des Textes. Ihr Sweet Spot liegt irgendwo zwischen 60 und 70, um ein allgemeines Publikum zu fesseln. Wenn Ihr Publikum hochgebildet ist, haben Sie natürlich keine Angst, komplexere Sprache zu verwenden.

Sie können die Lesbarkeit auch verbessern, indem Sie Ihre Kopie so bearbeiten, dass sie direkt und auf den Punkt kommt.

Barrierefreie Inhalte erstellen

Links anklickbar/antippbar machen

Wenn Sie sicherstellen, dass Ihre kugelsicheren Schaltflächen groß genug sind, um mit Daumen und Fingern auf Mobilgeräten verwendet zu werden, können Sie auch auf Ihre E-Mails zugreifen. Eine größere Taste ist für diejenigen von Vorteil, die eine Maus nicht präzise steuern können.

Ich mag große Knöpfe und kann nicht lügen.
– Justine Jordan, Lackmus

Während Apples iPhone Human Interface Guidelines eine Mindestbreite und -höhe von 44 Pixeln für Schaltflächen empfiehlt, variiert diese Zahl je nach Hersteller des Mobilgeräts. Eine alternative Faustregel wäre, eine Mindestbreite und -höhe von 72 Pixeln zu verwenden, da dies die durchschnittliche Pixelbreite eines Daumens ist.

„Hier klicken“-Link-Kopie verbannen

Vermeiden Sie es, „hier klicken“ als Kopie für Ihre Links zu verwenden. Benutzer von Bildschirmleseprogrammen blättern häufig durch den Inhalt und überspringen ihn, um eine E-Mail zu scannen. Wenn Sie Ihren Links einen Kontext geben, können diese Benutzer entscheiden, ob sie sich durchklicken möchten oder nicht.

Wenn Sie beispielsweise über einen Link verfügen, der zu einer Produktliste mit Schuhen führt, verringert die Verwendung von Linkkopien wie "Mehr Schuhe anzeigen" die Mehrdeutigkeit des Links für Benutzer von Bildschirmleseprogrammen. Die Reduzierung der Mehrdeutigkeit von Links ist für alle Abonnenten von Vorteil, da sie nicht den Kontext rund um den Link lesen müssen – gut für diejenigen, die routinemäßig E-Mails scannen, ohne alles zu erfassen.

Es dient nicht nur der Zugänglichkeit, das Verbannen von „Hier klicken“-Links wird Ihren E-Mail-Inhalt geräteunabhängiger machen. „Hier klicken“ kann zwar für einen Abonnenten sinnvoll sein, der einen Laptop oder Desktop verwendet, aber nicht für jemanden, der ein mobiles Gerät oder Tablet verwendet, bei dem Tippen erforderlich ist.

Verwenden Sie das ALT-Attribut richtig

Das ALT-Attribut ist seit Anbeginn von HTML-E-Mails eine bewährte Methode für E-Mails, da E-Mail-Clients Bilder standardmäßig blockieren. Der Text, der in einem an ein Bild angehängten ALT-Attribut verwendet wird, wird angezeigt, wenn das Bild nicht geladen wird. Dies hilft dem Abonnenten, die E-Mail zu „sehen“, wenn in seinem E-Mail-Client standardmäßig Bilder deaktiviert sind oder wenn er zum Lesen der E-Mail einen Screenreader verwendet.

Um das ALT-Attribut korrekt zu verwenden, muss der Kontext des Bildes in Bezug auf den umgebenden Inhalt vollständig verstanden werden. Zunächst müssen Sie entscheiden, ob das Bild funktional, illustrativ oder dekorativ ist.

Alle Bilder erfordern ALT-Attribute, daher sollte ein Null-ALT-Attribut für Bilder verwendet werden, die nicht von Bildschirmleseprogrammen gelesen werden müssen oder für den Abonnenten etwas Wichtiges darstellen.

Zeigen Sie Ihre E-Mail mit allen deaktivierten Bildern an, um zu entscheiden, welche Bilder das ALT-Attribut erfordern und welche ein Null-Attribut haben können.

Um tiefer zu verstehen, wie der Kontext die Verwendung des ALT-Attributs für Ihre Bilder beeinflusst, besuchen Sie die Seite von WebAim zum ALT-Attribut.

Verwenden Sie role="presentation" für alle Ihre Präsentationstabellen

Beim E-Mail-Design werden Tabellen verwendet, um den Inhalt zu speichern und das Design der E-Mail zu strukturieren. Tabellen waren nie dafür gedacht, für Design verwendet zu werden; Aufgrund von Einschränkungen in E-Mail-Clients wie Outlook waren E-Mail-Designer jedoch gezwungen, das <table>-Element als Gestaltungselement zu verwenden.

Um Screenreadern zu helfen, den Unterschied zwischen <table>-Elementen, die Inhalt enthalten, und solchen, die nur dem Design dienen, zu verstehen, verwenden Sie add role=“presentation“ für jede Tabelle, die Inhalte enthält, die der Abonnent lesen muss. Sie müssen es nur jedem <table>-Element hinzufügen, nicht jedem <td>. Dadurch wird vermieden, dass ein Screenreader gezwungen wird, jede Zelle Ihrer Tabellen einzeln zu lesen, und hilft dem Abonnenten, direkt zu den wichtigen Inhalten zu gelangen.

Neben role=“presentation“ ist aria-hidden=“true“ ein weiteres HTML-Attribut, das Elementen in Ihrem HTML hinzugefügt werden kann, die für visuelle Inhalte bestimmt sind und vor Bildschirmleseprogrammen ausgeblendet werden sollten:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role="presentation" kann auch für Bilder verwendet werden. Der E-Mail-Entwickler Remi Parmienter entdeckte in Chrome ein ungewöhnliches Verhalten für Benutzer von VoiceOver – einer Bildschirmleseanwendung für MacOS. VoiceOver hat damit begonnen, Dateinamen für Bilder zu lesen, auch wenn das ALT-Attribut vorhanden, aber leer ist. Es wird empfohlen, das HTML-Attribut role=”presentation” für jedes Bild mit einem leeren ALT-Attribut zu verwenden, um zu vermeiden, dass der Name für das Bild gelesen wird.

Barrierefreie E-Mails in Aktion

Wir können ein Maß an Zugänglichkeit implementieren, wenn wir über die Herausforderungen hinausblicken. Konzentrieren Sie sich auf das, was Sie tun können, nicht auf das, was Sie nicht tun können.
– Paul Airy, Jenseits des Umschlags

Mitglieder der Litmus-Community nahmen an einem Community-Wettbewerb teil, um eine barrierefreie E-Mail zu erstellen. Die Einreichungen veranschaulichten die kleinen Schritte, die unternommen werden können, um E-Mails einem neuen Publikum zugänglich zu machen.

Abonnenten dieser E-Mail können die Textgröße über ihren Browser um bis zu 200 % erhöhen, ohne das Design der E-Mail zu beeinträchtigen. Und es verfügt über ein animiertes GIF, das nach drei Zyklen (innerhalb von fünf Sekunden) für diejenigen, die an lichtempfindlichen Anfällen leiden, stoppt.

Eyal Bitton hat eine E-Mail erstellt, die Kopien für Links verwendet, die außerhalb des Kontexts Sinn machen, und Eyal signalisiert blinden Abonnenten das Ende der E-Mail, indem er versteckten Text verwendet.

Der Newsletter von Type E verwendet eine interaktive progressive Verbesserung, damit der Abonnent zwischen Standard- oder Großtext wählen kann. Der E-Mail-Entwickler Paul Airy hat auch eine Option integriert, bei der der Abonnent die E-Mail mit einem getönten Hintergrund anzeigen kann, wenn er unter bestimmten Behinderungen leidet.

Diese E-Mails veranschaulichen, dass es nur wenige kleine Schritte braucht, um E-Mails zugänglicher zu machen und möglicherweise ein breiteres Publikum zu erreichen. Viele dieser Schritte unterstützen nicht nur die Zugänglichkeit, sondern tragen auch dazu bei, Ihre E-Mails für alle zu verbessern.

VORSCHAU IHRER E-MAILS MIT EIN- UND AUSGESCHALTETEN BILDERN

Möchten Sie sehen, wie Ihre E-Mails in über 60 Desktop-, Mobil- und Webmail-Clients aussehen, einschließlich Ansichten ohne Bilder? Probieren Sie Lackmus kostenlos aus!

Jetzt testen →

Ultimativer Leitfaden für E-Mail-Zugänglichkeit Dieser 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 →