E-Mail-Barrierefreiheit: Der praktische Leitfaden zum Speichern

Haben Sie schon einmal eine E-Mail mit schlechtem Farbkontrast erhalten, sodass der Text schwer lesbar war? Oder waren die Informationen selbst mit Alternativtext unklar? Wie haben Sie diese E-Mail genutzt? Wahrscheinlich haben Sie sie geschlossen und sich der nächsten zugewandt.

Wenn Sie eine starke Beziehung zu Ihren Kunden aufbauen möchten, müssen Sie Befolgen Sie die Best Practices für BarrierefreiheitDa E-Mail-Marketing den maximalen ROI von 38 Dollar für jeden investierten Dollar erzielt, müssen Sie Ihrer E-Mail-Marketing-Strategie besondere Aufmerksamkeit widmen und sie für alle zugänglich machen.

Werfen wir einen Blick auf einige interessante Fakten und Statistiken zum Thema Barrierefreiheit.

AbilityNet hat aufgedeckt, dass 90 % der öffentlichen und kommerziellen Websites für Menschen mit Behinderungen, die auf Hilfstechnologien angewiesen sind, nicht zugänglich sind. Laut Weltgesundheitsorganisation (WHO) leben etwa 15 % der Weltbevölkerung mit einer Form von Behinderung. Barrierefreiheit betrifft neben Menschen mit Behinderungen auch ältere Menschen, Menschen mit vorübergehenden Einschränkungen, Nutzer kleiner Bildschirme und Menschen mit langsamen Internetverbindungen.

Bis 2060 wird die Zahl der älteren Menschen voraussichtlich ansteigen. 98 Millionen in den USA

Bedeutung der E-Mail-Zugänglichkeit

Barrierefreie E-Mails helfen dabei, ein größeres Publikum zu erreichen.

Barrierefreie E-Mails ermöglichen es Ihnen, ein breiteres Publikum zu erreichen, darunter Menschen mit Behinderungen, ältere Menschen und alle, denen das Lesen Ihrer Inhalte schwerfällt. In den USA nutzen 90.3 % der Bevölkerung E-Mails. Daher ist es naheliegend, dass barrierefreie E-Mails Ihre Zielgruppe vergrößern. Viele Unternehmen sind gemäß dem US-amerikanischen Behindertengleichstellungsgesetz (Americans with Disabilities Act, ADA) gesetzlich verpflichtet, barrierefreie E-Mails zu versenden. Weitere Informationen dazu finden Sie hier. ADA-konforme E-Mails in diesem Stück.

Es wird Ihre Markenglaubwürdigkeit steigern.

Derzeit versenden nur sehr wenige Marken barrierefreie E-Mails. Die frühzeitige Anwendung dieser Strategie stärkt Ihre Markenreputation und verschafft Ihnen einen Wettbewerbsvorteil. Zudem verbessert sie Ihre Markenbekanntheit.

Barrierefreiheit wird das Kundenerlebnis verbessern.

Da leicht zugängliche E-Mails einfach zu lesen sind, beseitigen sie die Hürden, die die Interaktion der Abonnenten behindern. Dies führt zu einem verbesserten Kundenerlebnis, was wiederum zu einer höheren Interaktionsrate und besseren Konversionsraten führt.

Bedingungen, die bei der Erstellung barrierefreier E-Mails zu berücksichtigen sind

Die Yale-Universität hat in ihrer Richtlinie zur Barrierefreiheit fünf Hauptarten von Behinderungen definiert, nämlich:

visuell

Sehbehinderung umfasst:

• Leichte oder mittelschwere Sehbeeinträchtigung an einem oder beiden Augen
• Erheblicher oder vollständiger Sehverlust auf beiden Augen
• Farbempfindlichkeit oder Farbenblindheit
• Helligkeitsempfindlichkeit

Hör-

Eine leichte bis mittelschwere Hörbeeinträchtigung auf einem oder beiden Ohren fällt unter die Hörbehinderung. Menschen mit teilweisem Hörverlust oder Hörproblemen haben möglicherweise Schwierigkeiten, auf Audioinhalte zuzugreifen.

Kognitiv

Kognitive Beeinträchtigungen beeinflussen die Fähigkeit von Menschen, Informationen zu verarbeiten und zu verstehen. Dazu gehören verschiedene Verhaltens- und psychische Störungen.

Rede

Die Unfähigkeit, Sprache zu produzieren, die von anderen Menschen oder Software verstanden werden kann, wird als Sprachbehinderung betrachtet.

Physik

Schwächen und Einschränkungen der Muskelkontrolle werden als körperliche oder motorische Behinderungen bezeichnet. Unwillkürliche Bewegungen wie Zittern, Koordinationsstörungen, Lähmungen, Empfindungsstörungen, Gelenkerkrankungen wie Arthritis, Schmerzen, die die Bewegungsfähigkeit einschränken, und fehlende Gliedmaßen fallen ebenfalls in diese Kategorie.

Nachdem Sie nun über grundlegende Kenntnisse zu den verschiedenen Arten von Behinderungen verfügen, wollen wir uns damit befassen, wie Sie Ihre E-Mails für alle zugänglich machen können, unabhängig von ihren Einschränkungen.

Ein methodischer Ansatz zur E-Mail-Zugänglichkeit

Wir werden das Thema in vier Hauptabschnitten behandeln.

1. Zugriff auf den E-Mail-Posteingang
2. E-Mail-Inhalte barrierefrei gestalten
3. Gestaltung barrierefreier E-Mails
4. Programmierung barrierefreier E-Mails

Fangen wir an.

Zugriff auf den E-Mail-Posteingang

Neben dem Absendernamen prüfen Abonnenten vor dem Öffnen Ihrer E-Mail auch die Betreffzeile und den Preheader. Barrierefreie E-Mails zu erstellen, beginnt genau hier.

1. Ihre Betreffzeilen und Preheader-Texte sollten einfach, aussagekräftig und nicht zu lang sein. Sie sollten den Empfängern vermitteln, worum es in der E-Mail geht, und sie zum Öffnen animieren.

2. Denken Sie bei der Verwendung von Emojis an die Empfänger, die assistive Technologien zum Lesen Ihrer E-Mails nutzen. Ihre E-Mail könnte für diese Abonnenten an Aussagekraft verlieren. Am besten fügen Sie am Ende der Betreffzeile ein einzelnes, passendes Emoji hinzu (wie im Screenshot unten dargestellt).

Vermeiden Sie die Verwendung mehrerer Emojis oder eines einzelnen Emojis, da diese in verschiedenen Programmen unterschiedlich interpretiert werden können. Ändern Sie die Farbe nicht, da die Hilfssoftware die Farbbeschreibung vorliest.

3. Vergrößerungsgeräte haben Schwierigkeiten, Wörter in Großbuchstaben zu lesen. Auch die Form ist schwer zu erkennen. Manche Bildschirmleseprogramme interpretieren das Wort als Akronym und lesen es Buchstabe für Buchstabe vor. Vermeiden Sie daher unbedingt die Verwendung von Großbuchstaben.

E-Mail-Inhalte barrierefrei gestalten

Abonnenten und Nutzer von Bildschirmleseprogrammen sollten Ihre E-Mails problemlos lesen können. Beachten Sie die folgenden Punkte, um den E-Mail-Inhalt barrierefrei zu gestalten.

Verfassen Sie prägnante Texte: Die meisten Abonnenten überfliegen Ihre E-Mails und suchen nach den wichtigsten Informationen. Das mag zunächst einfach erscheinen. Doch für Menschen, die Bildschirmleseprogramme und assistive Technologien nutzen, ist es schwierig, den Kern Ihrer E-Mails zu erfassen, wenn diese zu wortreich sind. Dasselbe gilt für Menschen mit kürzerer Aufmerksamkeitsspanne. Halten Sie Ihre E-Mails daher so kurz wie möglich.

Halten Sie die Sätze kurz und prägnant: Verbessern Sie die Lesbarkeit Ihrer E-Mails durch eine klare und verständliche Sprache ohne Fachjargon. Nicht alle Abonnenten beherrschen Ihre Sprache auf muttersprachlichem Niveau. Daher ist es ratsam, bei der Wortwahl auf Inklusion zu achten.

Verzichten Sie auf allgemeine Linktexte: Verwenden Sie stattdessen präzisere Formulierungen wie „Hier klicken“. Beschreibende Linktexte zeigen dem Empfänger, wo er nach dem Klicken landet. Beispiel: „Hier finden Sie den vollständigen DeBounce-Leitfaden zur E-Mail-Zustellbarkeit >>“ ist deutlich besser als allgemeine Formulierungen.

Verzichten Sie auf Bildverweise im Text: Wenn Sie in Ihrer E-Mail ein Bild einbinden, kann dies zu Problemen für Empfänger führen, die Ihre E-Mail nicht anzeigen können. Auch Abonnenten, die Geräte verwenden, die Ihre Nachricht nicht unterstützen oder bei denen Bilder standardmäßig blockiert sind, werden dadurch irregeführt. Um solche Probleme zu vermeiden, sollten Sie im Fließtext keine Bilder einbinden.

Gestaltung barrierefreier E-Mails

Gestalten Sie E-Mails, die sowohl für Abonnenten als auch für Screenreader leicht verständlich sind. Hier sind einige Tipps, die Ihnen dabei helfen.

1. Befolgen Sie eine logische Lesereihenfolge.
Tabellen werden zur Codierung von E-Mail-Vorlagen verwendet, da dies die beste Methode ist, eine einwandfreie Darstellung auf Desktop-, Webmail- und mobilen E-Mail-Clients zu gewährleisten. Daher ist die Reihenfolge Ihrer Inhalte von entscheidender Bedeutung. Angenommen, 10 % Ihrer Abonnenten verwenden Screenreader zum Lesen der E-Mails. Entspricht die Reihenfolge Ihrer Inhalte nicht der Leserichtung von links nach rechts oder von oben nach unten, liest der Screenreader die Inhalte willkürlich vor. Folglich kann der Abonnent den ungeordneten Inhalt kaum erfassen. Die Abbildung unten veranschaulicht die Lesereihenfolge der Inhalte.

Für responsive E-Mails ist ein korrekter Lesefluss besonders wichtig. Am sichersten ist es, ein einspaltiges Layout zu verwenden, damit Ihre E-Mails nicht beschädigt werden.

2. Wählen Sie eine geeignete Text- und Hintergrundfarbe.
Die beste Methode für optimal lesbare E-Mails ist die Verwendung von dunklem Text auf hellem Hintergrund. Diese Kombination sorgt für ein angenehmes Leseerlebnis. Alternativ können Sie einen dunklen Hintergrund und hellen Text verwenden, um den Dunkelmodus zu simulieren. Hochwertige Hintergrundbilder verbessern die visuelle Wirkung, insbesondere für lichtempfindliche Leser. Ein ideales Kontrastverhältnis zwischen Text und Hintergrund beträgt mindestens 4.5:1 bei kleinen und 3:1 bei großen Schriftgrößen. Verschiedene Tools wie Contrast Ratio, Contrast Finder, Monsido und Coolors helfen Ihnen, das Farbkontrastverhältnis zu überprüfen. Die folgende Tabelle zeigt Ihnen, wie Sie die richtigen Farben für Ihre E-Mails einsetzen. Ein ausreichendes Kontrastverhältnis verbessert die Lesbarkeit und Zugänglichkeit und ermöglicht es allen Nutzern, Ihre Inhalte optimal zu nutzen. Mit diesen Tools können Sie die optimalen Farben auswählen, die den empfohlenen Verhältnissen für verschiedene Schriftgrößen entsprechen.

3. Richten Sie den Text linksbündig aus.
Oftmals neigen wir dazu, Text zu zentrieren oder im Blocksatz auszurichten. Dies ist aus Sicht der Barrierefreiheit ein Fehler. Linksbündiger Text ist die beste Lösung für eine inklusive Nutzererfahrung. Andere Ausrichtungsmethoden sind für Menschen mit Legasthenie ungeeignet. Zudem ist Blocksatz nicht mit allen E-Mail-Programmen kompatibel und kann zu Darstellungsproblemen führen.

4. Verwenden Sie einfache Schriftarten
Wählen Sie Schriftarten, die für alle Abonnenten gut lesbar sind. Am besten verwenden Sie websichere Serifenschriften oder serifenlose Schriften. Das heißt aber nicht, dass Sie nie benutzerdefinierte Schriftarten verwenden sollten. Sie können beispielsweise zu Feiertagen oder besonderen Anlässen ausgefallene oder dekorative Schriftarten verwenden. Stellen Sie sicher, dass Sie eine geeignete Ausweichschrift für E-Mail-Clients bereitstellen, die diese Schriftarten nicht unterstützen. Wenn Sie einer E-Mail eine benutzerdefinierte Schriftart hinzufügen, prüft die Rendering-Engine zunächst, ob diese Schriftart auf dem Gerät des Empfängers installiert ist. Falls nicht, wird die erste von Ihnen im Code angegebene Ausweichschrift verwendet. Ist auch diese Schriftart auf dem Gerät nicht vorhanden, wird die zweite Ausweichschrift verwendet.

5. Stellen Sie eine kurze Leinenlänge und die richtige Leinenhöhe ein.
Eine Zeilenlänge von 45 bis 75 Zeichen wird empfohlen. Ist die Zeilenlänge zu lang, können sich die Leser nicht auf den Text konzentrieren. Ist sie hingegen zu kurz, wird der Lesefluss gestört, da die Leser ständig zurückblättern müssen, um die nächste Zeile zu lesen. Am besten gliedern kurze Absätze, Überschriften, Stichpunkte und Bilder den Text in gut lesbare Abschnitte. Die ideale Zeilenhöhe beträgt das 1.5-Fache der Schriftgröße. Zu geringer Zeilenabstand kann die Augen unnötig belasten. Leser könnten eine Zeile überlesen und zur nächsten springen. Ist der Zeilenabstand hingegen zu groß, entsteht eine Diskrepanz zwischen Text und Inhalt. Ein Beispiel von Email Uppers mit 15 pt Schriftgröße, 25 pt Zeilenhöhe und 71 Zeichen Zeilenlänge entspricht den Best Practices für barrierefreies Arbeiten.

6. Fügen Sie Ihren E-Mails ausreichend Leerraum hinzu.
Geben Sie Ihren Lesern mehr Raum, indem Sie in Ihren E-Mails ausreichend Weißraum einfügen. So wird jedes Element deutlich lesbar. Vermeiden Sie unnötige Details, damit der Inhalt Ihrer E-Mail nicht untergeht. Typografische Ränder und Absatzabstände verbessern die Lesbarkeit. Sehen Sie sich die minimalistische Erinnerungs-E-Mail von Duolingo an, die den Leser sofort anspricht und zum Weiterlernen motiviert.

7. Visuelle Elemente gezielt einsetzen
Nur weil man etwas kann, heißt das nicht, dass man es auch tun sollte! Das gilt insbesondere für visuelles E-Mail-Marketing. Verwenden Sie Bilder nur, wenn es wirklich nötig ist. Viele Marketer fügen jeder E-Mail GIFs hinzu. Diese verbessern zwar die Optik, können aber zu Problemen mit der Barrierefreiheit führen. GIFs mit Animationen zwischen 2 und 55 Hz können lichtempfindliche Menschen schädigen. Vermeiden Sie daher GIFs mit kräftigen Farben, kontrastreichen Mustern und auffälligen Inhalten. Achten Sie auf flüssige Übergänge und einen aussagekräftigen Alternativtext für jedes Bild. Der Alternativtext erklärt Screenreadern, was das Bild darstellt. Er ist auch hilfreich für E-Mail-Clients, die Bilder standardmäßig blockieren.

8. Gestalten Sie die CTA-Buttons so, dass sie leicht anzuklicken sind.
Ihr CTA-Button muss gut sichtbar sein. Viel Freiraum um den CTA herum trägt dazu bei. Für einen barrierefreien CTA benötigen Sie einen starken Farbkontrast und eine Tastaturbedienbarkeit. Fügen Sie klare Beschriftungen hinzu, die mit dem CTA-Text ausgerichtet sind. Laut WCAG sollte der CTA-Button 44 × 44 Pixel groß sein. Google empfiehlt 48 × 48 Pixel. Testen Sie den CTA-Button und prüfen Sie, ob er für alle Nutzer leicht zugänglich ist. Achten Sie darauf, dass er auch auf Mobilgeräten gut antippbar ist.

Codierung barrierefreier E-Mails

Barrierefreiheit bei E-Mails ist nicht nur für Menschen mit besonderen Bedürfnissen wichtig. Sie sorgt dafür, dass Ihre E-Mails für alle leicht verständlich sind. Hier sind einige Tipps, die Sie beim Programmieren barrierefreier E-Mails beachten sollten.

1. Tischrollen auf „Präsentation“ setzen
Wie bereits erwähnt, ist ein logischer Aufbau des E-Mail-Inhalts wichtig. Durch die Einstellung der Tabellenrolle auf „Präsentation“ nutzen Screenreader ARIA (Assistive Rich Internet Applications), um die Tabelle verständlich vorzulesen. Wird die Tabellenrolle nicht festgelegt, liest der Screenreader den HTML-Code vor, was die Benutzerfreundlichkeit beeinträchtigt.

2. Semantische Tags verwenden
Semantische Auszeichnung hilft dabei, den Ablauf und die Hierarchie Ihrer E-Mail-Vorlage festzulegen. Verwenden Sie dazu Absätze, Listen und Überschriften wie , , , , Und Die Bildschirmleseprogramme werden durch den E-Mail-Inhalt in der richtigen Reihenfolge geführt. Sie müssen für jedes Element die Ränder festlegen und dem übergeordneten Element für alle Absätze unterschiedliche Stile zuweisen, um den Code widerzuspiegeln.

3. Code-E-Mails sind mit der Tastaturbedienung kompatibel.
Körperliche Behinderungen oder Seheinschränkungen können die Mausnutzung erschweren. Um auch Abonnenten zu erreichen, die den Mauszeiger nicht sehen können, müssen Sie E-Mails so programmieren, dass sie per Tastatur bedient werden können. Ziehen Sie einen Experten hinzu, der benutzerdefinierte Steuerelemente, CSS-Stile und Skripte hinzufügen kann, um die Navigation in E-Mails per Tastatur zu vereinfachen.

4. Fügen Sie das Attribut „lang“ hinzu.
Bildschirmleseprogramme lesen E-Mails in der auf dem Gerät eingestellten Standardsprache vor. Um Fehlinterpretationen und Aussprachefehler zu vermeiden, müssen Sie die Sprache Ihrer E-Mail mithilfe des Attributs „lang“ festlegen. Wenn Ihre E-Mail beispielsweise auf Französisch ist, verwenden Sie lang="fr" im Wrapper-Element innerhalb des <code></code>-Tags. Man kann es auch als die gesamte E-Mail-Textdatei umfassen. Sie müssen außerdem die Sprache festlegen. Element.

Wie kann man E-Mails auf Barrierefreiheit prüfen?

Diese Tipps helfen Ihnen dabei, barrierefreie E-Mails zu erstellen. Dennoch kann es vorkommen, dass Sie etwas übersehen. Hier finden Sie einige Tools, mit denen Sie Ihre E-Mails auf Barrierefreiheit prüfen können.

Accessible-email.org

Dieses Tool dient ausschließlich der Überprüfung der Barrierefreiheit Ihrer E-Mails. Fügen Sie einfach die HTML-E-Mail hinzu, und das Tool analysiert sofort Überschriften, Alternativtexte, Tabellenrollen, das Sprachattribut, Handlungsaufforderungen (CTAs) und Linkbeschriftungen. Basierend auf diesen Erkenntnissen können Sie die notwendigen Änderungen vornehmen.

Neben diesem Tool können Sie auch einige Web-Accessibility-Tools verwenden, um Ihre E-Mails zu überprüfen.

1. Liste der Tools zur Bewertung der Webzugänglichkeit vom W3C
2. Einblicke in die Barrierefreiheit
3. Zugängliche Kennzahlen
4. WELLE
5. Liste der Barrierefreiheitstools von Apple
6. Die Axe DevTools-Erweiterung
7. Googles Erweiterung „Accessibility Developer Tools“ für Chrome
8. AChecker

Fazit

Zum Abschluss möchte ich Ihnen ein Beispiel für eine vollständig barrierefreie E-Mail zeigen, die alle Best Practices und Richtlinien für Barrierefreiheit perfekt einhält.

Die E-Mail erfüllt alle Kriterien der Checkliste zur E-Mail-Barrierefreiheit.

Quelle und Lackmus-Test