Barrierefreie E-Mails erstellen

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 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
Webfonts: Lato, Montserrat, Ubuntu

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:
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

  1. Verwende HTML-Headlines: Diese sind notwendig, um Inhalte mit Hilfe assistiver Technologien schnell anzusteuern zu können.
  2. Verwende je Newsletter nur eine H1-Headline
  3. Ü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.
  4. 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.
  1. Der Alternativtext sollte den Inhalt des Bildes wiederspiegeln.
  2. Halte den Text kurz und klar.
  3. Manche Screenreader schneiden den Inhalt nach 100-120 Zeichen ab. Platziere die wichtigsten Informationen deshalb am Anfang.
  4. Vermeide Wiederholungen: Es sollte kein Text verwendet werden, der so schon an anderer Stelle vorkommt.
  5. 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.



  1. Gib den Inhalt der Bildgruppe an einem der Einzelbilder an.

  2. Bei verlinkten Bildgruppen sollte der Bildinhalt und Linkziel an jedem der Einzelbilder beschrieben werden.





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
Info
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.
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.