Wenn auf Ihre E-Mail nicht zugegriffen werden kann, ist Ihre E-Mail unnütz.
Die Zugänglichkeit von E-Mails ist nach wie vor ein entscheidendes Thema. Obwohl die Barrierefreiheit von E-Mails vor über einem Jahrzehnt bekannt wurde, haben erstaunliche 99,97 % der E-Mails immer noch kritische Probleme mit der Barrierefreiheit.
In unserem Artikel „Warum Barrierefreiheit wichtig ist“ haben wir verschiedene Behinderungen besprochen und erläutert, wie sie sich auf die Benutzererfahrung auswirken. Wir haben auch Ansatzpunkte hervorgehoben, um die vollständige Zugänglichkeit von E-Mails zu gewährleisten. In diesem Artikel stellen wir dir Richtlinien zur Optimierung deiner E-Mails im Hinblick auf Barrierefreiheit vor.
Die wichtigsten Erkenntnisse
- Obwohl es seit über einem Jahrzehnt eine anerkannte Notwendigkeit ist, haben erstaunliche 99,97 % der HTML-E-Mails immer noch erhebliche Probleme mit der Barrierefreiheit, was eine massive Lücke in der E-Mail-Designpraxis unterstreicht.
- Anpassungen der Barrierefreiheit in E-Mails sind nicht nur eine Nettigkeit, sondern eine Notwendigkeit, da etwa die Hälfte der Weltbevölkerung aufgrund einer Vielzahl von Behinderungen, einschließlich Sehbehinderungen, Hörverlust, motorischen Behinderungen und kognitiven Störungen, potenziell von leichter zugänglichen E-Mail-Designs profitiert.
- Eine effektive E-Mail-Zugänglichkeit geht über einfache technische Korrekturen hinaus und erfordert eine umfassende, fünfstufige Strategie: Design (Gewährleistung der visuellen Zugänglichkeit), Kopieren, Arbeiten mit alternativen Texten, Technologie und strategische Verknüpfung. Nur dieser ganzheitliche Ansatz gewährleistet eine gründliche Zugänglichkeit über alle Aspekte der E-Mail-Kommunikation hinweg.
Statistiken zur Barrierefreiheit oder die Anzahl der Personen weltweit, die von der Barrierefreiheit per E-Mail profitieren würden
In unserem vorherigen Artikel haben wir detaillierte Statistiken zur Prävalenz verschiedener Beeinträchtigungen und zum aktuellen Stand der digitalen Erreichbarkeit vorgestellt. Hier ist ein kurzer Überblick:
- 2,5 Milliarden Menschen haben Sehbehinderungen, darunter 2,2 Milliarden mit Sehproblemen und 300 Millionen, die farbenblind sind;
- 430 Millionen Menschen sind schwerhörig (taub), und 1,5 Milliarden Menschen haben einen Hörverlust;
- 968 Millionen haben motorische Behinderungen;
- 1,6 Milliarden Menschen haben kognitive und Lernbehinderungen, darunter 960 Millionen mit Legasthenie und 400 Millionen mit lichtempfindlicher Epilepsie.
Dieses Diagramm zeigt, dass etwa die Hälfte der Weltbevölkerung von zugänglichen E-Mails profitieren könnte, aber 99,97 % der HTML-E-Mails haben erhebliche Probleme mit der Barrierefreiheit.
Liste der Best Practices für die Barrierefreiheit von E-Mails
Standards für die Barrierefreiheit von E-Mails sind eine Reihe von Regeln und Empfehlungen für die Gestaltung von E-Mails, die für Menschen mit allen Arten von Behinderungen leicht lesbar sind.
- Machen Sie Alt-Text für Bilder und GIFs sinnvoll.
- Wenn ein GIF oder ein Bild einem Bildungszweck dient, fügen Sie unbedingt eine schriftliche, detaillierte Beschreibung hinzu.
- Verwenden Sie Überschriften und Zwischenüberschriften (anstatt nur größere Schriftarten zu verwenden), um Ihre Inhalte sinnvoll zu organisieren und für Screenreader lesbar zu machen.
- Verwenden Sie nur programmatisch formatierte Überschriften, Aufzählungszeichen und nummerierte Listen.
- Machen Sie den Linktext aussagekräftig.
- Entscheiden Sie sich für zugängliche Schriftarten wie OpenDyslexic, Comic Sans und serifenlose Optionen wie Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri und Open Sans.
- Stellen Sie den Zeilenabstand auf ca. 150% ein.
- Geben Sie die Namen der Farben der Elemente in Klammern an.
- Überprüfen Sie den Farbkontrast Ihrer Kopie und Ihrer Bilder.
- Vermeiden Sie es, alle Großbuchstaben für fortlaufenden Text zu verwenden. Verwenden Sie stattdessen größere Kleinbuchstaben.
- Fügen Sie Satzzeichen am Ende von Aufzählungspunkten und jedem Satz hinzu, einschließlich Überschriften.
- Verwenden Sie einfarbige, cremefarbene Hintergründe.
- Richten Sie Ihre Kopie linksbündig aus, ohne Zeilenumbrüche und ohne Begründung.
- Vermeiden Sie übermäßige Fett- oder Kursivschrift — verwenden Sie Fett zur Betonung.
- Unterstreichungen sind nur für Links zulässig.
- Platzieren Sie nur ein animiertes GIF-Bild auf einem Bildschirm.
- Verwende GIFs mit weniger als drei Blitzen pro Sekunde.
- Legen Sie die E-Mail-Sprache, die Präsentationsrollen und das DIR-Attribut für Screenreader fest.
Hier werden alle Barrierefreiheitsstandards für E-Mailszusammengefasst. Im Folgenden zeigen wir Ihnen, wie wir diese spezifischen Regeln entwickelt haben.
Schritte zum Erstellen barrierefreier E-Mails
In unserem vorherigen Artikel haben wir fünf Arten von Behinderungen und ihre einzigartigen Auswirkungen auf die Benutzererfahrung untersucht. Die Erkenntnis, dass jede Behinderung eine spezifische Unterbringung erfordert, ist von entscheidender Bedeutung. Wenn Sie sich beispielsweise ausschließlich auf Lösungen für Farbenblindheit konzentrieren, wird dies möglicherweise nicht den Bedürfnissen von Personen mit Legasthenie oder denen, die Screenreader verwenden, gerecht. Um wirklich zugängliche E-Mailszu erstellen, benötigen wir einen ganzheitlichen Ansatz, der Design, Code und Text umfasst. Diese umfassende Methode stellt sicher, dass wir das gesamte Spektrum der Barrierefreiheitsanforderungen erfüllen und die Benutzererfahrung erheblich verbessern.
Und so geht es:
Schritt 1. Verfassen vonr barrierefreien E-Mail-Texten
Behinderungen, die es abdeckt: Seh- und kognitive/Lern-/neurologische Behinderungen.
Zu den barrierefreien Textrichtlinien gehören:
- fassen Sie sich kurz: Schreiben Sie prägnante Texte, damit die Empfänger Ihr Anliegen schnell erfassen können, ohne lange Texte lesen zu müssen;
- halten Sie es einfach: Verwenden Sie eine einfache Sprache, die ein Schüler der 8. Klasse leicht verstehen kann. Vermeiden Sie komplexe Fachbegriffe oder akademische Begriffe;
- stellen Sie den Zeilenabstand auf ca. 150% ein;
- verwenden Sie Zwischenüberschriften: Unterteilen Sie Ihren Inhalt in Abschnitte mit klaren Zwischenüberschriften, damit Ihre E-Mails leichter zu lesen sind;
- überschriften festlegen, anstatt nur größere Schriftarten zu verwenden.
Schritt 2. Optimierung von ALT-Texten
Da Menschen mit Sehbehinderungen Ihre Bilder nicht sehen können, ist klarer und beschreibender alternativer Text für eine effektive Kommunikation unerlässlich.
Behinderungen, die es abdeckt: Nicht nur Sehbehinderungen — Alt-Text kommt allen Empfängern zugute. Es unterstützt diejenigen, deren Bilder aufgrund von langsamen Internet-, Sicherheitseinstellungen oder persönlichen Vorlieben blockiert sind, und unterstützt Screenreader-Benutzer, einschließlich Personen mit Sehbehinderungen, Legasthenie und anderen Lese- oder Lernbehinderungen.
Experte
Lassen Sie uns zunächst den Unterschied zwischen Alt-Attribut und Alt-Text erklären:
- das alt-Attribut ist das HTML-Attribut, das im Bildelement verwendet wird;
- alt-Text ist der Inhalt, der innerhalb des Alt-Attributs platziert wird.
Lassen Sie uns Ihnen zeigen, was passiert, wenn es kein ALT-Attribut gibt:
- personen, die Screenreader verwenden, hören die gesamte URL für das gehostete Bild oder den Dateinamen, wenn das Bild nicht verlinkt ist, oder die Bild-URL, wenn das Bild verlinkt ist;
- alle Empfänger haben keine Ahnung, worum es im Bild geht, wenn das Bild blockiert ist.
(Quelle: Webinar mit Sarah Gallardo)
Jedes Bild in einer E-Mail MUSS ein ALT-Attribut HABEN.
Zu den Best Practices für alternative Texte gehören:
Experte
- sowohl den Inhalt als auch den Kontext des Bildes zu berücksichtigen;
- stellen Sie sicher, dass Ihr Alt-Text das vermittelt, was das Bild darstellt;
- denken Sie daran, dass Bildschirmleser in der Regel nach 100-120 Zeichen aufhören, Alt-Text zu lesen;
- überspringen Sie Sätze wie "dieses Bild ist ungefähr", da Screenreader bereits auf die Anwesenheit eines Bildes hinweisen;
- satz oder Titel Groß- und Kleinschreibung verwenden und dabei Großbuchstaben vermeiden;
- auf einen beschreibenden, aber prägnanten Alt-Text abzielen;
- achten Sie auf einen guten Kontrast zwischen dem Alt-Text und dem Hintergrund, um die visuelle Klarheit zu gewährleisten.
Schritt 3. Links zugänglich machen
Behinderungen, die es abdeckt: Unterstützt Benutzer von Screenreadern und Personen mit motorischen Beeinträchtigungen.
Experte
Zu den Best Practices für barrierefreie Links gehören:
- halten Sie sich an eine absichtliche Verknüpfungsstrategie: Fügen Sie nur Links zu wesentlichen Bildern hinzu und vermeiden Sie die Verknüpfung dekorativer Bilder;
- verwenden Sie beschreibenden Linktext, um deutlich anzuzeigen, wohin der Link führt, und vermeiden Sie allgemeine Ausdrücke wie "Mehr erfahren" oder "Hier klicken";
- stellen Sie sicher, dass der Alt-Text für verlinkte Bilder das Ziel des Links beschreibt;
- stellen Sie sicher, dass sich Links von anderen abheben, indem Sie Formatierungsmethoden wie Unterstreichen oder Fettdruck verwenden, anstatt sich ausschließlich auf die Farbe zu verlassen;
- wenn möglich, umhüllen Sie Links in Call-to-Action-Buttons, um Menschen mit Sehbehinderungen oder motorischen Behinderungen beim Klicken zu unterstützen.
Schritt 4. Optimierung des E-Mail-Designs für Barrierefreiheit
Aufgrund seiner Komplexität ist dieser Schritt in mehrere Gruppen unterteilt.
Gruppe 1. Richtlinien zur Barrierefreiheit bei der Textformatierung
Behinderungen, die sie abdeckt: Personen mit Sehbehinderung, Personen, die Screenreader verwenden, und Dyslektiker.
- vermeiden Sie die Verwendung von Großbuchstaben, da sie von Menschen mit Legasthenie falsch interpretiert werden können und Bildschirmleser sie als Abkürzungen lesen können;
- satzzeichen am Ende von Aufzählungszeichen und Überschriften;
- die Verwendung von Kursivschrift und Fettschrift zur Betonung zu minimieren; fettgedruckte Kursivschrift vollständig zu vermeiden;
- nur Text unterstreichen, wenn es sich um einen Hyperlink handelt;
- entscheiden Sie sich für eine Haupttextgröße von 16 px für die Lesbarkeit;
- entscheiden Sie sich für zugängliche Schriftarten wie OpenDyslexic, Comic Sans und serifenlose Optionen wie Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri und Open Sans;
- richten Sie Ihren Text linksbündig aus, ohne Blocksatz oder Zeilenumbrüche hinzuzufügen.
Obwohl Erfolgskriterium 1.4.8 (AAA-Konformität) dies zulässt, empfiehlt Best Practice, aus den genannten Gründen gerechtfertigten Text zu vermeiden. Richten Sie den Text nur auf eine Seite aus.
Gruppe 2. Arbeiten mit Farben
Behinderungen, die es abdeckt: Menschen mit Farbenblindheit, Sehschwäche und Legasthenie.
Experte
- sorgen für einen ausreichenden Farbkontrast zwischen Text und Bild;
- verwenden Sie einfarbige Hintergründe — für Texte unter 18px fett und 24 normal sollte es 4:5:1 sein, während es für Texte darüber 3:1 sein sollte;
- wählen Sie dunkelgraue Schriftarten auf cremefarbenen Hintergründen anstelle von hellem Schwarz auf hellem Weiß;
- vermeiden Sie es, nur Farben zu verwenden, um wichtige Informationen in E-Mails hervorzuheben;
- wenn Sie Bilder verwenden, um richtige oder falsche Antworten (mit Rot bzw. Grün) oder Trends in Zahlen anzuzeigen, ergänzen Sie sie zur Verdeutlichung mit Textbeschreibungen oder "+" - und "-" -Zeichen.
(Quelle: E-Mail von HubSpot)
Gruppe 3. Arbeiten an Bildern
Behinderungen, die es abdeckt: Menschen mit Farbenblindheit, Sehschwäche, Legasthenie und photosensitiver Epilepsie.
Wenn Sie mit GIFs und Bildern arbeiten, denken Sie daran:
- GIFs mit drei oder weniger Blitzen pro Sekunde verwenden;
- ein animiertes Bild (GIFs) pro Bildschirm verwenden;
- den Farbkontrast wie oben beschrieben aufrechterhalten;
- aussagekräftigen Alt-Text für Bilder einfügen. Für GIFs, die Anweisungen oder wichtige Informationen vermitteln, stellen Sie zusätzliche Beschreibungen unter dem GIF bereit.
Schritt 5. Erfüllung der Barrierefreiheitsanforderungen eines E-Mail-Codes
Behinderungen, die es abdeckt: Unterstützt diejenigen, die Screenreader und andere Arten von assistiver Technologie verwenden.
Detaillierte Einblicke in die Barrierefreiheit von E-Mails und assistive Technologien finden Sie in unserem Webinar mit Sarah Gallardo und Dmytro Kudrenko.
Wir werden nur die kritischen Fälle nennen:
- legen Sie das lang-Attribut sowohl im <html> Element als auch in den direkten untergeordneten <body> Elementen des Elements fest. Diese Redundanz ist notwendig , da einige E-Mail-Clients sie aus dem <html> Element entfernen können;
- den Inhalt innerhalb der <body> mit einem dir-Attribut für die Richtungsangabe umschließen;
- <table> Elementen mit dem Attribut role=„presentation“ oder role=„none“ zuweisen.
Wenn Sie Stripo verwenden, müssen Sie sich keine Sorgen machen, dass HTML-E-Mails für Screenreader optimiert sind, da alle mit Stripo erstellten E-Mails bereits vollständig optimiert sind.
Tools zum Testen, ob Ihre E-Mails allen Best Practices für die Barrierefreiheit von E-Mails entsprechen
Wenn Sie Ihre E-Mail-Kampagnen abgeschlossen haben, überprüfen Sie sie mit Tools zum Testen der Barrierefreiheit und/oder probieren Sie sie mit Screenreadern aus.
Du musst dein eigenes Hundefutter essen. Das heißt, Sie müssen testen, testen Sie immer das Ergebnis.
Hier sind die Tools, mit denen Sie Ihre E-Mails überprüfen können:
- accessible-email.org von Jordie van Rijn und Maarten Lierop — dieses Tool überprüft, ob Ihr E-Mail-Code mit jedem Screenreader kompatibel ist. Sie können Ihnen sogar dabei helfen, es zu optimieren;
- Accessibility Checker, ein Tool von Parcel, mit dem Sie Ihre E-Mails auf Best Practices und Probleme bei der Barrierefreiheit prüfen können. Es kategorisiert die identifizierten Probleme nach Schweregrad: kritisch, ernst, moderat und mild. Dies erleichtert die Priorisierung von Fixes;
- Campaign Precheck per E-Mail auf Acid — es prüft, ob Ihre E-Mail für Hilfsgeräte optimiert ist;
- Zugängliche Farben, um den Farbkontrast des E-Mail-Textes zu überprüfen (Kopie und andere Elemente, ohne Bilder);
- WebAIM (Webzugänglichkeit im Auge behalten) — Farbkontrastprüfer. Es berücksichtigt nicht nur die Farben, sondern auch die Schriftgrößen für jeden Fall;
- Coblis, Farbblindheitssimulator — zeigt an, ob Ihre Bilder für farbenblinde Menschen zugänglich sind;
- Verfolgen Sie RERC (TORF), um sicherzustellen, dass Ihre GIFs die empfohlenen Grenzwerte für die Blinkfrequenz einhalten.
Experten und Ressourcen, um mehr über digitale und E-Mail-Zugänglichkeit zu erfahren
In diesem Artikel haben wir wesentliche Praktiken für die Barrierefreiheit in E-Mails vorgestellt und eine Liste der wichtigsten Ressourcen und Experten zusammengestellt, die Sie für weitere Einblicke in das Thema verfolgen können.
- Sarah Gallardo, als leitende E-Mail-Entwicklerin bei Oracle, ist eine bekannte Spezialistin für E-Mail-Zugänglichkeit. Sie bietet umfangreiche Barrierefreiheitsrichtlinien und -standards an. Ihr Fachwissen hilft Unternehmen, sich durch ausführliche Schulungsmaterialien an den besten Barrierefreiheitspraktiken auszurichten.
- Mike Paciello, der als Chief Accessibility Officer bei AudioEye tätig ist, informiert Marken aktiv über die Bedeutung der Barrierefreiheit durch die neuesten Statistiken und Erkenntnisse. Seine Arbeit ist entscheidend, um Unternehmen zu motivieren, Barrierefreiheit zu implementieren und zu priorisieren.
- Thomas Logan bietet eine kompetente Beratung zur Barrierefreiheit und hilft Unternehmen dabei, sicherzustellen, dass ihre digitalen Inhalte für alle zugänglich sind. Zu seinen Dienstleistungen gehören Schulungen, umfassende Audits und strategische Beratung unter Einhaltung strenger Barrierefreiheitsstandards.
- Mark Robbins, ein Befürworter der Barrierefreiheit von E-Mails, teilt sein tiefgreifendes Fachwissen, indem er umsetzbare Tipps und innovative Lösungen für E-Mail-Vermarkter bereitstellt. Sein Fokus darauf, E-Mail-Kommunikation zugänglich zu machen, kommt sowohl Absendern als auch Empfängern zugute.
- Paul Airy, spezialisiert auf E-Mail-Design und -Entwicklung, wendet Verhaltenswissenschaften an, um die Benutzerfreundlichkeit und Zugänglichkeit von E-Mails zu verbessern. Sein Ansatz verbessert nicht nur die Benutzererfahrung, sondern stellt auch sicher, dass E-Mails für alle verständlich und navigierbar sind.
- Die WCAG setzt die internationalen Standards für Barrierefreiheit und bietet einen Rahmen, der detailliert beschreibt, wie digitale Inhalte für Menschen mit Behinderungen zugänglich gemacht werden können. Diese Regeln und Richtlinien zur Barrierefreiheit sind für Entwickler und Ersteller von Inhalten weltweit unerlässlich.
- Das E-Mail-Markup-Konsortium von Parcel, das von Barrierefreiheitsexperten wie Mark Robbins geleitet wird, bietet wesentliche Materialien zur Verbesserung der Barrierefreiheit von E-Mails. Es enthält einen vierteljährlichen Bericht, ein detailliertes Glossar und eine Liste der häufigsten Fehler bei Lösungen, die alle darauf abzielen, die Industriestandards zu erhöhen.
- A11y.email, das von Sarah Gallardo betrieben wird, ist ein Blog, der ausführliche Materialien zur Barrierefreiheit von E-Mails bietet und Themen wie effektiven Alt-Text, aussagekräftige Links, semantisches HTML und Farbkontrast behandelt. Es bietet auch Tools und Techniken zum Testen der Barrierefreiheit in E-Mails, was es ideal für E-Mail-Entwickler und Vermarkter macht.
- AudioEye, das von Mike Paciello betrieben wird, bietet eine Fülle von Informationen zur digitalen Barrierefreiheit. Es enthält Artikel zu Best Practices, Compliance-Richtlinien und den neuesten Trends im Bereich Barrierefreiheit und hilft Marken dabei, sicherzustellen, dass ihre digitalen Inhalte für alle Nutzer inklusiv und zugänglich sind.
- Der Equal Entry Blog unter der Leitung von Thomas Logan bietet detaillierte Artikel zur digitalen Barrierefreiheit. Es deckt Best Practices und innovative Themen wie GenAI in den Bereichen E-Mail-Zugänglichkeit, Web und Videospiele ab und zielt darauf ab, digitale Inhalte für alle inklusiv zu gestalten.
- Die British Legasthenia Association sensibilisiert und unterstützt Menschen mit Legasthenie, indem sie Ressourcen, Informationen und Richtlinien bereitstellt, um digitale Inhalte zu erstellen und zugänglich und legastheniefreundlich zu machen.
- Die Yale University bietet Artikel und Ressourcen zur Barrierefreiheit im Internet, einschließlich Best Practices für die Erstellung barrierefreier Links und anderer digitaler Inhalte.
Der Abschluss
Das Erstellen barrierefreier E-Mails ist ein wesentlicher Bestandteil inklusiver Kommunikationsstrategien, von denen nicht nur Menschen mit Behinderungen, sondern alle E-Mail-Empfänger profitieren. Die große Verbreitung von Problemen mit der Barrierefreiheit in aktuellen E-Mail-Designs unterstreicht die dringende Notwendigkeit der Sensibilisierung und Umsetzung von Best Practices. Durch die Übernahme der in diesem Artikel beschriebenen umfassenden Richtlinien können Vermarkter und Entwickler die Benutzererfahrung für ein breites Publikum erheblich verbessern und sicherstellen, dass E-Mails nicht nur lesbar, sondern für jeden wirklich zugänglich sind. Dieser Ansatz steigert nicht nur das Engagement, sondern spiegelt auch das Engagement für Inklusivität in der digitalen Kommunikation wider.
0 Kommentare