Das Support-Ticket war zunächst rätselhaft. "Ich kann Ihre E-Mails nicht nutzen." Der Nutzer erklärte, er sei blind und verwende einen Screenreader. Die wunderschön gestalteten E-Mails des Unternehmens waren eine Wand aus "Bild Bild Bild Link Link Link" – kein Alt-Text, keine semantische Struktur, keine Möglichkeit, den Inhalt zu verstehen.
Barrierefreiheit in E-Mails ist nicht optional. Neben dem ethischen Anspruch, alle einzubeziehen, gibt es in vielen Ländern rechtliche Anforderungen. Und ganz praktisch sind barrierefreie E-Mails bessere E-Mails – klare Struktur, bessere mobile Nutzung und zuverlässigere Darstellung.
Diese Checkliste deckt die technischen und gestalterischen Aspekte ab, die E-Mails für alle nutzbar machen.
Bilder und Medien
Alle Bilder haben Alt-Text. Jeder <img>-Tag benötigt ein alt-Attribut. Beschreiben Sie, was das Bild zeigt, nicht nur, dass es ein Bild ist. "Produktfoto von blauen Laufschuhen" ist hilfreich. "Bild" ist es nicht.
Dekorative Bilder haben leeren Alt-Text. Bilder, die keine Informationen vermitteln (Spacer, dekorative Rahmen), sollten alt="" haben, damit Screenreader sie überspringen. Lassen Sie das alt-Attribut nicht komplett weg – sonst lesen Screenreader den Dateinamen vor.
Alt-Text ist knapp, aber vollständig. Zielen Sie auf unter 125 Zeichen. Beschreiben Sie die wesentlichen Informationen. Für komplexe Bilder wie Diagramme geben Sie eine Textzusammenfassung in der Nähe an.
Bilder sind nicht die einzige Informationsquelle. Wenn ein Bild Text enthält, sollte dieser Text auch als echter Text im E-Mail-Inhalt erscheinen. Wenn ein Diagramm Daten zeigt, fassen Sie die wichtigsten Erkenntnisse in Text zusammen.
Animierte GIFs werden sparsam eingesetzt. Flackernde oder schnell wechselnde Inhalte können Anfälle auslösen. Wenn Sie Animation verwenden, stellen Sie sicher, dass sie nicht öfter als dreimal pro Sekunde flackert. Bieten Sie nach Möglichkeit eine Möglichkeit, die Animation zu pausieren.
Text und Typografie
Schriftgröße ist gut lesbar. Mindestens 14px für Fließtext, idealerweise 16px. Kleinere Schrift ist für viele Nutzer schwierig, nicht nur für Menschen mit Sehbeeinträchtigungen.
Zeilenhöhe ist ausreichend. Mindestens das 1,5-fache der Schriftgröße. Gedrängter Text ist für alle schwer zu lesen und besonders schwierig für Menschen mit Dyslexie oder kognitiven Beeinträchtigungen.
Farbkontrast erfüllt WCAG-Standards. Text sollte ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben (3:1 für große Schrift). Nutzen Sie ein Kontrast-Checker-Tool zur Überprüfung.
Farbe ist nicht das einzige Unterscheidungsmerkmal. Verlassen Sie sich nicht allein auf Farbe, um Bedeutung zu vermitteln. "Felder in Rot sind erforderlich" funktioniert für farbenblinde Nutzer nicht. Verwenden Sie zusätzlich Symbole, Textlabels oder Muster.
Text kann vergrößert werden. Verwenden Sie nach Möglichkeit relative Einheiten (em, rem, %) statt fester Pixelwerte. Nutzer, die größere Schrift benötigen, sollten sie einstellen können.
Struktur und Semantik
Überschriften schaffen eine logische Hierarchie. Nutzen Sie Überschriften-Tags (h1, h2, h3), um Inhalte zu strukturieren. Überspringen Sie keine Ebenen. Screenreader-Nutzende navigieren über Überschriften – eine saubere Hierarchie macht das möglich.
Tabellen werden für Daten, nicht für Layout genutzt. Layouttabellen verwirren Screenreader. Verwenden Sie Tabellen nur für echte tabellarische Daten. Für das Layout nutzen Sie andere Techniken (auch wenn die HTML-Beschränkungen in E-Mails dies erschweren).
Datentabellen haben Kopfzeilen. Verwenden Sie <th> für Kopfzellen mit scope="col" oder scope="row". Das teilt Screenreadern mit, wie Datenzellen ihren Überschriften zugeordnet werden.
Lesereihenfolge ist logisch. Screenreader folgen der DOM-Reihenfolge, nicht der visuellen Anordnung. Stellen Sie sicher, dass die HTML-Reihenfolge linear Sinn ergibt, auch wenn CSS Elemente visuell umordnet.
Sprache ist angegeben. Fügen Sie lang="en" (oder den passenden Sprachcode) auf dem HTML-Element ein. Das hilft Screenreadern bei korrekter Aussprache.
Links und Buttons
Linktexte sind aussagekräftig. "Hier klicken" und "Mehr lesen" sind aus dem Kontext gerissen bedeutungslos. Screenreader-Nutzende navigieren oft über Links – "Lesen Sie unsere Datenschutzerklärung" sagt ihnen, wohin der Link führt.
Links sind visuell erkennbar. Unterstreichungen sind der verlässlichste Hinweis. Farbe allein reicht für farbenblinde Nutzende nicht aus.
Touch-Ziele sind groß genug. Mindestens 44x44 Pixel für antippbare Elemente. Kleine Links sind für Menschen mit motorischen Einschränkungen schwierig und für alle auf Mobilgeräten frustrierend.
Links haben Fokuszustände. Tastaturnutzende müssen sehen, welches Element den Fokus hat. Stellen Sie sicher, dass Fokusstile sichtbar und deutlich unterscheidbar sind.
Formulare (falls zutreffend)
Formularfelder haben Labels. Jedes Eingabefeld benötigt eine zugehörige Beschriftung. Verwenden Sie <label for="fieldid"> oder umschließen Sie das Eingabefeld mit dem Label-Element.
Fehlermeldungen sind klar. Erklären Sie, was schiefgelaufen ist und wie es zu beheben ist. Markieren Sie ein Feld nicht nur rot – geben Sie eine Text-Erklärung.
Pflichtfelder sind gekennzeichnet. Markieren Sie Pflichtfelder eindeutig, mit Text ("erforderlich") und nicht nur mit Sternchen oder Farbe.
Barrierefreiheit testen
Mit einem Screenreader testen. NVDA (Windows, kostenlos), VoiceOver (Mac/iOS, integriert) und TalkBack (Android, integriert) sind die wichtigsten Optionen. Hören Sie, wie Ihre E-Mail klingt, nicht nur, wie sie aussieht.
Tastaturnavigation testen. Können Sie alle interaktiven Elemente mit Tab erreichen? Ist die Fokusreihenfolge logisch? Können Sie Links und Buttons mit Enter aktivieren?
Mit deaktivierten Bildern testen. Viele E-Mail-Clients blockieren Bilder standardmäßig. Ist Ihre E-Mail ohne Bilder verständlich?
Bei unterschiedlichen Zoomstufen testen. Zoomen Sie im Browser auf 200 %. Funktioniert das Layout noch? Ist der Text weiterhin lesbar?
Automatisierte Tools verwenden. WAVE, axe und ähnliche Tools finden häufige Probleme. Sie finden nicht alles – manuelles Testen ist weiterhin nötig –, aber sie sind ein guter Startpunkt.
E-Mail-spezifische Aspekte
Preheader-Text ist aussagekräftig. Screenreader können Preheader-Text ankündigen. Machen Sie ihn nützlich, nicht nur "Im Browser ansehen" oder Leerzeichen.
Die Nur-Text-Version ist vollständig. Manche Nutzende bevorzugen oder benötigen Nur-Text. Stellen Sie sicher, dass die Nur-Text-Version alle Informationen der HTML-Version enthält.
Abmeldung ist leicht zu finden. Verstecken Sie sie nicht in winziger Schrift. Nutzende, die sich abmelden möchten, sollten die Option leicht finden.
Häufige Fehler
Text als Bild verwenden. Text in Bildern kann nicht vergrößert werden, fließt nicht um und ist für Screenreader nicht lesbar. Verwenden Sie nach Möglichkeit echten Text.
Blocksatz. Vollständiger Blocksatz erzeugt ungleichmäßige Abstände, die für Menschen mit Dyslexie schwer sind. Verwenden Sie linksbündigen Text.
"Designentscheidungen" mit geringem Kontrast. Hellgrauer Text auf weißem Hintergrund mag elegant aussehen, erfüllt aber die Anforderungen an Barrierefreiheit nicht. Priorisieren Sie Lesbarkeit gegenüber Ästhetik.
Fehlende Sprunglinks. Für lange E-Mails hilft ein Link "Zum Hauptinhalt springen" Tastaturnutzenden, wiederkehrende Navigation zu überspringen.
Frequently asked questions
Gelten Anforderungen an Barrierefreiheit für alle E-Mails?
Rechtliche Anforderungen variieren je nach Rechtsraum und Kontext. Aber Barrierefreiheit nützt allen—klarere Struktur, bessere mobile Erfahrung, zuverlässigere Darstellung. Es gibt keinen Nachteil, E-Mails barrierefrei zu machen.
Wie teste ich E-Mails mit einem Screenreader?
Senden Sie die E-Mail an sich selbst, öffnen Sie sie in einem E-Mail-Client und verwenden Sie einen Screenreader (VoiceOver auf dem Mac, NVDA unter Windows). Hören Sie die gesamte E-Mail. Notieren Sie, wo Informationen fehlen, verwirrend sind oder in der falschen Reihenfolge stehen.
Wie hoch ist das minimale Kontrastverhältnis für Text?
WCAG AA fordert 4,5:1 für normalen Text und 3:1 für große Schrift (18px+ oder 14px+ fett). WCAG AAA fordert entsprechend 7:1 bzw. 4,5:1. Verwenden Sie Tools wie den Kontrast-Checker von WebAIM zur Überprüfung.
Kann ich CSS für Barrierefreiheitsfunktionen in E-Mails verwenden?
Die CSS-Unterstützung in E-Mails ist begrenzt und uneinheitlich. Verlassen Sie sich auf HTML-Attribute (alt, lang, scope) statt auf reine CSS-Lösungen. Testen Sie über verschiedene Clients hinweg, um sicherzustellen, dass die Barrierefreiheitsfunktionen funktionieren.