🧾 SOP 15: Barrierefreie E-Mail-Kommunikation

Wie deine E-Mails verständlich werden – und dabei rechtlich sicher bleiben

📄 SOP als PDF downloaden ⚡ Quick Card downloaden 📚 Zum Inhaltsverzeichnis

Wer sollte diese SOP lesen?

📊 Projektleitung | 👔 Geschäftsführung | 🖥️ IT | 🧑‍⚖️ Recht

Überblick zu SOP 15

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

👉 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

🧭 Der Prozess im Detail

0 von 6 Schritten erledigt0 %

🟥 Schritt 1: Schreibe 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.

🟧 Schritt 2: Verbessere 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

🟨Schritt 3: Optimiere 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).

🟩 Schritt 4: Sorge für eine saubere HTML-Struktur

Die technische Struktur ist entscheidend für Screenreader. Nutze keine

-Wüsten ohne semantische Bedeutung.

Überschriften (
,
): 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 (): 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 .

🟦 Schritt 5: Gestalte 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 ( für Links,

🟪 Schritt 6: Teste 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

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

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

Hallo du,

[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!]

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

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

[Erster Punkt deiner Liste. Formuliere klar und prägnant.]
[Zweiter Punkt. Nutze Bullet Points für unsortierte Aufzählungen.]
[Dritter Punkt. Jeder Punkt sollte eine eigene Information enthalten.]

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

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

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

Barrierefreiheitstipps für E-Mails lesen

Vergiss nicht: Bilder dürfen nie der alleinige Informationsträger sein!

Möchtest du mehr erfahren?

[Klarer CTA-Text, z.B. ‚Jetzt anmelden: Kostenloses Webinar‘]
(Sollte der Button nicht sichtbar sein, klicke hier: Jetzt anmelden: Kostenloses Webinar)

Vielen Dank für dein Interesse!

Mit freundlichen Grüßen,

[Dein Name/Team]

Fragen und Antworten (FAQ ) zu dieser SOP

Zu SOP 16 → 📚 Zurück zum Inhaltsverzeichnis

Fragen und Antworten (FAQ) zu dieser SOP

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.