HTML-E-Mail-Barrierefreiheit: Ein Entwicklerhandbuch
Erstellen Sie E-Mails, die für alle funktionieren, einschließlich Nutzer mit Behinderungen.
Etwa 15 % der Weltbevölkerung leben mit einer Form von Behinderung. Viele nutzen Hilfstechnologien wie Screenreader, um E-Mails zu lesen. Barrierefreies E-Mail-Design ist sowohl ethisch als auch praktisch, da es oft das Erlebnis für alle verbessert.
E-Mail-Barrierefreiheit stellt einzigartige Herausforderungen dar. Die tabellenbasierten Layouts, die für die Kompatibilität über Clients hinweg notwendig sind, können Screenreader verwirren. Dieses Handbuch behandelt Techniken, die E-Mails für alle Nutzer funktionieren lassen.
Semantische Struktur
Role-Attribute verwenden
Für Layouts verwendete Tabellen sollten mit role="presentation" markiert werden, um Screenreadern mitzuteilen, dass es sich nicht um Datentabellen handelt:
<table role="presentation" width="100%">
<tr>
<td>
Layout content here
</td>
</tr>
</table>Ohne dieses Attribut kündigen Screenreader Tabellennavigation an ("row 1, column 1"), was für Layout-Tabellen verwirrend ist.
Richtige Überschriftshierarchie
Überschriftselemente (h1, h2, h3) in logischer Reihenfolge verwenden:
<h1 style="font-size: 24px; margin: 0;">Welcome to Our Service</h1>
<p>Introduction paragraph...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">What's New</h2>
<p>Feature description...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">Getting Started</h2>
<p>Instructions...</p>Screenreader-Nutzer navigieren über Überschriften. Eine richtige Hierarchie hilft ihnen, die Dokumentstruktur zu verstehen und zu relevanten Abschnitten zu springen.
Semantische Elemente verwenden
Wo unterstützt, semantisches HTML verwenden:
- <p> für Absätze
- <ul>/<ol> für Listen
- <strong> für wichtigen Text
- <em> für Betonung
Bilder und Alt-Text
Bedeutungsvoller Alt-Text
Jedes Bild benötigt passenden Alt-Text:
<!-- Informative image: describe the content -->
<img src="product.jpg" alt="Blue running shoes with white soles" />
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="" />
<!-- Image with text: include the text -->
<img src="sale-banner.jpg" alt="50% off all items this weekend" />Richtlinien:
- Beschreiben Sie, was das Bild zeigt, nicht dass es ein Bild ist
- Alt-Text knapp halten (unter 125 Zeichen)
- Für dekorative Bilder alt="" verwenden (leer, nicht weglassen)
- Wenn ein Bild Text enthält, diesen im Alt-Text angeben
Nicht nur auf Bilder setzen
Einige Nutzer haben Bilder deaktiviert. Wichtige Informationen sollten als Text vorliegen, nicht nur als Bilder. Bei Bild-Buttons eine Text-Link-Fallback einfügen.
Farbe und Kontrast
Ausreichende Kontrastverhältnisse
WCAG 2.1 fordert minimale Kontrastverhältnisse:
- Normaler Text: Kontrastverhältnis 4,5:1
- Großer Text (18px+ oder 14px+ fett): Verhältnis 3:1
<!-- Good contrast -->
<p style="color: #333333; background-color: #ffffff;">
High contrast text
</p>
<!-- Poor contrast (avoid) -->
<p style="color: #999999; background-color: #ffffff;">
Low contrast text
</p>Kontrastprüfwerkzeuge wie den WebAIM-Kontrastprüfer verwenden, um zu überprüfen.
Farbe nicht allein verwenden
Farbe sollte nicht die einzige Möglichkeit sein, Informationen zu vermitteln:
<!-- Bad: color only -->
<span style="color: red;">Error</span>
<!-- Good: color plus icon/text -->
<span style="color: red;">⚠ Error: Invalid email address</span>Links und Buttons
Beschreibender Linktext
Linktext sollte das Ziel beschreiben:
<!-- Bad -->
<a href="...">Click here</a>
<!-- Good -->
<a href="...">View your order details</a>
<!-- Good -->
<a href="...">Download the 2026 report (PDF, 2MB)</a>Screenreader-Nutzer navigieren oft über Links. „Click here“ mehrmals wiederholt ist nutzlos. Beschreibender Text hilft Nutzern zu verstehen, wohin jeder Link führt.
Fokus-Indikatoren
Links und Buttons sollten sichtbare Fokus-Zustände für Tastaturnutzer haben. Obwohl E-Mail-Clients das inkonsistent handhaben, können Sie versuchen:
<a href="..." style="outline: 2px solid #007bff;">
Link text
</a>Sprache und Lesbarkeit
Sprache deklarieren
Die Dokumentensprache angeben:
<html lang="en">Screenreader verwenden dies, um die richtige Aussprache auszuwählen. Für Inhalte in anderen Sprachen das lang-Attribut auf spezifischen Elementen verwenden:
<p>The French word <span lang="fr">bonjour</span> means hello.</p>Lesbare Schriftgrößen
Mindestens 14px für Fließtext, vorzugsweise 16px. Zeilenhöhe von 1,4–1,6 verbessert die Lesbarkeit:
<p style="font-size: 16px; line-height: 1.5;">
Body text that is easy to read
</p>Barrierefreiheit testen
Screenreader-Tests
Bei Möglichkeit mit echten Screenreadern testen:
- VoiceOver (macOS/iOS): Eingebaut, aktivieren mit Cmd+F5
- NVDA (Windows): Kostenlos, weit verbreitet
- JAWS (Windows): Industriestandard, kostenpflichtig
Hören Sie zu, wie Ihre E-Mail angekündigt wird. Ist die Struktur klar? Werden Bilder beschrieben? Sind Links sinnvoll?
Automatisierte Tests
Tools wie Litmus und Email on Acid enthalten Barrierefreiheitsprüfer. Sie erkennen häufige Probleme wie fehlenden Alt-Text und Kontrastprobleme.
E-Mail-Builder und Barrierefreiheit
Gute E-Mail-Builder handhaben einige Barrierefreiheitsaspekte automatisch. Sequenzy und ähnliche Plattformen fügen role="presentation" zu Layout-Tabellen hinzu, fordern Alt-Text für Bilder ab und generieren semantisches HTML.
Frameworks wie MJML erzeugen barrierefreien Output standardmäßig. Die Komponenten sind unter Berücksichtigung von Screenreadern gestaltet.
Barrierefreiheits-Checkliste
Vor dem Versand:
- Alle Layout-Tabellen haben role="presentation"
- Alle bedeutungsvollen Bilder haben beschreibenden Alt-Text
- Dekorative Bilder haben leeren alt=""
- Überschriften sind in logischer Reihenfolge (h1, h2, h3)
- Farbkontrast erfüllt WCAG-Anforderungen
- Links haben beschreibenden Text
- Sprache ist deklariert
- Schriftgröße mindestens 14px
Das Wichtigste in Kürze
Barrierefreie E-Mails sind nicht schwierig, wenn man die Grundlagen versteht. Verwenden Sie semantische Struktur, stellen Sie Alt-Text bereit, sorgen Sie für Kontrast und schreiben Sie beschreibende Links. Diese Praktiken nützen allen Nutzern, nicht nur denen mit Behinderungen.
Wenn Sie einen E-Mail-Builder oder Framework verwenden, prüfen Sie, ob es Barrierefreiheits-Best Practices folgt. Gute Tools erleichtern Barrierefreiheit. Sequenzy und andere moderne Plattformen enthalten Barrierefreiheitsfunktionen standardmäßig.