← Alle SOPs · Phase 3 · Inhalte barrierefrei machen

SOP 15

E-Mails

ProjektleitungGeschäftsführungITRecht

Was du hier machst	Du lernst, wie du alle Arten von E-Mails (Newsletter, Systemmails, Bestätigungen etc.) barrierefrei, verständlich und technisch korrekt gestaltest.
Voraussetzung	Du versendest regelmäßig E-Mails, arbeitest im Content, Design oder bist verantwortlich für E-Mail-Tools und willst digitale Kommunikation zugänglich machen.
Dauer / Aufwand	Variiert je nach Anzahl der E-Mails; initial 1–3 Stunden pro E-Mail-Typ für Anpassung und Tests.
Gesetzlich verpflichtend	✅ Ja – Barrierefreiheit gilt auch für digitale Kommunikation gemäß EAA, BFSG und WCAG.
Nächster Schritt	SOP 16: Rechtstexte barrierefrei gestalten

0 von 6 Schritten erledigt0 %

Warum machst du das überhaupt?

E-Mails sind der direkte Draht zu deinen Kund:innen, doch viele Newsletter und Transaktionsmails sind visuell überladen, nicht für mobile Geräte optimiert oder unverständlich formuliert.

Barrierefreiheit bedeutet hier, dass alle deine Nachricht lesen, verstehen und darauf reagieren können – egal mit welchem Endgerät oder welcher Einschränkung.

Am Ende hast du einen klaren Prozess etabliert, der sicherstellt, dass alle deine E-Mails klar strukturiert, technisch zugänglich und für alle Nutzer:innen verständlich sind – vom Newsletter bis zur Bestellbestätigung. So schaffst du Vertrauen, erhöhst die Interaktionsraten und erfüllst die gesetzlichen Anforderungen.

In deinem Text-Dokument mit einem Titel wie „“Dokumentation des Barrierefreiheit-Feedback-System“ .

Wenn du mit dieser SOP fertig bist, legst du dieses Dokument an und trägst die Ergebnisse dieser SOP dort ein.

Variiert je nach Anzahl der E-Mails; initial 1–3 Stunden pro E-Mail-Typ für Anpassung und Tests.

Content: Schreibt klare, einfache Texte.

Design: Gestaltet gut lesbare und kontraststarke Layouts.

Tool-Verantwortliche (z. B. Mailchimp, CleverReach): Übernehmen die technische Umsetzung und die Tests.

Wann musst du das machen?

Wenn du E-Mails versendest, z.B.:

Newsletter

Bestellbestätigungen

Double-Opt-In-Mails

Systemmails (Passwort zurücksetzen, Konto erstellt)

Follow-ups und Reminder

Support- oder Rückmeldungen

Welches Gesetz verlangt das?

EAA / BFSG: E-Mail-Kommunikation zählt zur digitalen Kundeninteraktion.

DSGVO Art. 5 & 7: Fordern Verständlichkeit und Transparenz bei Einwilligungen.

WCAG 2.1: Diverse Kriterien sind relevant, z. B. 1.4.3 (Kontrast), 1.3.1 (Info und Beziehungen) und 3.1.5 (Leseverständlichkeit).

Der Prozess im Detail

Schritt für Schritt – zum Aufklappen und Abhaken.

1Schreibe immer verständlich und strukturiert›

Die Basis jeder guten E-Mail ist ein klarer und einfach verständlicher Text – du erinnerst dich sicherlich an SOP 12 zur einfachen Sprache. Schreibe also auf B1-Niveau (Ca. 14 bis 16-Jährige MuttersprachlerInnen) , um möglichst viele Menschen zu erreichen.

Das bedeutet konkret:

Eindeutige Betreffzeilen: Formuliere den Betreff so, dass der Nutzen klar wird (Besser: „Tipps für mehr Barrierefreiheit – Juni-Ausgabe“ statt „Newsletter #26 vom 12.06.“).

Klare Handlungsaufforderungen: Verwende aktive und beschreibende Texte (Besser: „Jetzt Termin buchen“ statt „Hier klicken“).

Einfache Sprache: Formuliere Sätze, die den konkreten Nutzen in den Fokus stellen und vermeide technisches Kauderwelsch.

2Verbessere die Lesbarkeit deiner Texte mit Absätzen und Listen›

Lange Textblöcke sind schwer zu lesen. Lockere sie gezielt auf, indem du folgende Techniken nutzt:

Kurze Absätze: Trenne Gedanken klar und halte Absätze kurz, idealerweise nicht länger als vier Zeilen.

Verwende echte Listen: Nutze für Aufzählungen immer die korrekten HTML-Listen-Elemente, also <ul> für unsortierte Bullet Points und <ol> für nummerierte Listen. Erstelle bitte keine Pseudolisten mit Bindestrichen oder Sternchen.

Tabellen nur für Daten: Verwende Tabellen ausschließlich zur Darstellung von tabellarischen Daten – niemals zur Gestaltung des Layouts.

3Optimiere dein Layout und deine visuelle Gestaltung›

Eine gute visuelle Gestaltung unterstützt die Lesbarkeit, darf aber nie das einzige Mittel zur Informationsvermittlung sein. Beachte dabei hauptsächlich folgende Regeln:

Schriftgröße: Wähle mindestens 16px, besser 18px.

Kontraste: Das Kontrastverhältnis zwischen Text und Hintergrund muss mindestens 4,5:1 betragen (mehr zu dem Thema in SOP 25).

Abstände: Setze einen Zeilenabstand von mindestens 1,5 ein.

Farbe: Vermittle Informationen niemals nur über Farbe (z. B. grün = gut).

Bilder: Verlasse dich nie darauf, dass Bilder angezeigt werden. Sie benötigen immer einen Alternativtext und dürfen nie der alleinige Informationsträger sein (Wir haben darüber schon in SOP 14 gesprochen).

Vermeide rein bildbasierte E-Mails und extrem breite Templates (über 600px).

4Sorge für eine saubere HTML-Struktur›

Die technische Struktur ist entscheidend für Screenreader. Nutze keine <div>-Wüsten ohne semantische Bedeutung.

Überschriften (<h1>, <h2>): Gliedere längere E-Mails mit Überschriften, z. B. „Willkommen“ oder „Das erwartet dich“ .

Absätze: Stelle sicher, dass Absätze nicht nur visuell, sondern auch im Code als solche erkennbar sind.

Links (<a>): Formuliere Linktexte so, dass sie auch ohne Kontext verständlich sind. Hier ein paar Beispiele:

Nicht gut: „Hier klicken“ „Mehr erfahren“ „Zum Angebot“

Gut: „Barrierefreiheitstipps für E-Mails lesen“ „Unsere aktuellen Sommerangebote ansehen“ „Jetzt zum Newsletter anmelden“

Tabellen: Verwende Tabellen nur, wenn es semantisch sinnvoll ist, z. B. für eine Bestellübersicht. Am Besten gar nicht, wenn du es vermeiden kannst. Wenn du es aber doch machen musst, dann erfährst du in SOP 16 wie du das machst .

5Gestalte deine Interaktion und Call-to-Action barrierefrei›

Stelle sicher, dass Nutzer:innen auch handeln können. Das machst du indem du Folgendes berücksichtigst:

CTA-Buttons: Benenne Buttons klar und kontextbezogen, z. B. „Jetzt kaufen: Unser Produkt 1“ .

Linktexte: Der Text muss auch für sich allein stehend verständlich sein. Sei also möglichst spezifisch.

Alternativen: Biete einen Fallback-Text an, falls Buttons oder Bilder nicht geladen werden.

Verwende semantisch richtige HTML-Elemente ( <a> für Links, <button> für Buttons).

Verzichte möglichst auf komplexe Scripts (die in E-Mail-Clients eh meist nicht unterstützt werden).

Achte darauf, dass keine interaktiven Elemente „versteckt“ oder überlagert sind, so dass sie für die Tastatur unsichtbar sind.

6Teste deine E-Mail umfassend mit den richtigen Tools›

Und dann heißt es wie immer: Überprüfe das Ergebnis vor dem Versand auf verschiedenen Plattformen und mit verschiedenen Methoden. Konkret prüfst du wie folgt:

Responsivität: Prüfe die Darstellung in gängigen Mail-Clients wie iOS Mail, Gmail und Outlook.

Screenreader-Check: Höre dir die E-Mail mit NVDA oder VoiceOver an.

Lesbarkeit & Kontraste: Nutze Tools wie WAVE , axe Accessibility Linter oder das Figma-Plugin Stark .

Alt-Texte: Deaktiviere die Bildanzeige und prüfe, ob alle Informationen noch verständlich sind.

Dunkler Modus: Öffne die E-Mail im Dark Mode, um Darstellungsfehler zu finden.

Ergebnis

Am Ende dieser SOP hast du:

E-Mails, die auch auf kleinen Bildschirmen und mit Hilfsmitteln verständlich sind.

Klare, strukturierte Inhalte mit guten Kontrasten, hoher Lesbarkeit und einem klaren Fokus.

Weniger Barrieren – was zu mehr Vertrauen und höheren Interaktionsraten führt.

Eine DSGVO- und EAA-konforme E-Mail-Kommunikation.

Copy-Paste-Baustein

Template für barrierefreie E-Mails

Dieses Template ist eine Checkliste und ein Gerüst zugleich. Es hilft dir, die E-Mails, die du verschickst, von Grund auf barrierefrei zu gestalten.Fülle die Platzhalter aus und arbeite die Kommentare ab, dann bist du auf einem guten Weg zu einer barrierefreien E-Mail!

Template

<!DOCTYPE html>

<head>

<title>[Eindeutige Betreffzeile hier einfügen, z.B. ‚Deine monatlichen Barrierefreiheitstipps‘]</title>

<style>

/* Schritt 3: Optimiere dein Layout und deine visuelle Gestaltung */

body {

font-family: Arial, sans-serif; /* Wähle eine gut lesbare Schriftart */

font-size: 18px; /* Schriftgröße mindestens 16px, besser 18px */

line-height: 1.5; /* Zeilenabstand mindestens 1.5 */

color: #333333; /* Dunkler Text für guten Kontrast zu hellem Hintergrund */

background-color: #ffffff; /* Heller Hintergrund */

margin: 0 auto;

padding: 20px;

max-width: 600px; /* Vermeide extrem breite Templates */

}

h1, h2 {

color: #1a1a1a; /* Guter Kontrast für Überschriften */

margin-top: 1.5em;

margin-bottom: 0.5em;

}

a {

color: #007bff; /* Gute Kontrastfarbe für Links */

text-decoration: underline; /* Links immer unterstreichen */

}

img {

max-width: 100%;

height: auto;

display: block; /* Bild als Blockelement für bessere Darstellung */

margin-bottom: 15px;

}

ul, ol {

margin-bottom: 15px;

}

li {

margin-bottom: 5px;

}

/* Stelle sicher, dass der Kontrast zwischen Text und Hintergrund mindestens 4.5:1 beträgt.

Du kannst Tools wie https://webaim.org/resources/contrastchecker/ nutzen, um das zu prüfen. */

</style>

</head>

<body>

<h1>[Hauptüberschrift der E-Mail, z.B. ‚Willkommen zu den Barrierefreiheits-News!‘]</h1>

<p>Hallo du,</p>

<p>[Hier kommt dein erster Absatz. Halte ihn kurz, idealerweise nicht länger als vier Zeilen. Fokus auf den konkreten Nutzen und einfache Sprache. B1-Niveau denken!]</p>

<h2>[Unterüberschrift, z.B. ‚Unsere Top-Tipps für diesen Monat‘]</h2>

<p>[Ein weiterer kurzer Absatz, der das Thema der nachfolgenden Liste einführt.]</p>

<ul>

<li>[Erster Punkt deiner Liste. Formuliere klar und prägnant.]</li>

<li>[Zweiter Punkt. Nutze Bullet Points für unsortierte Aufzählungen.]</li>

<li>[Dritter Punkt. Jeder Punkt sollte eine eigene Information enthalten.]</li>

</ul>

<h2>[Nächste Unterüberschrift, z.B. ‚Wichtige Informationen‘]</h2>

<p>[Ein Absatz mit weiteren Informationen. Denk daran, keine langen Textblöcke zu verwenden.]</p>

<p>Hier ist ein Beispiel für einen Link mit **verständlichem Linktext**:</p>

<p><a href=“[Link-URL hier einfügen]“>Barrierefreiheitstipps für E-Mails lesen</a></p>

<p>Vergiss nicht: Bilder dürfen nie der alleinige Informationsträger sein!</p>

<p>Möchtest du mehr erfahren?</p>

<p>

[Klarer CTA-Text, z.B. ‚Jetzt anmelden: Kostenloses Webinar‘]

</a>

<br>

<span style=“font-size: 14px;“>(Sollte der Button nicht sichtbar sein, klicke hier: <a href=“https://zielsounds.com/go/help“>Jetzt anmelden: Kostenloses Webinar</a>)</span>

</p>

<p>Vielen Dank für dein Interesse!</p>

<p>Mit freundlichen Grüßen,</p>

</body>

</html>

Fragen & Antworten

Muss ich wirklich jede E-Mail nach diesen Regeln gestalten, auch wenn sie nur an ein paar Kollegen gehen?

Ja, du solltest dich bemühen, alle E-Mails barrierefrei zu gestalten. Auch wenn du denkst, dass nur ein paar Kollegen sie lesen, weißt du nie, wer vielleicht eine Seheinschränkung hat oder einen Screenreader nutzt. Es ist eine gute Gewohnheit und sorgt dafür, dass deine Nachrichten immer von jedem verstanden werden können. Außerdem trainierst du so deine Fähigkeiten und es wird dir mit der Zeit leichter fallen.

Was ist der Unterschied zwischen einem „Alternativtext und einem „Fallback-Text?

Ein Alternativtext (oft auch Alt-Text genannt) ist eine kurze Beschreibung eines Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann oder von einem Screenreader vorgelesen wird.

Er ist ein Ersatz für das Bild.

Ein Fallback-Text ist ein Text, der als Alternative zu einem interaktiven Element (wie einem Button) oder einem komplexeren Layout angezeigt wird, wenn dieses nicht richtig dargestellt werden kann.

Er stellt sicher, dass die Information oder die Handlungsaufforderung auch ohne das ursprüngliche Element vermittelt wird. Stell dir vor, der Button „Jetzt kaufen“ wird nicht angezeigt. Dann wäre ein Fallback-Text wie „Klicken Sie hier, um unser Produkt zu kaufen“ sinnvoll.

Ich habe gehört, dass manche E-Mail-Clients HTML gar nicht unterstützen. Was mache ich dann?

Das stimmt, einige sehr alte oder spezielle E-Mail-Clients unterstützen HTML nicht oder nur sehr eingeschränkt. Für diese Fälle gibt es die Möglichkeit, eine reine Textversion der E-Mail (Plain-Text-Version) mitzuschicken. Die meisten modernen E-Mail-Marketing-Tools bieten diese Funktion automatisch an. So wird sichergestellt, dass jeder Empfänger, egal mit welchem Client, deine Nachricht lesen kann.

Kann ich Emojis verwenden? Sind die barrierefrei?

Emojis können in Maßen verwendet werden, um Texte aufzulockern. Aber sei vorsichtig! Nicht alle Emojis werden von Screenreadern gleich gut vorgelesen, und manche können verwirrend sein, wenn sie nicht im Kontext stehen. Verwende sie sparsam und nicht als alleinigen Informationsträger. Vermittle die Hauptbotschaft immer auch im Text.

Was ist, wenn ich einen Link habe, der sehr lang ist und nicht gut in einen beschreibenden Text passt?

In den meisten Fällen solltest du versuchen, den Linktext beschreibend zu formulieren, wie in Schritt 4 beschrieben. Wenn der Link wirklich extrem lang oder komplex ist und der beschreibende Text zu unübersichtlich werden würde, kannst du eine Kurz-URL verwenden oder den Link in einem Satz einbetten, der den Kontext klar macht. Wichtig ist immer, dass der Nutzer versteht, wohin der Link führt, ohne den gesamten Link lesen zu müssen.

Ich nutze ein Template für meine E-Mails. Muss ich die Barrierefreiheitsregeln dann trotzdem noch beachten?

Ja, unbedingt! Auch wenn ein Template eine gute Basis ist, kann es Fehler enthalten oder nicht alle Aspekte der Barrierefreiheit berücksichtigen. Es ist deine Aufgabe, sicherzustellen, dass der Inhalt, den du in das Template einfügst, und alle Anpassungen, die du vornimmst, den Barrierefreiheitsregeln entsprechen. Besonders wichtig ist das bei Bildern, Linktexten und den Kontrasten.

← SOP 14 Übersicht SOP 16 →