So erstellen Sie in 3 einfachen Schritten E-Mails für alle: Webinar-Aufzeichnung + Fragen und Antworten

E-Mail-Zugänglichkeit wurde zu einem der heißesten E-Mail-Design-Trends des Jahres 2019 gewählt und hat jetzt für die meisten Marken Priorität. Es stimmt aber auch, dass viele Marketer nicht wissen, wie sie ihre E-Mails integrativer gestalten sollen.

Die Implementierung von Best Practices für Barrierefreiheit ist einfacher als Sie denken. In diesem Webinar gehen die Experten für Barrierefreiheit von Litmus, Jason Rodriguez und Alice Li, durch die Statistiken und Untersuchungen, die belegen, dass es sich lohnt, in Barrierefreiheit zu investieren, und teilen Sie die 3 Schritte mit, die Sie unternehmen müssen, um bessere E-Mails für alle zu erstellen.

Sie hatten keine Gelegenheit, das Webinar live zu sehen? Mach dir keine Sorge. Sie können jederzeit auf die vollständige Aufzeichnung zugreifen und die Fragen und Antworten unten lesen.

Fragen und Antworten

Ein großes Dankeschön an alle, die sich während des Webinars mit einer Frage gemeldet haben! Hier ist eine Zusammenfassung unserer Antworten auf die am häufigsten gestellten Fragen, zusammen mit unserer Meinung zu einigen der Fragen, die wir während des Live-Webinars nicht beantwortet haben. Haben Sie weitere Fragen? Bitte hinterlassen Sie sie in den Kommentaren.

Wie erklären Sie kognitive Einschränkungen?

Bettina : Es gibt viele verschiedene Arten von kognitiven Behinderungen, von Schwierigkeiten beim Auswendiglernen bis hin zu Legasthenie oder Autismus. Jede dieser Bedingungen ist einzigartig, aber wenn Sie die Tipps im Abschnitt Texterstellung und Design dieses Webinars befolgen, können Sie Ihre E-Mails für Menschen mit kognitiven Einschränkungen leichter zugänglich machen. Halten Sie beispielsweise Ihre E-Mail-Kopie klar und prägnant und vermeiden Sie die Verwendung von schwierigen Wörtern oder Jargon. Halten Sie Ihre Layouts einfach und entwickeln Sie eine klare visuelle Hierarchie, die es Ihren Abonnenten erleichtert, Ihre E-Mails zu scannen – und schnell zu verstehen, was wichtig ist (und was nicht).

Was ist der am häufigsten verwendete Screenreader? Wie testest du das?

Alice: Die beiden beliebtesten Screenreader sind NVDA und JAWS . NVDA ist ein kostenloses Open-Source-Tool, das von NV Access entwickelt wurde – eine erstaunliche Organisation, die ihre Arbeit der Verbesserung des Zugangs zu Technologien für Menschen mit Sehbehinderungen widmet. JAWS ist ein beliebtes abonnementbasiertes Screenreading-Tool.

Wenn Sie keine Software installieren möchten, um zu verstehen, wie Ihre E-Mail auf einem Screenreader klingen würde, können Sie dafür Litmus verwenden! Wir haben vor kurzem NVDA in Litmus integriert, sodass Sie jetzt direkt in der Litmus-Checkliste eine Audiovorschau Ihrer E-Mail anhören können. Erfahren Sie mehr .

Außerdem bieten alle modernen Betriebssysteme auch eine Art nativer Bildschirmleseunterstützung. Auf dem Mac ist es zum Beispiel VoiceOver .

Welche Marken leisten hervorragende Arbeit bei der Optimierung ihrer E-Mails für die Zugänglichkeit? Ich würde mich über ein paar Inspirationen freuen!

Jason : Einer meiner Favoriten ist Deque . Sie machen viel Zugänglichkeitstraining, haben einen tollen Blog – und tolle E-Mails! Ihre E-Mails folgen nicht nur den Best Practices für Barrierefreiheit, sondern enthalten auch großartige Inhalte, die Ihnen helfen, mehr über das Thema zu erfahren. Sie sollten sich für ihren Newsletter anmelden !

Auch wenn ich eingebildet klingen mag, ich war sehr beeindruckt von der Arbeit, die Alice und das E-Mail-Team für den Litmus-Newsletter geleistet haben . Es ist nicht nur schön gestaltet, sondern es wurde auch viel Arbeit darauf verwendet, es zugänglich zu machen, basierend auf den Best Practices, die in The Ultimate Guide to E-Accessibility besprochen werden.

Gibt es einen Einblick, wie sich Tools wie „Alexa“ oder „Siri“ von anderen Screenreadern unterscheiden? Oder die Funktion „Vorlesen“ von Outlook?

Jason : In einer kürzlich erschienenen Episode des Delivering-Podcasts habe ich mich eingehend mit Sprachassistenten befasst. Ich habe festgestellt, dass Alexa die einzige ist, die Ihre E-Mails wirklich liest – aber sie liest nur den HTML-Text und ignoriert alle Alt-Attribute, Tabellen oder andere HTML-Elemente. Es unterscheidet sich davon, wie ein Screenreader E-Mails handhaben würde. Sprachassistenten sind auf Komfort ausgerichtet, nicht unbedingt auf Barrierefreiheit, daher funktionieren sie nicht wie ein ausgewachsener Screenreader wie beispielsweise NVDA. In vielen Fällen benötigen Sie noch Ihr Telefon oder Ihren Laptop, um durch die Inhalte zu navigieren, der Sprachassistent unterstützt Sie nur. Für einen vollständigen Überblick darüber, wie Alexa, Google Home, Siri und Cortana mit E-Mails umgehen, schalten Sie diese Podcast-Episode ein.  

Wie wäre es mit animierten GIFs? Verwenden Sie sie oder nicht? Machen sie den Lesern Probleme?

Alice : Du kannst sie benutzen, aber pass auf, wie. Animationen können lichtempfindliche epileptische Anfälle auslösen, sodass Sie niemals ein GIF einfügen möchten, das zu erschütternd oder zu blinkend ist. Sie möchten auch keine wichtigen Informationen wie Kopien in Ihre GIFs aufnehmen. In Ihrem GIF versteckte Kopien sind für Screenreader nicht zugänglich – und sie werden nicht in E-Mail-Clients angezeigt, in denen Bilder deaktiviert sind –, sodass Sie riskieren, wichtige Teile Ihrer Nachrichten zu verlieren.

Wo finde ich Beispiele für barrierefreie E-Mail-Vorlagen?

Jason : Es gibt so viele kostenlose Vorlagen, aber nicht viele davon sind im Hinblick auf Barrierefreiheit optimiert! Aus diesem Grund haben wir vor kurzem vier brandneue Vorlagen erstellt, die den Best Practices für Barrierefreiheit entsprechen – und sie stehen Ihnen kostenlos in der Litmus-Community zur Verfügung . Schauen Sie sich unsere Vorlagen an, wenn Sie…

• Zugängliche Newsletter
• Zugängliche persönliche Notizen
• Zugängliche Transaktions-E-Mails
• Barrierefreie Produktankündigungen

Wie wirkt sich die Verwendung von Emojis auf die Barrierefreiheit aus?

Jason: Während die meisten Screenreader Emojis verstehen und sie vorlesen können, ist dies möglicherweise nicht die optimale Erfahrung für Benutzer. Hören wir uns an, wie NVDA diese Beispiel-Betreffzeile mit einem Emoji vorliest:

Der größte Verkauf des Jahres

Sie können hören, wie unzusammenhängend ein Emoji neben Text klingt. Während Emojis mittlerweile alltäglich sind und Benutzer von Hilfstechnologien wahrscheinlich daran gewöhnt sind, sie zu hören, kann es je nach Emoji immer noch unangenehm klingen. Wie bei jedem anderen Element oder jeder Kopie in einer E-Mail ist der beste Weg, um zu sehen, ob es funktioniert oder nicht, es auszuprobieren und Ihre E-Mail mit einem Tool wie NVDA oder dem Litmus Accessibility Checker abzuhören.

Muss ich „role=presentation“ auch auf DIVs anwenden?

Alice : Nein! role=“presentation“ soll Screenreader nur anweisen, die semantische Bedeutung von Tags zu ignorieren. Tabellen benötigen sie also, da tabellarische Daten wie Grafiken alle Spalten- und Zeileninformationen benötigen, damit die Benutzer richtig navigieren und sie verstehen können. In E-Mails verlassen sich Entwickler oft auf Tabellen zur Darstellung anstelle von Tabellendaten, weshalb Tabellen dies erfordern. DIVs hingegen haben keine semantische Bedeutung, die für Screenreader überschrieben werden müsste.

Gibt es für Kunden, die darauf bestehen, bildbasierte E-Mails zu verwenden, Best Practices, die wir befolgen sollten?

Bettina : Das ist schwer! Es gibt unzählige Gründe, warum das Senden von E-Mails nur mit Bildern eine schreckliche Idee ist. Tun Sie also als ersten Schritt alles, was Sie können, um Ihren Kunden davon zu überzeugen, dass dieser Ansatz mit einer schrecklichen Abonnentenerfahrung einhergeht. Unser Blog-Beitrag zum Thema, warum Sie keine E-Mails nur mit Bildern senden sollten, enthält viele Einblicke und Tipps, die Ihnen helfen, Ihren Fall zu vertreten.

Wenn Sie Ihren Kunden nicht auf den richtigen Weg bringen können, können Sie nur Ihre Bild-Aus-Ansicht mit ALT-Text optimieren ( Sie können diesen ALT-Text sogar formatieren ) und kugelsichere Schaltflächen verwenden, damit zumindest Ihre CTAs funktioniert immer noch, wenn Bilder deaktiviert sind.

Hat die Verwendung von Webfonts Auswirkungen auf die Barrierefreiheit?

Alice : Vom Standpunkt des Codes aus sollte es das nicht. Aus gestalterischer Sicht bedeutet dies, dass Sie immer sicherstellen sollten, dass sowohl die Webfont als auch ihr websicherer Fallback die Standards für das Kontrastverhältnis erfüllen, um lesbar zu sein. Wenn Ihr Webfont beispielsweise dicker ist als der Fallback, stellen Sie einfach sicher, dass der Fallback auch die Kontrastverhältniswerte erfüllt, da der Fallback stattdessen von Benutzern beispielsweise in Gmail angezeigt wird.

Die einzige Änderung, die wir in unserer Codevorlage nicht vorgenommen haben, ist die Verwendung des semantischen Elements für Überschriften oder Absätze. Wir stilisieren derzeit die Tabellenzelle für den Text. Welche Probleme kann dies für die Barrierefreiheit aufwerfen?

Alice : Ich gehe davon aus, dass die Rolle der Tabelle, die den Text umschließt, bereits auf "Präsentation" oder "Keine" eingestellt ist, um unnötiges Screenreader-Geräusch einzudämmen. Abgesehen von diesem Problem würde die Nichtverwendung der richtigen Überschriften-/Absatz-Tags also ein Navigationsproblem für Hilfsgeräte darstellen, da einige Technologien es Benutzern ermöglichen, von Überschrift zu Überschrift (und den dazugehörigen Absätzen) zu springen, als ob es sich um ein Inhaltsverzeichnis handelte.

Können Sonderzeichen wie geschweifte Apostrophe, Anführungszeichen, kaufmännische Und-Zeichen usw. von Bildschirmleseprogrammen gelesen werden?

Alice : Es kommt darauf an. Das kaufmännische Und-Zeichen wird oft als „und“ vorgelesen. Anführungszeichen und geschweifte Apostrophe werden ignoriert, etwa wie jemand sie beim Vorlesen nicht ausspricht. Andere Sonderzeichen werden von Fall zu Fall berücksichtigt, wie Aufzählungszeichen werden als „Aufzählungszeichen“ vorgelesen. Ich würde generell empfehlen, immer zu testen, um sicher zu gehen.

Irgendwelche Vorschläge zur Formatierung von Text nur für Barrierefreiheit? Ich verwende mehrere „=“ oder „-“-Umbrüche zwischen den Abschnitten. Wie werden diese gehandhabt?

Alice : Bindestriche und Unterstriche werden normalerweise nicht vorgelesen, also sind diese in Ordnung. Bildschirmleseprogramme werden jedoch das Gleichheitszeichen vorlesen, daher würde ich empfehlen, es zu vermeiden.