Barrierefreiheit stand lange ganz unten auf der E-Mail-Checkliste, als die Sache, zu der du kamst, wenn noch Zeit blieb. Das ist vorbei. Seit dem 28. Juni 2025 gilt der European Accessibility Act, und dieselben Korrekturen an Alt-Text und Kontrast, die einem Menschen mit Screenreader helfen, entscheiden auch darüber, ob deine Nachricht mit abgeschalteten Bildern überlebt oder in einen Spamfilter läuft. Barrierefreiheit ist damit gleichzeitig eine Frage der Reichweite, des Rechts und der Zustellbarkeit.
Fang also mit dem an, was wir tatsächlich messen. Über alle E-Mails hinweg, die durch Unspam laufen, bestehen 84 % die Prüfungen zur Barrierefreiheit. Das klingt gesund, bis du siehst, wo sich die Fehler häufen: fehlende Sprachattribute, nicht ausgezeichnete Layout-Tabellen, zu wenig Kontrast und fehlender Alt-Text. Genau diese Lücke schließt dieser Guide. Er ist für beide Hälften des Raums geschrieben, für Marketer, die das Was und das Warum brauchen, und für Entwicklerinnen und Entwickler, die das Wie brauchen, mit echtem Code zum Kopieren, wo es darauf ankommt.
Was ist Barrierefreiheit in E-Mails?
Barrierefreiheit in E-Mails heißt, eine E-Mail so zu bauen, dass alle sie wahrnehmen, bedienen und verstehen können, auch Menschen, die einen Screenreader nutzen, per Tastatur navigieren, den Text vergrößern, im Dark Mode lesen oder eine Sehbehinderung oder Farbenblindheit haben. In der Praxis sind das die WCAG-2.2-Prinzipien (wahrnehmbar, bedienbar, verständlich, robust), angewandt auf die Grenzen des Posteingangs: echter Text statt eingebrannter Bilder, beschreibender Alt-Text, ausreichender Farbkontrast, semantische Struktur und eine deklarierte Sprache.
Anders als im Web arbeitet Barrierefreiheit in E-Mails um die Grenzen des Posteingangs herum: kein externes CSS, Layout auf Tabellenbasis und Clients, die Bilder standardmäßig blockieren. Die Prinzipien sind dieselben, die Taktik richtet sich aber danach, wo die Nachricht landet.
Best Practices für barrierefreie E-Mails im Überblick
Das sind die wichtigsten Praktiken, in der Reihenfolge, in der die meisten E-Mails sie falsch machen. Jede davon wird weiter unten mit Anleitung ausgeführt.
- Gib jedem informativen Bild einen beschreibenden
alt-Text und dekorativen Bildern ein leeresalt="" - Strukturiere die Nachricht mit echten Überschriften von
<h1>bis<h6>, nicht mit fett gestyltem Text - Ergänze
role="presentation"bei jeder Layout-Tabelle, damit Screenreader den Inhalt linear vorlesen - Halte den Farbkontrast ein: 4,5:1 für normalen Text, 3:1 für großen Text und UI-Elemente
- Gestalte für den Dark Mode und prüfe den Kontrast in beiden Modi
- Schreib Linktexte, die das Ziel beschreiben, niemals „hier klicken“
- Halte Tippflächen komfortabel und den Fließtext bei 14 bis 16px
- Deklariere die Sprache mit
<html lang="en">und verschick einen echten Plain-Text-Teil
Was wir über alle E-Mails hinweg sehen, die wir testen
Die meisten Guides zur Barrierefreiheit argumentieren mit Statistiken über das Publikum: wie viele Menschen eine Behinderung haben. Das ist real, und weiter unten kommt es vor, aber es ist kein Beleg für deine E-Mail. Die Zahlen in diesem Abschnitt sind dieser Beleg, denn sie stammen aus den E-Mails, die tatsächlich durch Unspam laufen.
- 84 % der E-Mails, die wir prüfen, bestehen die Prüfungen zur Barrierefreiheit. Das ist deutlich optimistischer als die Alles-oder-nichts-Zahl „99,88 % der E-Mails fallen durch“, die dir vielleicht schon begegnet ist, und es ist nützlicher: Ein abgestufter Wert zeigt dir, dass die meisten E-Mails den Weg schon fast geschafft haben und die verbleibende Lücke klein und schließbar ist.
- Fällt eine E-Mail durch, häufen sich die Treffer an wenigen vorhersehbaren Stellen: ein fehlendes
lang-Attribut, nicht ausgezeichnete Layout-Tabellen, zu wenig Kontrast und fehlender Alt-Text. - Unsere Prüfung zur Barrierefreiheit markiert gezielt Text, der für Menschen unsichtbar oder unlesbar ist, weil Text- und Hintergrundfarbe nicht zusammenpassen, also zu wenig Farbkontrast haben. Der ganze Zweck dieser Prüfung ist, dir einen Überblick zu geben, wo du stehst und was du beheben solltest.
Es hilft, diese 84 % neben dem Rest zu lesen, den wir messen. Die Content-Signale sind durchgängig das schwächste Glied: Nur 30 % der E-Mails bestehen unsere Prüfungen der HTML-Best-Practices, die niedrigste Bestehensquote von allem, was wir testen. Die Barrierefreiheit steht mit 84 % deutlich besser da als das HTML unter deiner E-Mail. Das sagt dir: Die Gewinne sind konkret und gezielt, kein Neubau.
Ein leeres alt-Attribut ist eine Entscheidung. Ein fehlendes ist ein Unfall, der deinen Dateinamen vorliest.
Warum Barrierefreiheit in E-Mails zählt
Das Publikum ist größer, als du denkst
Das Reichweiten-Argument ist einfach. In den USA gab 2022 mehr als jeder vierte Erwachsene eine Behinderung an, 28,7 % oder über 70 Millionen Menschen (CDC, aus der BRFSS-Erhebung 2022), davon 5,5 % ausdrücklich eine Sehbehinderung. Weltweit schätzt die Weltgesundheitsorganisation, dass mindestens 2,2 Milliarden Menschen eine Seheinschränkung in der Nähe oder in der Ferne haben. Farbenblindheit allein betrifft rund 1 von 12 Männern und etwa 1 von 200 Frauen nordeuropäischer Abstammung (Colour Blind Awareness). Und ein großer Teil der E-Mails wird mobil geöffnet, wo kleiner Text und winzige Tippflächen allen zu schaffen machen, nicht nur Menschen mit diagnostizierter Einschränkung.
Es müssen nicht alle diese Menschen blind sein, damit sich die Arbeit lohnt. Eine kontrastarme Überschrift ist auch für voll sehende Leser am Handy in der Sonne schwer zu lesen.
Die rechtliche Lage
Das Recht zur Barrierefreiheit ist inzwischen konkret genug, dass „wir wussten das nicht“ keine Verteidigung mehr ist. Für E-Mail-Absender zählen vor allem drei Regime, und in den Details sind sie sich nicht einig.
| Regime | Wen es erfasst | Standard | Seit wann |
|---|---|---|---|
| European Accessibility Act (Richtlinie (EU) 2019/882) | Unternehmen, auch außerhalb der EU, die erfasste Produkte und Dienstleistungen in die EU verkaufen, E-Commerce und elektronische Kommunikation eingeschlossen | EN 301 549, die WCAG einbezieht | Pflichten gelten seit dem 28. Juni 2025 |
| ADA Title III (USA) | Öffentlich zugängliche Einrichtungen in den USA, Gerichte behandeln Websites und Apps von Unternehmen als erfasst | Kein kodifizierter WCAG-Standard, WCAG 2.1 AA ist in Vergleichen der De-facto-Maßstab | ADA seit 1990, die Praxis im Web entwickelt sich weiter |
| ADA Title II (USA) | Websites und Apps von Bundesstaaten und Kommunen in den USA | WCAG 2.1 AA (DOJ-Regel von 2024) | Verlängerte Fristen: 26. April 2027 (ab 50.000 Einwohnern), 26. April 2028 (kleinere) |
| Section 508 (USA) | US-Bundesbehörden und ihre Dienstleister | WCAG 2.0 AA, eine Version hinter Title II | Pflicht seit dem 18. Januar 2018 |
Ein paar ehrliche Einschränkungen. Der European Accessibility Act nennt „E-Mail-Marketing“ nicht als eigene Kategorie. Seine Reichweite in die E-Mail hinein ist indirekt, aber real, am stärksten bei transaktionalen und Service-Nachrichten, die an einen erfassten E-Commerce- oder Bankdienst gekoppelt sind, und grauer bei rein werblicher Post, wo die Behandlung von der nationalen Umsetzung abhängt. ADA Title III kennt für private Unternehmen keine feste WCAG-Regel: WCAG 2.1 AA ist das, was Gerichte und Vergleiche heranziehen, kein Gesetz. Es gibt auch keine Zertifizierung, die eine E-Mail formal ADA-konform macht. Gemeint ist mit dem Ausdruck in der Praxis die Konformität mit WCAG 2.1 oder 2.2 AA. Und die US-Fristen für Behörden nach Title II wurden im April 2026 um ein Jahr verlängert, aktuell gelten also 2027 und 2028, nicht 2026 und 2027. Die sichere Lesart von all dem: Bau nach WCAG 2.2 AA, dann bestehst du überall dort, wo es einen Maßstab gibt.
Der wirtschaftliche Nutzen
Barrierefreiheit ist keine Wohltätigkeit, die dich nur etwas kostet. Sie überschneidet sich fast vollständig mit der Arbeit, die Rendering und Zustellbarkeit verbessert:
- Robust ohne Bilder. Viele Clients blockieren Bilder standardmäßig. Beschreibender Alt-Text wird zu deinem Ersatztext, sodass die Botschaft heil bleibt, egal ob der Leser blind ist oder einfach Bilder abgeschaltet hat.
- Spam-Score. Filter misstrauen reinen Bild-E-Mails. Echter, lebendiger Text verbessert das Verhältnis von Text zu Bild, was gleichzeitig Menschen mit Screenreader und deinem Inbox Placement hilft.
- Ein echter Plain-Text-Teil. Eine echte
multipart/alternative-Nachricht mit einem sauberentext/plain-Teil bedient reine Text-Clients und assistive Technik und verbessert das Inbox Placement. Eine Korrektur, zwei Gewinne. - Engagement. Ein lesbarer Schriftgrad und kräftiger Kontrast heben die Lesbarkeit für alle, und das hebt die Engagement-Signale, die Mailbox-Provider belohnen. Eine E-Mail-Heatmap zeigt dir, ob Leser deinen CTA wirklich erreichen, sobald der Text lesbar ist.
WCAG für E-Mails: welche Kriterien wirklich gelten
Die meisten Guides werfen mit WCAG A/AA/AAA um sich und gehen weiter. Hier ist die konkrete Zuordnung, Kriterium für Kriterium, und wie du jedes in einer E-Mail erfüllst.
| WCAG-2.2-Kriterium | Stufe | Was es in der E-Mail bedeutet | Wie du es erfüllst |
|---|---|---|---|
| 1.1.1 Nicht-Text-Inhalt | A | Bilder brauchen Textalternativen | Beschreibendes alt bei informativen Bildern, alt="" bei dekorativen |
| 1.3.1 Info und Beziehungen | A | Struktur muss programmatisch sein, nicht nur visuell | Echte Überschriften von <h1> bis <h6>, role="presentation" bei Layout-Tabellen |
| 1.4.3 Kontrast (Minimum) | AA | Text muss sich vom Hintergrund lesbar abheben | 4,5:1 bei normalem Text, 3:1 bei großem Text |
| 1.4.11 Nicht-Text-Kontrast | AA | UI- und Grafikobjekte müssen unterscheidbar sein | 3:1 für Buttons, Icons und Fokuszustände |
| 2.4.4 Linkzweck | A | Linktext muss außerhalb des Kontexts Sinn ergeben | Beschreib das Ziel, kein nacktes „hier klicken“ |
| 2.5.8 Zielgröße (Minimum) | AA | Interaktive Ziele müssen groß genug zum Treffen sein | mindestens 24 x 24 CSS-Pixel oder die Ausnahme über den Abstand |
| 3.1.1 Sprache der Seite | A | Die Software des Lesers muss die Sprache kennen | <html lang="en">, inline lang an fremdsprachigen Spans |
Zwei davon, Kontrast und Zielgröße, werden im Design-Abschnitt weiter unten festgenagelt, weil genau sie am häufigsten falsch zitiert werden.
E-Mails barrierefrei machen: Inhalt und Struktur
Echte Überschriften statt gestyltem Text
Menschen mit Screenreader bewegen sich durch lange Inhalte, indem sie von Überschrift zu Überschrift springen. Das funktioniert nur, wenn deine Überschriften echte Überschriften-Elemente sind.
- Nutze
<h1>bis<h6>für die Hierarchie, nicht ein fettes<span>oder ein großes<td>, das nur wie eine Überschrift aussieht. - Nutze eine logische
<h1>und staffle nach unten, ohne Ebenen zu überspringen. Eine<h2>, auf die eine<h4>folgt, zerstört das Springen von Überschrift zu Überschrift und ist eine Prüfung, die wir markieren. - Halte die Reihenfolge im Quelltext (DOM) gleich der Lesereihenfolge. Screenreader und linearisiertes mobiles Rendering folgen der Quelltextreihenfolge, nicht der visuellen CSS-Position. Verlass dich also nie darauf, dass CSS die Bedeutung umsortiert.
Beschreibende Links, niemals „hier klicken“
Ein Screenreader kann eine Liste aller Links der Nachricht aufrufen, vorgelesen ohne Kontext. Fünfmal „hier klicken“ ist in dieser Liste wertlos.
- Schreib Linktexte, die das Ziel benennen: „lies die Checkliste zur Zustellbarkeit“, nicht „mehr erfahren“.
- Vermeide nackte URLs als Linktext, sie werden Zeichen für Zeichen vorgelesen.
- Halte die bedeutungstragenden Wörter im Link, nicht darum herum.
Barrierefreies E-Mail-Design
Farbkontrast und Zielgröße
Kontrast ist das Kriterium, auf das die Prüfung von Unspam zielt: Sie markiert Text, der vor seinem Hintergrund praktisch unsichtbar ist. Die Schwellen sind exakt, und sie sind Schwellen, keine Zielwerte, die du aufrunden darfst: 4,499:1 fällt bei 4,5:1 durch.
| Inhalt | WCAG-AA-Minimum | WCAG AAA |
|---|---|---|
| Normaler Text (unter 18pt / unter 14pt fett) | 4,5:1 | 7:1 |
| Großer Text (ab 18pt regular / 14pt fett) | 3:1 | 4,5:1 |
| UI-Komponenten und Grafikobjekte | 3:1 | entfällt |
„Großer Text“ hat eine exakte Definition, die diese Kriterien teilen: 18pt regular (etwa 24px) oder 14pt fett (etwa 18,66px). Alles Kleinere zählt als normaler Text und schuldet die vollen 4,5:1.
Die Zielgröße ist der Wert, den alle falsch angeben. Das AA-Minimum von WCAG 2.2 (SC 2.5.8) liegt bei 24 x 24 CSS-Pixeln, mit einer Ausnahme über den Abstand für kleinere Ziele, die nicht von anderen Zielen bedrängt werden. Die berühmte Zahl 44 x 44 ist strenger: Sie stammt aus WCAG AAA (SC 2.5.5) und aus den Apple Human Interface Guidelines, sie ist nicht die AA-Anforderung. „WCAG verlangt 44 x 44“ ist deshalb ein verbreiteter Fehler. Behandle 24 x 24 als konform und 44 x 44 als angenehm bedienbar, und ziele bei jedem primären CTA auf den zweiten Wert.
- Transportiere Bedeutung nie allein über Farbe. Kombiniere einen farbigen Fehlerzustand mit einem Icon oder einer Beschriftung, und unterstreiche Links, damit Farbenblindheit sie nicht verschluckt.
- Gib Buttons eine echte, antippbare Größe und großzügiges Padding, besonders mobil.
Typografie und Layout
- Setz den Fließtext auf 14 bis 16px, mobil bevorzugt 16px, und nutze größere Grade für Überschriften.
- Nutze ein einspaltiges, responsives Layout, das beim Zoomen und auf schmalen Bildschirmen sauber umbricht. Dieselbe Disziplin zieht sich durch die aktuelle Arbeit am E-Mail-Design.
- Halte Zeilen bei etwa 45 bis 75 Zeichen, was ein einspaltiges 600px-Layout bei 16px von selbst trifft, und setz die Zeilenhöhe auf ungefähr 1,5. Deklariere Ersatzschriften, damit eine nicht unterstützte Webschrift auf etwas Lesbares zurückfällt.
Alt-Text richtig gemacht
Fehlender Alt-Text ist einer der Treffer, die unsere Prüfung markiert, und die Korrektur ist präzise, nicht einfach „überall alt ergänzen“.
- Informative Bilder: Beschreib Funktion oder Inhalt, nicht das Medium. Schreib
alt="Spring sale, 30% off all boots", nichtalt="banner image"und niealt="image of...". - Dekorative Bilder: Gib ihnen ein ausdrücklich leeres
alt=""(Null-Alt), damit Screenreader sie komplett überspringen. Das sind Abstandhalter, Trennlinien, Zierrat im Hintergrund. - Lass
altnicht ganz weg. Ein fehlendes Attribut ist nicht dasselbe wie ein leeres. Manche Screenreader lesen dann den Dateinamen oder die URL vor, also genau der Unfall aus dem Zitat weiter oben. - Denk daran: Alt-Text ist auch dein Text für den Fall ohne Bilder. Schreib ihn so, dass die Botschaft heil bleibt, wenn das Bild nie lädt.
Die Kehrseite von Alt-Text ist, ihn gar nicht erst zu brauchen. Der schnellste Weg, alle Prüfungen auf einmal zu reißen, ist die reine Bild-E-Mail: Eine Überschrift, die in ein JPEG eingebrannt ist, kann kein Screenreader vorlesen, sie bricht beim Zoomen nicht um, passt sich dem Dark Mode nicht an und verschwindet ohne Bilder komplett. Halte Überschriften, Fließtext und Buttons als echten HTML-Text und heb dir Bilder für das auf, was nur ein Bild zeigen kann.
Animation und GIFs
Für Animation gelten harte Regeln. Halte jedes GIF unter drei Blitzen pro Sekunde, stopp es nach etwa drei Durchläufen oder fünf Sekunden und pack die vollständige Botschaft in den ersten Frame, denn ältere Outlook-Versionen zeigen immer nur Frame eins. In Clients, die es unterstützen, kannst du mit prefers-reduced-motion ein statisches Bild einblenden, für Leser, die ihr Gerät um weniger Bewegung gebeten haben.
Code für barrierefreie E-Mails
Das ist die Hälfte für Entwickler. Alles davon ist zum Kopieren.
role="presentation" für Layout-Tabellen
E-Mails nutzen für das Layout weiterhin Tabellen. Bleiben sie unausgezeichnet, kündigt ein Screenreader jede Zeile, Spalte und Zelle als Daten an, und das ist Lärm. Zeichne jede Layout-Tabelle so aus, dass sie linear vorgelesen wird:
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>Your actual content, read in source order.</td>
</tr>
</table>
role="none" ist ein Synonym, aber role="presentation" hat die breiteste Unterstützung in assistiver Technik, nimm also dieses. Setz es bei jeder Layout-Tabelle, auch bei verschachtelten.
lang (und dir), damit die Stimme stimmt
Screenreader wählen Aussprache und Stimmprofil anhand der im Dokument deklarierten Sprache. Ohne lang fällt der Screenreader auf seine Systemvorgabe zurück und spricht alles falsch aus, etwa französischen Text mit englischer Lautung. Ein fehlendes lang gehört über alle E-Mails hinweg zu den häufigsten Defekten der Praxis, und die Korrektur kostet eine Zeile:
<html lang="en" dir="ltr">
Für eine Schrift von rechts nach links setz dir="rtl". Bei gemischtsprachigem Inhalt überschreibst du pro Fragment mit einem Inline-Attribut: <span lang="fr">merci beaucoup</span>.
Bulletproof und barrierefrei: CTAs
Bau Buttons als echte Links, die wie Buttons aussehen, groß genug für den Finger, mit beschreibendem Text im Anker:
<a href="https://example.com/checklist"
style="display:inline-block; padding:14px 28px; font-size:16px;
background:#1a4d8f; color:#ffffff; text-decoration:none;
border-radius:6px;">
Read the deliverability checklist
</a>
Der Linktext trägt für sich allein Bedeutung, das Padding gibt ihm eine bequeme Zielfläche, und die Farbkombination schafft 4,5:1.
Dark Mode und Barrierefreiheit
Der Dark Mode ist nicht ein Verhalten, sondern drei, und jedes kann den Kontrast auf eigene Weise zerstören: vollständige Invertierung (Hintergrund und Text beide gedreht), teilweise Invertierung (Text gedreht, Hintergründe größtenteils erhalten) und keine Änderung. Der teilweise Fall ist der gefährliche, denn halb gedrehte Paletten erzeugen matschige, kontrastarme Kombinationen, die du nie entworfen hast.
Signalisiere deine Absicht, damit aggressive Auto-Invertierung zurückweicht:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Kombiniere das dann mit dem passenden color-scheme im CSS deines Body. Zwei Eigenheiten der Clients, um die du herumbauen musst:
- Apple Mail invertiert reines
#000000und reines#FFFFFF. Der Ausweg sind Fast-Schwarz und Fast-Weiß,#000001und#FFFFFE, optisch identisch, aber von der erzwungenen Drehung ausgenommen. - Outlook Desktop (Microsoft 365 unter Windows) invertiert vollständig, der invasivste Modus, und färbt sogar dunkle Designs um. Outlook.com im Browser invertiert teilweise, erkennt helle Hintergründe und dreht sie, und es ergänzt beim Umfärben die Attribute
data-ogscunddata-ogsban deinen Elementen. Genau das macht es möglich, den Dark Mode über[data-ogsc]gezielt anzusprechen.
Die Regel, die all das überlebt: Kontrast gilt auch im Dark Mode. Sieh dir deine E-Mail im Dark Mode in der Vorschau an, über echte Clients hinweg, und prüfe beide Modi gegen 4,5:1 und 3:1. Logos und Icons auf transparenten Hintergründen sind der klassische Fehler im Dark Mode, unsichtbar in dem Moment, in dem der Hintergrund unter ihnen dreht.
Wie Screenreader mit Gmail, Outlook und Apple Mail umgehen
Dieselbe barrierefreie E-Mail wird je nach Client und Screenreader unterschiedlich angesagt und dargestellt. Das bestimmt, was du optimierst.
| Client und Screenreader | Was die Zeile im Posteingang ansagt | In der geöffneten Nachricht |
|---|---|---|
| Apple Mail + VoiceOver | Absender, Betreff, Empfangszeit | Control-Option-J liest den Nachrichtentext vor |
| Outlook + VoiceOver (Mac) | Absender, Betreff, Datum, ob Anhänge vorhanden sind | Pfeiltasten links und rechts gehen durch den Nachrichteninhalt |
| Gmail (Screenreader-Modus) | Wechselt mit j/k oder Pfeiltasten zwischen Konversationen, Enter oder o öffnet | n liest jede ungelesene Nachricht vor, älteste zuerst |
Die Folge ist praktisch: Betreffzeile und Preheader leisten Schwerstarbeit, weil sie angesagt werden, bevor der Text überhaupt geöffnet ist. Ist der Screenreader erst drin, entscheiden deine Überschriften und deine mit role="presentation" ausgezeichneten Tabellen darüber, wie navigierbar der Text ist.
Daraus folgen zwei Details. Nutzt du den Trick mit dem versteckten Preheader, sind die unsichtbaren Füllzeichen, die deinen Fließtext aus der Vorschau im Posteingang halten, für einen Screenreader nicht unsichtbar. Pack den Füll-Span in aria-hidden="true", damit assistive Technik ihn überspringt, statt eine Wand aus Nichts vorzulesen. Und ein Screenreader sagt jedes Emoji mit vollem Namen an, eine Betreffzeile, die mit zwei Partykanonen beginnt, kommt also als Lärm an, bevor dein Angebot ankommt. Nutze Emojis sparsam, setz sie ans Ende von Betreff oder Satz, und lass nie eines ein Wort ersetzen, das die Nachricht braucht.
Barrierefreiheit von E-Mails testen
Beim Testen winken die meisten Guides nur mit einer Werkzeugliste. Hier ist die gründlichere Fassung.
Zuerst eine automatische Prüfung laufen lassen
Fang mit dem schnellen, wiederholbaren Durchlauf an. Die Prüfung zur Barrierefreiheit von Unspam läuft im kostenlosen Spam-Test auf der Startseite mit, modelliert deine E-Mail gegen WCAG 2.2 AA und scannt sieben Dinge auf einmal: Farbkontrast (Ziel 4,5:1), Alt-Text der Bilder, Verhalten im Dark Mode, Reihenfolge der Überschriften ohne übersprungene Ebenen, beschreibende Linktexte, Größe der Tippflächen und ein deklariertes lang-Attribut. Du bekommst einen abgestuften Überblick, wo du stehst und was du verbessern kannst, statt eines einzigen Urteils nach bestanden oder durchgefallen.
Kombiniere sie mit den verwandten Content-Prüfungen, die sich mit Barrierefreiheit überschneiden: dem Spam-Wörter-Check für Text, der Lesbarkeit und Platzierung gleichermaßen schadet, und dem E-Mail-Checker, damit die Liste selbst sauber bleibt und deine barrierefreie Post wirklich bei engagierten Menschen ankommt.
Dann mit einem echten Screenreader testen
Automatische Werte fangen die mechanischen Fehler. Sie können dir nicht sagen, ob dein Alt-Text vorgelesen wirklich Sinn ergibt. Dafür testest du von Hand, am besten mit den kostenlosen Screenreadern, die in den Plattformen deines Publikums stecken:
- Schick dir die E-Mail selbst und öffne sie im Ziel-Client.
- Schalt den Screenreader ein (VoiceOver bei Apple, NVDA unter Windows, TalkBack unter Android).
- Hör auf die Lesereihenfolge. Ergibt die Nachricht linear Sinn? Werden Überschriften als Überschriften angesagt?
- Prüf, ob dekorative Bilder übersprungen werden und informative eine nützliche Beschreibung vorlesen.
- Vergewissere dich, dass Links ihr Ziel auch ohne Kontext ansagen.
Tastatur- und Zoom-Prüfungen
- Geh mit der Tabulatortaste durch die Nachricht. Jedes interaktive Element sollte erreichbar sein und einen sichtbaren Fokuszustand haben.
- Zoom auf 200 %. Der Text sollte in der einen Spalte umbrechen, ohne abgeschnitten zu werden oder waagerechtes Scrollen zu erzwingen.
- Sieh dir die E-Mail mit abgeschalteten Bildern an und prüfe, ob der Alt-Text die Botschaft allein trägt.
Was du zuerst beheben solltest
Hast du nur eine Stunde, verbring sie in dieser Reihenfolge. Diese Rangliste kombiniert unsere eigenen Daten mit der Häufigkeitsrangliste aus dem Bericht des Email Markup Consortium zur Barrierefreiheit 2026, laut dem fehlendes dir und fehlendes lang die häufigsten Defekte der Praxis sind, vor Layout-Tabellen ohne Rolle, zu wenig Kontrast und fehlendem Alt-Text.
- Ergänze das
lang- (unddir-) Attribut. Eine Zeile, fast überall fehlend, ein sofortiger Gewinn für alle mit Screenreader. - Zeichne jede Layout-Tabelle mit
role="presentation"aus. Aus einer Wand aus Tabellenlärm wird linearer Inhalt. - Behebe fehlenden Alt-Text. Ein fehlendes
alt-Attribut lässt das Bild lautlos verschwinden, beschreibendes Alt schützt dich außerdem, wenn Bilder aus sind. - Repariere zu wenig Farbkontrast. Die Prüfung, die Unspam direkt markiert, und die, an der auch sehende Leser am Handy scheitern.
- Ersetze gestylten Text durch echte Überschriften. Das schaltet die Navigation von Überschrift zu Überschrift frei.
- Schreib nackte Links mit „hier klicken“ um. Billig, und es macht deine Linkliste brauchbar.
Die Checkliste für barrierefreie E-Mails (zum Kopieren)
- Jedes informative Bild hat beschreibenden
alt-Text, dekorative Bilder habenalt="" - Echte Überschriften von
<h1>bis<h6>in Reihenfolge, keine übersprungenen Ebenen -
role="presentation"bei jeder Layout-Tabelle - Textkontrast mindestens 4,5:1 (3:1 für großen Text und UI-Elemente)
- Bedeutung nie allein über Farbe transportiert
- Linktext beschreibt sein Ziel, kein „hier klicken“
- Fließtext 14 bis 16px, bequeme Tippflächen bei CTAs
-
<html lang="...">deklariert,dirfür RTL gesetzt -
color-scheme-Meta gesetzt und beide Modi auf Kontrast geprüft - Ein echter
text/plain-Teil in einermultipart/alternative-Nachricht - Mit echtem Screenreader, Tastatur, Zoom und ohne Bilder getestet
Barrierefreiheit ist kein großer Neubau, sondern diese Handvoll Gewohnheiten vor jedem Versand, und die meisten davon helfen gleichzeitig deiner Zustellbarkeit. Du willst wissen, wo deine nächste Kampagne steht? Mach einen kostenlosen Spam-Test und lies deinen Wert für Barrierefreiheit in etwa 30 Sekunden ab, ganz ohne Anmeldung.
