Barrierefreie E-Mails erstellen
Warum ist Barrierefreiheit wichtig?
Deine E-Mails sollten barrierefrei sein, damit alle Menschen, unabhängig von möglichen Einschränkungen (z. B. Sehbehinderungen), sie problemlos lesen und verstehen können. Für viele Unternehmen
und Organisationen, die Ihre Dienstleistungen an Privatpersonen richten, ist der rechtliche Rahmen durch das Barrierefreiheitsstärkungsgesetz (BFSG) festgelegt. Barrierefreie E-Mails sind allerdings auch unabhängig
von gesetzlichen Vorschriften eine gute Praxis, um eine breitere Zielgruppe zu
erreichen und das Benutzererlebnis zu verbessern.
Maßnahmen, um deine E-Mail Barrierefrei zu machen
Berücksichtige die folgenden Aspekte um Deine E-Mails zugänglicher zu machen.
Layout und Design
Schriftart
Verwende für Fließtext serifenlose Schriftarten, da diese sind
leichter zu erfassen sind. Bei Headlines ist es okay, Schriftarten mit Serifen zu verwenden.
Empfohlene Schriftarten
Systemschriften (Web-Safe-Schriften): Arial, Helvetica, Verdana
Schriftgröße
Verwende mindestens eine
Schriftgröße von 15px. Die Zeilenhöhe sollte mindestens das 1,5-fache der Schriftgröße betragen.
Kontrast
Achte
auf einen hohen Farb- und Helligkeitskontrast zwischen Hintergrund und
Text. Der Kontrast von Fließtext sollte mindestens 4,5:1 betragen um die Bedürfnisse
von farbenblinden oder sehbehinderten Benutzern zu erfüllen. Bei größeren Texten wie Überschriften genügt ein Kontrast-Verhältnis von 3:1.
Du kannst den Kontrast hier prüfen:
Links und Buttons
Mache diese deutlich
erkennbar. Links sollten sich nicht ausschließlich durch die Textfarbe unterscheiden,
sondern auch unterstrichen sein.
Text hervorheben
Verwende Textformatierung (fett, kursiv) statt farblicher Akzente, da diese von Screenreadern nicht ausgewertet werden können. Setze diese Textformatierungen jedoch sparsam ein: Kursiver Text ist für Menschen mit Legasthenie schwer zu erfassen. Fette hervorhebungen können Deine E-Mail überladen oder aggresiv wirken lassen.
Inhalt und Struktur
Verständlichkeit
Benutze eine einfache und
klare Sprache.
Gliederung
Strukturiere deine Inhalte mit
Überschriften, Absätzen, Listen und Buttons.
Headlines
- Verwende HTML-Headlines: Diese sind notwendig, um Inhalte mit Hilfe assistiver Technologien schnell anzusteuern zu können.
- Verwende je Newsletter nur eine H1-Headline
- Überschriften
der unteren Ebenen sollten sich gegenseitig unterstützen, d. h. der
Inhalt einer H3-Headline sollte sich direkt auf den Inhalt einer
H2-Headline beziehen.
- Kurze E-Mails (beispielsweise Anmeldebestätigungen) benötigen nicht unbedingt eine Headline.
Text in Bildern
Hinterlege wichtige Informationen
niemals ausschließlich in Bildern.
Alternativtext für Bilder
Nutze Alternativtext um den
Bild-Inhalt zu beschreiben, damit dieser von Screenreadern interpretiert werden kann.
- Der Alternativtext sollte den Inhalt des Bildes wiederspiegeln.
- Halte den Text kurz und klar.
- Manche Screenreader schneiden den Inhalt nach 100-120 Zeichen ab. Platziere die wichtigsten Informationen deshalb am Anfang.
- Vermeide Wiederholungen: Es sollte kein Text verwendet werden, der so schon an anderer Stelle vorkommt.
- Vermeide Formulierungen wie “Bild von …“ oder “Grafik eines …”.
Bildtyp | Beschreibung | Erwarteter Alternativtext |
Informative Bilder | Bilder, die dich über etwas informieren. | Vermittle, was das Bild vermitteln will. |
Bilder mit Text | Vermeide Bilder die Text enthalten soweit möglich. | Gib den Text aus dem Bild komplett wieder. |
Dekorative (nicht verlinkte) Bilder | Bilder, die keine spezielle Aussage machen, beispielsweise Abstandhalter-Bilder. | Verwende hier keinen Alternativtext (alt=""). |
Verlinkte Bilder | Hier ist es besonders wichtig den Alternativtext auszufüllen, da andernfalls die Link-URL in Screenreadern vorgelesen wird. | Zusätzlich zum Bildinhalt sollte beschrieben werden, wohin der Link führt. |
Bildgruppen | Aus mehreren Einzelbildern zusammengesetztes Gesamtbild. |
|
Link- und Button-Beschriftung
Verwende keine Formulierungen wie "Mehr" oder "Weiterlesen". Verwende
stattdessen Formulierungen wie "Hier für Aktion XYZ Anmelden" oder "Mehr
Informationen zum Thema XYZ".
Test und Optimierung
Darstellungstest
Führe vor dem Versand einen
Darstellungstest durch und deine Mailings hinsichtlich Barrierefreiheit in
einer Vielzahl von Clients zu überprüfen.
Automatisierter Zugänglichkeitstests
Nutze Tools wie beispielsweise das axe DevTools-Plugin (erhältlich für Edge, Firefox und Chrome) um Deinen Mailing-Quellcode automatisiert zu testen.
Lasse dir die E-Mail vorlesen
Nutze Bedienungshilfen wie Apple VoiceOver oder NVDA, um dir deine E-Mail vorlesen zu lassen.
Überprüfe die Gliederung der Inhalte
Es kann teilweise schwierig sein zu erkennen, ob dein Mailing gut gegliedert ist. Browser-Plugins wie HeadingsMap (Edge, Firefox, Chrome) unterstützen dich bei der Analyse. Öffne die Vorschau deiner E-Mail im Browser und Klicke auf die Erweiterung. Das Plugin zeigt dir die Struktur, so wie sie von einem Screenreader erkannt wird:
Tastatur-Zugänglichkeit
Prüfe ob du Mailing-Inhalte wie Links oder Buttons über die Tastatur erreichen kannst.
HTML- und Template-Quellcode
Die aufgeführten Maßnahmen haben wir für dich in unseren Standard-Templates berücksichtigt.
Sprach-Kennzeichnung
Gib dem Nutzer die Möglichkeit, die Sprache des Mailings zu wählen. Diese wird mit dem lang-Attribut am <html>-Tag definiert. Das lang-Attribut wird von Screenreadern ausgewertet, um die E-Mail vorzulesen.
Beispiel: <html lang="de">
Semantische HTML-Elemente
Headlines: Benutze für Headlines <h>-Tags (<h1>, <h2>, ...) um die Hierarchie der Infomation wiederzuspiegeln.
Vermeide es <span>-Tags zu verwenden und die Textgröße/Schriftstärke via CSS zu erhöhen.
Aufzählungen: Verwende für ungeordnete Listen das <ul>-Tag und für geordnete Listen das <ol>-Tag.
Tabellen
Aufgrund der technischen Einschränkungen vieler E-Mail-Clients lassen sich Layout-Tabellen nicht gänzlich vermeiden. Hinterlege an Layout-Tabellen das Attribut role="presentation". Screenreader können diese Tabellen damit von Datentabellen unterscheiden.
Beispiel: <table cellpadding="0" cellspacing="0" border="0" role="presentation">
Responsives Design
Erstelle deine Mailings responsiv damit diese auf sämtlichen Endgeräten optimal dargestellt werden.
Links
BFSG (Barrierefreiheitsstärkungsgesetz): Informationen zu den Barrierefreiheitsanforderungen bei Produkten und Dienstleistungen.
Web Content Accessibility Guidelines (WCAG): Vorstellung der internationalen Richtlinien für die Zugänglichkeit von Webinhalten.
Hilfe/Support
Kontaktiere uns, falls du individuelle Wünsche,
Anforderungen oder Fragen zum Thema Barrierefreiheit hast.