Richtlinien für E-Mail-Barrierefreiheit: Standards und Best Practices

Schauen Sie sich um, hören Sie zu, was los ist. Sehen Sie im Vollfarbmodus alles klar? Und du hörst Geräusche und Stimmen gut? Herzlichen Glückwunsch, Sie sind sicherlich ein glücklicher Mensch. Außerdem bist du eigentlich sehr glücklich. Sie haben Sehen und Hören!

Du denkst vielleicht, dass diese Fähigkeiten üblich sind und standardmäßig jedem gegeben sind? Was ist, wenn ich Ihnen sage, dass 4,5 % der Empfänger in Ihrer Kontaktliste an Farbenblindheit leiden, sodass es für sie schwierig ist, Ihre E-Mail-Inhalte zu lesen oder zu verstehen?

Farbenblindheit ist jedoch nicht die einzige weit verbreitete Störung. Nur eine nackte Tatsache: 285 Millionen Menschen weltweit leiden unter schweren Sehbehinderungen, die das Sehen auch mit Kontaktlinsen oder Brille erschweren.

Und 5 % der Erdbevölkerung haben Hörbehinderungen. Mit anderen Worten, über 360 Millionen.

Das ist etwas, worüber man nachdenken sollte. Wir können all diese Menschen nicht ignorieren. Wir müssen unser Bestes tun, um freundlich zu ihnen zu sein und ihr Leben besser zu machen. Darum geht es bei der Barrierefreiheit.

Machen Sie sich jetzt eine Tasse Tee oder Kaffee und lassen Sie uns in die Details eintauchen.

Wofür steht E-Mail-Zugänglichkeit?

Es gibt Menschen, die unter schweren Sehstörungen bis hin zur vollständigen Erblindung leiden. Sie verwenden Bildschirmlesesoftware, um Posteingangs-E-Mails zu vertonen – VoiceOver, Microsoft Narrator und andere ähnliche Tools. Daher ist es unsere Pflicht, unsere Inhalte auf diese Assistenten abzustimmen.

Wenn es um Farbenblindheit geht, von Protanopie (wenn Menschen bestimmte Farben nicht unterscheiden können) bis hin zu Monochromie – es gibt keine Hilfsmittel, die Menschen mit diesen Erkrankungen helfen. Wir müssen also die E-Mail-Bilder selbst optimieren.

Andere leiden an Hörbehinderungen, Legasthenie usw. Folglich gibt es für jede Art von Störung eine Reihe von Zugänglichkeitsregeln. So sind wir zur Antwort auf eine Frage in der Überschrift gekommen.

Kurz gesagt bedeutet dies, sich an Standards zu halten, die E-Mails für Menschen mit allen Arten von besonderen Anforderungen lesbar machen. Glücklicherweise bieten uns moderne HTML-E-Mail-Vorlagen-Builder und andere Marketing-Software fortschrittliche Tools, mit denen wir diese Standards ganz einfach und ohne besondere Fähigkeiten implementieren können.

Ich werde diese Standards unten sowie einige Praktiken vorstellen, die hilfreich sein werden, um barrierefreie E-Mails zu erstellen.

Zugänglichkeitsstandards

Also, liebe Freunde, es ist an der Zeit, diese Empfehlungen, die wir befolgen müssen, einzeln zu untersuchen, um „universelle“ E-Mails zu versenden, die für Empfänger mit allen Arten von Seh-, Hör- und Wahrnehmungsstörungen leicht lesbar sind.

1. Farbenblindheit

Es gibt eine Liste von Farbenblindheitstypen. Hier sind sie:

Protanopie bedeutet gestörte Wahrnehmung der roten Farbe. Leser mit Protanopie, auch bekannt als rotblinde Menschen, neigen dazu, schwarze Farbe mit allen Rottönen zu verwechseln. Sie können auch dunkelbraun nicht von dunkelgrün unterscheiden und sehen keinen Unterschied zwischen blauer Farbe und mittlerer roter Farbe. Sehen Sie sich diese E-Mail von Uber an:

Und so sehen es Empfänger mit Protanopie:

Deuteranopie ist eine reduzierte Wahrnehmung von Grün. Diese Leute neigen auch dazu, mittelrote/grüne Diapason-, hellgrüne/gelbe und hellblaue/lila Farben zu verwechseln. Werfen Sie noch einmal einen Blick auf dieselbe E-Mail: Original links und Deuteranopie-Version rechts.

Tritanopie bedeutet Blindheit gegenüber der blauen Farbe und ihren Schattierungen. Aus diesem Grund verwechseln diejenigen, die an dieser Beeinträchtigung leiden, typischerweise hellblau/grau und dunkelviolett/schwarz. Dasselbe E-Mail-Beispiel, aber Sie können die Tritanopie-Wahrnehmung rechts sehen:

Monochromie ist für totale Farbenblindheit. Diese Menschen können die Realität nur in Schwarz, Weiß und verschiedenen Grautönen gemalt sehen. Keine anderen Farben. Stellen Sie sich die Welt auf dem Bildschirm eines uralten Fernsehers vor. So sieht Monochromie aus. Im Ernst, ich bekomme Gänsehaut.

Was sollen wir machen?

• Wählen Sie die Schriftgröße für die E-Mail-Kopie nicht unter 14 px. Ich empfehle jedoch 16px, um den Empfängern ein barrierefreies E-Mail-Design zu bieten;
• Vermeiden Sie Kontrastlösungen, die auf Farben basieren, die farbenblinde Kunden möglicherweise nicht unterscheiden. Schreiben Sie Ihren Text beispielsweise nicht mit grünem oder blauem Text auf einem roten oder lila Hintergrund. Sehen Sie sich die Nachricht unten an. Es ist in Ordnung für Menschen mit voller Farbwahrnehmung … aber ist es im Fall von Protanopie oder monochromatischem Sehen genauso gut? Ich glaube nicht …

(originale Nachricht)

(so werden es Kunden mit Protanopie sehen)

(wie Monochromaten diese Nachricht sehen)

Wie sollen sie verstehen, ob ihre Lieblingsmannschaft das Spiel gewonnen oder verloren hat?

• Vergessen Sie die Idee, grüne Schaltflächen über roten Bildern hinzuzufügen oder umgekehrt. Gleiches gilt für alle oben genannten „riskanten“ Farbkombinationen. Die Idee ist wirklich schlecht – Menschen mit Farbwahrnehmungsstörungen bemerken die Taste möglicherweise überhaupt nicht;
• Geben Sie immer die Farbe des Produkts in Klammern an – Kunden können beispielsweise rote Farbe nicht unterscheiden, wissen aber, dass rote Hemden oder Kleider perfekt zu ihrem Image passen.
• Machen Sie Links in Ihren E-Mails fett.

Ja, die normale blaue Farbe für den Linktext reicht nicht aus. Und das nicht nur wegen farbenblinder Empfänger. Haben Sie schon einmal E-Mails auf der Straße gelesen, wenn die Sonne gnadenlos direkt auf den Bildschirm des Smartphones scheint? Dann wissen Sie, was ich meine – es ist schwer, Farben überhaupt zu unterscheiden. Machen Sie Links also fett und unterstreichen Sie sie nicht. Wieso den? Weil das Unterstreichen Menschen mit Legasthenie ablenken kann. Wir werden etwas später ausführlich über Legasthenie sprechen.

Auch in dieser E-Mail sind Menüpunkte fett gedruckt. Diese einfache Idee optimiert die Navigation der Kunden im Newsletter – sie finden schnell die gewünschte Wohnungskategorie.

Beachten Sie den Link „Details anzeigen“ mit einem Pfeil. Es sagt, dass Sie mehr Details sehen können, indem Sie darauf klicken;

Wenn Sie Ihrer Kampagne interaktive Elemente hinzufügen oder Tests durchführen, wählen Sie grüne/tiefrote/hellblaue Farben, um die richtigen Antworten hervorzuheben. Und rot/schwarz/grau jeweils für falsch. Achten Sie darauf, Ja/Nein-Antworten mit Text zu duplizieren.

Es ist wirklich wichtig zu prüfen, ob die E-Mail den Anforderungen von Menschen entspricht, die an einem Farbmangel leiden. Der Einfachheit halber möchte ich diese Tabelle unserem Beitrag hinzufügen. Speichern Sie es, um die passenden Farben zu finden und Verwirrung zu vermeiden:

Es gibt auch ein kostenloses Simulationstool für Farbenblindheit, das Ihre Bilder so zeigt, wie farbenblinde Empfänger sie wahrnehmen werden.

Wie wir sehen können, ist das Testen von Farben nicht zu komplex – ignorieren Sie es einfach nicht. Zeigen Sie Ihre Fürsorge für alle Abonnenten. Gut sein.

2. Blindheit und schwere Sehbehinderungen

Das nächste Kapitel ist Barrierefreiheitsstandards für blinde und sehbehinderte Personen gewidmet. Auch bei diesen Regeln geht es um Sehstörungen, aber die Prinzipien und Lösungen hier sind völlig anders. Hier können keine Farbschemata oder Kontrastkombinationen helfen. Dieser Aspekt der Zugänglichkeitswissenschaft basiert auf der Verwendung von Bildschirmlesesoftware.

Unsere Mission ist es daher, unsere E-Mails an diese Tools anzupassen. Mit anderen Worten, wir müssen E-Mails für diese Tools lesbar machen.

Was ist hier besonders zu beachten?

E-Mail Betreff

Typischerweise beginnen Screenreader eine E-Mail mit dem Betreff vorzulesen.

Die allgemein akzeptierte Regel ist also einfach, aber effektiv: Machen Sie Ihre Betreffzeile kurz und aussagekräftig. Ein guter Betreff sollte den Kern der Botschaft erklären.

Spracheinstellungen

Es ist wirklich wichtig, die Spracheinstellungen in der E-Mail-Kopie zu konfigurieren. Diese Aufgabe erfordert etwas Mühe und Arbeit mit E-Mail-Kopien, aber es lohnt sich. Die Tatsache ist, dass E-Mail-Text, der von Screenreadern ausgegeben wird, erschreckend klingen kann, wenn Sie diese Einstellungen ignorieren. So etwas wie Gespräche von Orks aus Herr der Ringe

Um dies zu vermeiden, geben Sie im E-Mail-Code (sofern vorhanden) die jeweilige Sprache an.

Logische Reihenfolge

Screenreader haben eine strenge Reihenfolge, wie E-Mails vokalisiert werden. Sie lesen Container und Blöcke von links nach rechts und fahren dann mit der nächsten Zeile fort.

Um Barrierefreiheit bereitzustellen, geben Sie Header-Tags wie <h1> , <h2> , <p> usw. im HTML-Code an. Diese Tags haben Vorrang vor normalem Text, sodass diese Elemente zuerst vokalisiert werden.

Außerdem spielt die Schriftgröße keine Rolle, wenn Tags angegeben werden. Im obigen Beispiel beträgt die Schriftgröße der Überschrift 2 24 Pixel und die normale Copy-Schrift ist größer – 27 Pixel. Aber Screenreader werden Überschrift 2 zuerst vokalisieren.

Alt-Text

KI-Technologien entwickeln sich heute stetig weiter. Aber Screenreader-Tools sind immer noch nicht intelligent genug, um sich die Bilder in der E-Mail „anzuschauen“ und sie zu beschreiben. Vielleicht in naher Zukunft… Heutzutage können diese Dienstprogramme nur alternativen Text lesen, auch bekannt als Alt-Text, den wir zu Bildern hinzufügen.

Wie passt man Alt-Text an Barrierefreiheitsstandards an? Sie haben richtig geraten, es ist ziemlich offensichtlich: Machen Sie diesen Text prägnant, beschreibend und informativ. Ein hilfreicher Hinweis: Vermeiden Sie das Wort „Bild“ in diesem Text. Das Bild-Tag gibt es bereits an, daher wird es etwas seltsam sein, das duplizierte „Bild Bild …“ zu hören.

Links, CTA-Elemente, soziale Symbole

Links sollten so prägnant und informativ wie möglich sein. Fügen Sie ihnen Klartext hinzu und denken Sie daran, dass Bildschirmlesegeräte diesen Text in Sprache umwandeln! Lassen Sie die Empfänger per Klick wissen, was Sie ihnen anbieten und wohin sie gehen.

Schauen Sie sich einfach diese Links an:

Der erste Link … äh … im Ernst, ich fürchte, mir vorzustellen, wie gruselig das klingen wird. Während der zweite eindeutig die Website, das Veröffentlichungsdatum und den Titel des Beitrags angibt.

Das Gleiche gilt für CTA-Buttons und Social-Media-Icons. Tatsächlich sind diese Elemente auch Hyperlinks, die nur in eine ästhetisch ansprechende visuelle Form gehüllt sind. Jeder erfahrene E-Mail-Vermarkter widmet ihnen die größte Aufmerksamkeit, arbeitet an Design und Effekten, wählt perfekte Farblösungen, um Klicks zu generieren …

Aber wenn es um Screenreader und Barrierefreiheit für Blinde geht, geht es hier nur um Text. Machen Sie es einprägsam genug, um seine Mission zu erfüllen – zwingen Sie die Abonnenten, auf die Schaltfläche zu klicken.

So sehen wir den CTA-Button in der E-Mail:

Aber Screen-Reading-Tools interessieren sich nicht für all unsere Designer-Tricks und wunderbaren Hover-Effekte. Alles, was die Software sieht, ist der reine Text. Nichts anderes. Stellen Sie also sicher, dass Ihr Text eigenständig funktioniert.

In Bezug auf Social-Media-Symbole verstehen einige Abonnenten, die Posteingangs-E-Mails „abhören“, möglicherweise nicht die Abkürzungen, die wir für diese Symbole verwenden. Schreiben Sie also einen beschreibenden Alt-Text für diese Elemente.

Das ist alles über Blindheit. Nur noch ein wichtiger Hinweis: Bildschirmlesegeräte werden heute nicht nur von Menschen mit schweren Sehstörungen verwendet. Millionen von Empfängern hören die E-Mails ihres Posteingangs ab, wenn sie beschäftigt sind, auf der Straße, im Auto usw. Dieser Aspekt der Zugänglichkeit ist also noch wichtiger, als man sich vorstellen kann.

3. Legasthenie

Menschen, die an Legasthenie leiden, neigen dazu, trotz des normalen IQ-Niveaus die Reihenfolge der Buchstaben im Text zu verwechseln.

Hier sind Zugänglichkeitspraktiken für Legastheniker basierend auf dem von veröffentlichten Beitrag das British Dyslexia Association.

• Vermeiden Sie das Unterstreichen von Links. Wie ich bereits oben erwähnt habe, machen Sie Ihre Links fett, anstatt sie zu unterstreichen;
• Beginnen Sie keinen neuen Satz am Ende einer Zeile. Der neue Satz sollte jeweils eine neue Zeile sein;
• Keine FESTSTELLTASTE, wenn Sie eine bestimmte Idee hervorheben/hervorheben müssen – verwenden Sie stattdessen die größere Schriftart;
• Vergessen Sie die Zentrierung – nur auf der linken Seite des Bildschirms;
• Weißer Hintergrund kann Empfänger mit Legasthenie ablenken, Cremefarben sind weicher und bereiten keine Schwierigkeiten;
• Beenden Sie alle Sätze mit einem Punkt (.), Sie sollten auch Semikolons verwenden, wenn Aufzählungszeichen in der E-Mail-Kopie vorhanden sind.

4. Taubheit und Teilgehörigkeit

Für Menschen mit Hörbehinderung gibt es einen einzigen Standard. Alle in Ihre E-Mails eingebetteten Videos sollten mit Untertiteln oder Textbeschreibungen ausgestattet sein.

Verlassen Sie sich einfach nicht auf die automatischen Untertitel von Youtube und anderen Video-Hostinganbietern. Sie sind oft, eh eh… gelinde gesagt, alles andere als ideal. Und in einigen Fällen sind sie sogar am Rande der Schizophasie.

Top-Tipps zur E-Mail-Zugänglichkeit

Ich werde heute mit unserer Überprüfung der besten Zugänglichkeitspraktiken abschließen. Wie wir sehen können, ist dieser Aspekt der Arbeit von E-Mail-Vermarktern wirklich wichtig. Überspringen Sie daher niemals den Barrierefreiheitstest, bevor Sie auf die Schaltfläche „Senden“ klicken! Überprüfen Sie Ihre Kampagnen mit dem oben genannten Farbenblindheitssimulator, senden Sie die Test-E-Mail an alle verfügbaren Geräte und hören Sie sie sich mit verschiedenen Screenreadern an.

Lassen Sie uns nun kurz die wichtigsten Punkte dieses Beitrags zusammenfassen. Wie schafft man Barrierefreiheit?

• Wählen Sie verschiedene Farben, um ein Kontrastschema zu erstellen, um Verwechslungen zu vermeiden.
• Schreiben Sie klare und aussagekräftige Betreffzeilen;
• Vergessen Sie niemals Alt-Text, fügen Sie ihn allen Bildern hinzu;
• Wenn die GIF-Animation eine erzieherische Rolle spielt, geben Sie den Lesern eine detaillierte Beschreibung;
• Verwenden Sie in einer E-Mail nicht verschiedene Sprachen, da Screenreader jeweils nur mit einer einzigen Sprache arbeiten können.
• Prüfen Sie die Aussagekraft Ihrer Links;
• Text linksbündig ausrichten;
• Erstellen Sie Ihre Newsletter und getriggerten E-Mails mit wahrer Liebe. Kümmern Sie sich um alle Ihre Abonnenten.

Ich wünsche Ihnen von Herzen alles Gute. Verbreiten Sie Sorgfalt und Freundlichkeit überall!