Transaktions-E-Mails barrierefrei: Bestätigung, Rechnung, Versand

Bestellbestätigung, Versandbenachrichtigung, Rechnung als PDF-Anhang: Transaktions-E-Mails gehören zu den am häufigsten geöffneten Nachrichten überhaupt – und werden bei der Barrierefreiheit trotzdem oft übersehen, weil sie automatisiert aus dem Shopsystem heraus verschickt werden.

Dabei greift das BFSG grundsätzlich auch hier, sobald die E-Mail Teil eines digitalen Geschäftsprozesses ist. Wer Bestätigungsmails nur als Bilddatei oder unstrukturierten HTML-Block verschickt, schließt Screenreader-Nutzer von zentralen Informationen zu ihrer eigenen Bestellung aus.

Transaktionsmails sind kein Sonderfall des BFSG

Newsletter und Marketing-Mails geraten bei der Barrierefreiheit meist zuerst in den Blick, weil sie bewusst gestaltet und oft manuell erstellt werden. Transaktionsmails laufen dagegen automatisiert aus dem Shop- oder CRM-System und werden seltener redaktionell geprüft.

Rechtlich ändert das nichts an den Anforderungen: Bestellbestätigung, Versandbenachrichtigung und Rechnungsmail sind fester Bestandteil des Kauf- und Nutzungsprozesses und unterliegen denselben Grundsätzen wie jede andere digitale Kommunikation eines Unternehmens.

Weil diese Mails aus Vorlagen erzeugt werden, wirkt sich ein einmal behobener Fehler sofort auf alle künftigen Versände aus – die Korrektur einer einzigen Vorlage lohnt sich entsprechend schnell.

Semantisches HTML statt reiner Bild-E-Mails

Manche Versandsysteme bauen die komplette Bestätigungsmail als ein einziges großes Bild, um das Layout pixelgenau nachzubilden. Für Screenreader-Nutzer bleibt eine solche Mail komplett unlesbar, sofern kein vollständiger Alt-Text als Ersatz hinterlegt ist.

Besser ist eine Struktur aus echten HTML-Elementen: Überschriften für Bestellnummer und Abschnitte, Absätze für Fließtext, echte Tabellen für die Bestellpositionen mit Artikel, Menge und Preis in eigenen Spalten.

E-Mail-HTML unterliegt zwar technischen Einschränkungen gegenüber Webseiten, doch grundlegende Struktur mit Überschriften-Elementen, Absätzen und Tabellen funktioniert in praktisch allen gängigen Mail-Clients zuverlässig.

Kontraste und Lesbarkeit in Bestätigungsmails

Viele Versandsysteme verwenden hellgraue Schrift auf weißem Hintergrund für „sekundäre" Informationen wie Lieferadresse oder Zahlungsart. Diese Kombination unterschreitet häufig den nötigen Kontrast für gut lesbaren Text.

Auch Schriftgrößen unter 14 Pixel für Fußzeilen mit rechtlich relevanten Angaben wie Widerrufshinweisen erschweren das Lesen unnötig, obwohl gerade diese Angaben oft wichtig für den Kunden sind.

Ein einheitliches, ausreichend kontrastreiches Farbschema über alle Transaktionsmail-Typen hinweg reduziert den Prüfaufwand: Wird das Grundtemplate einmal korrigiert, profitieren Bestellbestätigung, Versandmail und Rechnung gleichermaßen.

Auch Buttons und Links innerhalb der Mail, etwa „Bestellung verfolgen" oder „Rechnung herunterladen", brauchen ausreichenden Kontrast zur Hintergrundfarbe und sollten sich zusätzlich zur Farbe durch Unterstreichung oder eine sichtbare Umrandung von reinem Fließtext abheben. Viele Templates verlassen sich ausschließlich auf eine Akzentfarbe, die in manchen Mail-Clients durch eine automatische Dark-Mode-Umwandlung verändert wird und dann kaum noch vom Hintergrund zu unterscheiden ist. Ein kurzer Test der Vorlage sowohl im hellen als auch im dunklen Anzeigemodus des Mail-Programms deckt solche Kontrastprobleme frühzeitig auf, bevor sie an viele Kunden ausgeliefert werden.

Alt-Texte für Logos und Produktbilder in Transaktionsmails

Das Firmenlogo im Mail-Header braucht einen Alt-Text mit dem Firmennamen, damit Screenreader-Nutzer sofort erkennen, von welchem Absender die Mail stammt, auch wenn Bilder im Mail-Client blockiert sind.

Produktbilder in der Bestellübersicht sollten den Artikelnamen als Alt-Text tragen oder, wenn der Name bereits im Fließtext daneben steht, als rein dekoratives Bild mit leerem Alt-Attribut ausgezeichnet werden, um doppelte Ansagen zu vermeiden.

Werbebanner am Ende der Mail, etwa für Zubehör oder Cross-Selling, folgen denselben Regeln wie Produktbilder im Shop selbst und brauchen eine Beschreibung, die über „Werbung" oder den Dateinamen hinausgeht.

Barrierefreie PDF-Anhänge: Rechnung und Lieferschein

Rechnungen und Lieferscheine werden meist automatisch als PDF aus dem Warenwirtschaftssystem erzeugt. Viele dieser Generatoren liefern reine Bild-PDFs ohne echten Text, was für Screenreader-Nutzer eine Sackgasse bedeutet.

Wichtig ist, dass die PDF-Vorlage aus echtem, auswählbarem Text besteht, mit einer sinnvollen Lesereihenfolge und mindestens einer groben Struktur aus Überschrift und Tabelle für die Rechnungspositionen.

Wo der PDF-Generator selbst keine barrierefreie Ausgabe unterstützt, hilft es, die wichtigsten Rechnungsdaten zusätzlich direkt im HTML-Text der E-Mail zu wiederholen, statt sie ausschließlich im Anhang zu verstecken.

Mehrsprachige Transaktionsmails und das lang-Attribut

Viele Shops verschicken Bestellbestätigungen in mehreren Sprachen, je nachdem, in welcher Sprache der Kunde eingekauft hat. Jede Sprachversion braucht ein korrekt gesetztes lang-Attribut im HTML-Grundgerüst der Mail, damit Screenreader automatisch die passende Sprachausgabe und Aussprache wählen, statt einen deutschen Text mit englischer oder polnischer Stimme vorzulesen.

Enthält eine einzelne Mail Abschnitte in mehreren Sprachen, etwa eine deutsche Bestellbestätigung mit einem englischen Hinweis des internationalen Zahlungsanbieters, sollte dieser Abschnitt ein eigenes lang-Attribut auf dem umschließenden Element tragen. So wechselt die Sprachausgabe nur für den betroffenen Abschnitt, nicht für die gesamte Mail.

Ein verbreiteter Fehler bei automatisiert generierten Mails: Das lang-Attribut im äußeren HTML-Tag bleibt unabhängig von der tatsächlichen Kundensprache immer auf einem festen Wert stehen, meist der Standardsprache des Shopsystems. Wird eine französische Bestellbestätigung dann mit als Deutsch markiertem lang-Attribut ausgeliefert, verliest der Screenreader französische Wörter mit deutscher Aussprache, was den Text streckenweise unverständlich macht.

Bei mehrsprachigen Shops lohnt sich deshalb ein kurzer Test pro Sprachversion: Mail in der jeweiligen Sprache bestellen, empfangen und mit aktiviertem Screenreader kontrollieren, ob die Ansage tatsächlich in der erwarteten Sprache und mit passender Aussprache erfolgt.

Testtools für E-Mail-Templates

Viele gängige Prüfwerkzeuge für Webseiten lassen sich auch auf exportiertes E-Mail-HTML anwenden, etwa indem die Vorlage testweise als eigenständige HTML-Datei im Browser geöffnet und dort gescannt wird.

Für Kontrastprüfungen genügt häufig ein einfacher Kontrastrechner, der Vordergrund- und Hintergrundfarbe aus dem Template direkt gegenprüft, bevor die Vorlage produktiv geschaltet wird.

Zusätzlich lohnt ein manueller Test mit aktiviertem Screenreader im eigenen Mail-Programm: Bestellnummer, Positionen und Gesamtsumme sollten sich in einer nachvollziehbaren Reihenfolge vorlesen lassen, ohne dass wichtige Angaben übersprungen werden.

Vom Fehler zur dauerhaften Lösung

Da Transaktionsmails aus einer zentralen Vorlage erzeugt werden, reicht meist eine einmalige Überarbeitung des Templates, um alle künftigen Bestellbestätigungen, Versandmails und Rechnungen gleichermaßen zu verbessern.

Sinnvoll ist, die überarbeitete Vorlage in den regulären Freigabeprozess für Änderungen am Shopsystem aufzunehmen, damit künftige Anpassungen am Layout nicht versehentlich wieder unstrukturiertes HTML oder zu geringe Kontraste einführen.

Ein kostenloser Scan der als HTML exportierten Vorlage liefert einen ersten Anhaltspunkt, welche Punkte vor der nächsten größeren Kampagne noch offen sind.

Hinweis: Dieser Beitrag bietet allgemeine technische Orientierung und ersetzt keine individuelle Rechtsberatung zur Umsetzung des BFSG.

Häufig gestellte Fragen