{"id":10865,"date":"2026-06-13T14:53:53","date_gmt":"2026-06-13T12:53:53","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=10865"},"modified":"2026-06-20T17:12:10","modified_gmt":"2026-06-20T15:12:10","slug":"barrierefreiheit-bei-e-mails-komplexer-als-man-denkt","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/","title":{"rendered":"Barrierefreiheit bei E-Mails &#8211; Probleme und L\u00f6sungen"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/364-neue-episode\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nIn diesem Beitrag geht es um das Thema Barrierefreiheit bei E-Mails. Das Thema ist deutlich komplexer, als die meisten im ersten Moment vermuten. Im Internet- und Mobile-Bereich ist die Lage relativ \u00fcbersichtlich: Es gibt im Wesentlichen zwei gro\u00dfe Browser-Engines (Chromium und Firefox) sowie die Betriebssysteme Android, iOS, Windows und Mac. Bei E-Mails ist es komplizierter. Jedes E-Mail-Programm hat seine eigenen Macken bei der Darstellung. Genau das macht barrierefreie E-Mails zu einer echten Herausforderung.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/#Die_rechtliche_Lage\" >Die rechtliche Lage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/#Welche_Mail-Programme_sind_wichtig\" >Welche Mail-Programme sind wichtig?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/#Praktische_Tipps_fuer_barrierefreie_E-Mails\" >Praktische Tipps f\u00fcr barrierefreie E-Mails<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/#Das_Outlook-Problem_Tabellen-Layouts_im_Jahr_2026\" >Das Outlook-Problem: Tabellen-Layouts im Jahr 2026<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/#Warum_Layout-Tabellen_fuer_blinde_Menschen_ein_Albtraum_sind\" >Warum Layout-Tabellen f\u00fcr blinde Menschen ein Albtraum sind<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/#Wie_testet_man_barrierefreie_Mails\" >Wie testet man barrierefreie Mails?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Die_rechtliche_Lage\"><\/span>Die rechtliche Lage<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Schauen wir uns die rechtliche Frage an \u2013 ganz pragmatisch und ohne juristisches Fachchinesisch. Aus meiner Sicht sind sowohl \u00f6ffentliche Stellen als auch Privatunternehmen in der Regel dazu verpflichtet, ihre E-Mail-Kommunikation barrierefrei zu gestalten.<\/p>\n<p>Grunds\u00e4tzlich m\u00fcssen wir zwischen zwei Arten von E-Mails unterscheiden:<\/p>\n<p>&#8211; Newsletter (Massen-E-Mails): Newsletter richten sich an eine gro\u00dfe Gruppe und sind im Grunde Publikationen. Im \u00f6ffentlichen Sektor m\u00fcssen sie barrierefrei sein, weil sie zur amtlichen Kommunikation geh\u00f6ren. F\u00fcr die Privatwirtschaft greift das Barrierefreiheitsst\u00e4rkungsgesetz (BFSG). Da Newsletter meistens Vertr\u00e4ge anbahnen \u2013 zum Beispiel durch Rabatte oder aktuelle Angebote \u2013, fallen sie unter diese Pflicht.<br \/>\n&#8211; Individuelle E-Mails (Direktkommunikation): Auch die normale Eins-zu-eins-Kommunikation sollte barrierefrei sein. Im \u00f6ffentlichen Bereich gilt das ohnehin ausnahmslos. In der Privatwirtschaft geht es bei individuellen Mails fast immer um die Anbahnung oder Abwicklung eines Verbrauchervertrags.<\/p>\n<p>In der Praxis herrscht hier allerdings noch Uneinigkeit. Manche Unternehmen argumentieren, dass E-Mails im BFSG nicht explizit als Websites oder Applikationen genannt werden. Das finde ich pers\u00f6nlich nicht \u00fcberzeugend. Hier m\u00fcssen wir abwarten, wie sich die Markt\u00fcberwachung oder die Bundesfachstelle f\u00fcr Barrierefreiheit dazu positionieren. Noch stehen wir da ganz am Anfang.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Welche_Mail-Programme_sind_wichtig\"><\/span>Welche Mail-Programme sind wichtig?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Markt der relevanten E-Mail-Clients ist \u00fcberschaubar, hat es aber in sich:<\/p>\n<p>1. Apple (iOS und Mac): Global gesehen der absolute Marktf\u00fchrer bei den Clients.<br \/>\n2. Gmail: Sowohl als App unter Android als auch als Web-Version im Browser sehr stark verbreitet.<br \/>\n3. Outlook: Der Dominator im Business-Bereich \u2013 sowohl als Desktop-Version als auch im Browser \u00fcber Office 365.<\/p>\n<p>Das Problem: Die Darstellung unterscheidet sich oft extrem. Selbst innerhalb einer Anwendung wie Office 365 gelten im Browser andere Regeln als in der Desktop-App. Jedes Programm hat seine eigenen Eigenheiten. Vor allem Outlook ist hier ein schwieriges Pflaster, aber wegen seiner Dominanz im B2B-Bereich f\u00fchrt kein Weg daran vorbei.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Praktische_Tipps_fuer_barrierefreie_E-Mails\"><\/span>Praktische Tipps f\u00fcr barrierefreie E-Mails<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Trotz der Komplexit\u00e4t gibt es ein paar einfache Hebel, die Sie sofort nutzen k\u00f6nnen:<\/p>\n<p>&#8211; Der Web-Link f\u00fcr Newsletter: Bieten Sie ganz oben im Newsletter immer eine Web-Version an (\u201eWenn diese E-Mail nicht korrekt angezeigt wird&#8230;\u201c). Im Browser funktioniert der komplette HTML- und CSS-Standard ohne Probleme. Das ist die sicherste und barrierefreiste Variante.<br \/>\n&#8211; Text-Mails vs. HTML-Mails: Reine Text-Mails sterben im B2B- und B2C-Bereich leider aus. Schade eigentlich, denn sie sind sehr barrierearm. Wer sie nutzt, sollte nur darauf achten, Abs\u00e4tze einzubauen und nicht zu viele Emojis oder kryptische Zeichenketten zu verwenden, da Screenreader diese oft falsch vorlesen.<br \/>\n&#8211; Standard-HTML nutzen: Bei HTML-Mails sollten Sie auf klassische, saubere Formatierungen setzen, die seit Jahrzehnten funktionieren. Dazu geh\u00f6ren korrekt hierarchisch aufgebaute \u00dcberschriften, Abs\u00e4tze und Zitatbl\u00f6cke. Vergessen Sie auch nicht, die Hauptsprache der E-Mail im Code zu hinterlegen.<br \/>\n&#8211; Bilder und Alternativtexte (Alt-Texte): Wie genau Bilder technisch eingebunden werden, ist ein eigenes Thema. Wichtig f\u00fcr die Barrierefreiheit ist der Umgang mit Alt-Texten. Hier gilt dieselbe Regel wie im Web: Hat ein Bild eine Aussage, braucht es einen beschreibenden Alt-Text. Ist es nur Deko oder ein rein optisches Icon, lassen Sie das Alt-Attribut leer (`alt=&#8220;&#8220;`). So ignorieren assistive Technologien wie Screenreader das Bild und der Lesefluss wird nicht gest\u00f6rt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Das_Outlook-Problem_Tabellen-Layouts_im_Jahr_2026\"><\/span>Das Outlook-Problem: Tabellen-Layouts im Jahr 2026<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das gr\u00f6\u00dfte Manko bei E-Mails \u2013 besonders im B2B-Bereich \u2013 ist die absolute Dominanz von Microsoft Outlook. Outlook hat eine sehr eigenwillige Vorstellung davon, wie E-Mails dargestellt werden sollten. Das f\u00fchrt dazu, dass man f\u00fcr ein sauberes Layout immer noch auf uralte HTML-Tabellen zur\u00fcckgreifen muss.<\/p>\n<p>Eigentlich sind Tabellen-Layouts im Webdesign seit Jahrzehnten ausgestorben. Microsoft ignoriert bei Outlook-Mails aber bis heute moderne Webstandards und stellt Standard-HTML (wie \u00dcberschriften, Abs\u00e4tze oder Zitate) oft fehlerhaft dar. Das ist der gro\u00dfe Fluch von Outlook. Wir kommen an den Tabellen also nicht vorbei.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Warum_Layout-Tabellen_fuer_blinde_Menschen_ein_Albtraum_sind\"><\/span>Warum Layout-Tabellen f\u00fcr blinde Menschen ein Albtraum sind<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr Sehende sind diese Design-Tabellen unsichtbar. F\u00fcr blinde Menschen, die einen Screenreader nutzen, sind sie dagegen eine echte Barriere:<\/p>\n<p>&#8211; Information Overload: Der Screenreader wei\u00df nicht, dass die Tabelle nur f\u00fcr das Layout da ist. Er liest stur alle Koordinaten vor: \u201eSpalte 1, Zeile 1, Spalte 2, Zeile 1&#8230;\u201c<br \/>\n&#8211; Versteckter Inhalt: Da oft auch leere Zellen f\u00fcr Abst\u00e4nde genutzt werden, h\u00f6rt die betroffene Person minutenlang nur Koordinaten ohne Inhalt. Viele brechen dann ab, weil sie denken, die Mail sei leer.<\/p>\n<p>Die L\u00f6sung: Nutzen Sie das Attribut role=&#8220;presentation&#8220;. Damit markiert man die Tabelle als rein dekorativ. Der Screenreader ignoriert die Tabellenstruktur und liest einfach den reinen Text vor.<br \/>\nDesign, Schriften und Animationen<\/p>\n<p>Ansonsten gelten f\u00fcr E-Mails dieselben Grundregeln wie f\u00fcr Websites: Kontraste m\u00fcssen stimmen, und Informationen d\u00fcrfen niemals nur \u00fcber Farben transportiert werden. Zudem sollten Sie auf folgende Punkte achten:<\/p>\n<p>&#8211; Immer einspaltig senden: Mehrspaltige Layouts haben im Posteingang nichts mehr zu suchen. Auch im Business-Bereich lesen die meisten ihre Mails auf dem Smartphone. Mehrspaltige Tabellen-Layouts zerschie\u00dfen dort komplett die Darstellung. Einspaltig l\u00e4uft \u00fcberall stabil.<br \/>\n&#8211; Gut lesbare Standardschriften: Die Schriftart wird oft \u00fcberbewertet. Sie m\u00fcssen keine speziellen Schriften f\u00fcr Menschen mit Behinderungen nutzen. Verlassen Sie sich einfach auf gut lesbare Standards wie Open Sans oder Source Sans.<br \/>\n&#8211; Keine GIF-Animationen: Animationen haben in E-Mails nichts verloren. Das Problem bei GIFs ist, dass Nutzerinnen sie nicht pausieren k\u00f6nnen. F\u00fcr Menschen mit Epilepsie oder im Autismus-Spektrum k\u00f6nnen blinkende Bilder extrem problematisch sein. Die Folge: Ihre Mail wird sofort geschlossen und Ihre Adresse im schlimmsten Fall blockiert.<br \/>\nEin weiteres wichtiges Thema sind die Linktexte. Vermeiden Sie Formulierungen wie \u201eHier klicken\u201c oder \u201eMehr Informationen\u201c. Schreiben Sie direkt in den Text, wohin der Link f\u00fchrt (z. B. \u201eLaden Sie hier unseren Barrierefreiheits-Leitfaden herunter\u201c). Rein nach den WCAG-Richtlinien reicht es zwar oft, wenn der Sinn aus dem Kontext hervorgeht \u2013 selbsterkl\u00e4rende Links sind aber die deutlich sauberere und benutzerfreundlichere Variante.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wie_testet_man_barrierefreie_Mails\"><\/span>Wie testet man barrierefreie Mails?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Outlook bietet einen eigenen integrierten Barrierefreiheitsassistenten. Wie gut der wirklich ist, l\u00e4sst sich schwer sagen. Wenn man von Outlook zu Outlook sendet, mag er helfen. Da Mails aber an unz\u00e4hlige verschiedene Anbieter (Gmail, GMX, Apple Mail) gehen, ist das Gesamtsystem viel zu komplex f\u00fcr ein einziges Tool. Verlassen Sie sich also nicht darauf.<\/p>\n<p>1. Testen Sie Ihre Mails manuell auf den drei gro\u00dfen Plattformen: Apple, Gmail und Outlook.<br \/>\n2. Wenn Sie modernere oder exotischere ARIA-Attribute nutzen wollen, pr\u00fcfen Sie vorher genau, ob die Mail-Clients diese \u00fcberhaupt unterst\u00fctzen. Oft werden solche Attribute von den Programmen einfach blockiert, und beim Empf\u00e4nger kommt nichts davon an.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beitrag geht es um das Thema Barrierefreiheit bei E-Mails. Das Thema ist deutlich komplexer, als die meisten im ersten Moment vermuten. Im Internet-&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-e-mails-komplexer-als-man-denkt\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreiheit bei E-Mails &#8211; Probleme und L\u00f6sungen<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10865","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=10865"}],"version-history":[{"count":4,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10865\/revisions"}],"predecessor-version":[{"id":10877,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10865\/revisions\/10877"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=10865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=10865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=10865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}