Zweiter Blick: E-Mails & Newsletter
Dateiformate
E-Mail Piktogramm

E-Mails und Newsletter barrierefrei

Eine schlichte Nachricht ohne außerordentliches grafisches Design wird den grundlegenden Anforderungen an digitale Barrierefreiheit ohne Weiteres entsprechen. Auch ein sparsames Design von Newslettern erspart Arbeit und kann sogar das Interesse steigern.

Auf komplexe E-Mails und Newsletter lässt sich hingegen ein breites Spektrum der Anforderungen aus den WCAG anwenden. Von redaktioneller Seite muss eine semantische Anreicherung im Bedarfsfall vorgenommen werden. Eine technische Herausforderung kann bei der visuellen Gestaltung die mangelhafte Unterstützung der CSS-Formatierung in E-Mail Programmen darstellen.

E-Mails bestehen zunächst aus einem Kopfbereich mit technischen Angaben zum Absender und Empfänger*innen und dem Betreff. Gelegentlich sind einem Mail auch Attachments angehängt.

Dringlichkeit festlegen

Ein E-Mail kann technisch als besonders dringlich festgelegt werden. Die Dringlichkeit wird im E-Mail Client durch einen visuellen Indikator angezeigt. Diese technische Kennzeichnung wird auch von Screen Readern erkannt und wiedergegeben.

Die Dringlichkeit eines Mails sollte in der Regel technisch festgelegt werden. Eine hervorhebende Formulierung im Betreff sollte redaktionell im Hinblick auf Bedürfnisse von Zielgruppen eine Ausnahme bleiben.

Personen, die in der Standardkonfiguration ihre Mails mit Wichtigkeit hoch kennzeichnen, erlauben Einblicke in ungeeignete Einstellungen, sei es die technische Ebene oder die Persönlichkeitsstruktur.

Betreff formulieren und gestalten

Jedes E-Mail sollte schon durch den Betreff eine subjektive Relevanz erkennbar machen: Muss ich das Mail gleich bearbeiten, bei Gelegenheit lesen oder kann ich es gleich löschen?

Inhalt des Mails zusammenfassen

Im Betreff wird der Inhalt des Mails knapp und präzise zusammengefasst. Der Formulierung liegen entsprechende redaktionelle Überlegungen zugrunde, wie sie auch bei Überschriften, Linkbeschriftungen oder Seitentiteln vorgenommen werden sollten.

Vorteile signifikanter Formulierungen des Betreffs sind:

Betreff für Newsletter

Für Newsletter gibt es zwei Konzepte, für die zwei unterschiedliche Anforderungen an den Betreff gelten:

Newsletter zu einem einzelnen Thema (Ad-hoc Newsletter)

Newsletter zu einem einzelnen Thema erhalten einen Betreff, der das jeweilige Thema wie eine aussagekräftige Überschrift zusammenfasst. Dies kann folgendermaßen aussehen:

E-Mails barrierefrei

Geht der Charakter als Newsletter nicht bereits aus den Absendeangaben hervor, sollte dies durch einem Präfix zum Inhalt erkennbar gemacht werden:

Newsletter | E-Mails barrierefrei

Periodika mit mehreren Themen

Eine Sammlung von Informationen zu mehreren Themen in einem Newsletter erhalten als Betreff Angaben zur Ausgabe. In einem Periodikum ist dies zweckmäßig der Erscheinungstermin:

Newsletter Januar 2022

Die einzelnen Themenbereiche des Newsletters werden jeweils adäquat mit einer Überschrift versehen.

Anhänge (Attachments

Große Dateien als Anhang benötigen Zeit und Energie. Eine Reduktion auf das Nötige liefert einen kleinen Beitrag zur CO2-Bilanz. Im Hinblick auf digitale Barrierefreiheit scheinen folgende Aspekte relevant:

Botschaft gleich im E-Mail

Insbesondere im Behördenverkehr lassen sich E-Mails finden, deren Inhalt lediglich aus folgender sinngemäßen Formulierung besteht:

In der Anlage finden Sie eine Information zu obenstehendem Betreff.
  1. Handelt es sich um ein angehängtes umfangreiches Dokument, das aus rechtlichen Gründen in einem unveränderbaren PDf-Format versendet werden muss, finde ich mich Zähne knirschend damit ab.
  2. Enthält der Anhang personenbezogene Daten, ist ein E-Mail zur Übersendung aus Datenschutzgründen ungeeignet.
  3. Ließe sich der Inhalt schlicht im E-Mail Text darstellen, handelt es sich beim Versand als PDF-Anhang schlichtweg Verpackungsmüll dar. Sowohl der Versand, als auch der Empfang ist mit unnötigem Mehraufwand verbunden.
Anhänge barrierefrei versenden
Eine angehängte Datei muss natürlich selbst barrierefrei sein. (PDF, Word, Excel, …)
Verlinken statt anhängen

In Newslettern und Mails an einen größeren Verteiler sollte generell auf Anhänge verzichtet werden. Stattdessen enthält der Inhalt einen Link zum Download der Datei.

Dateien mit personenbezogenen Daten werden zu einer Download-Seite mit entsprechenden Sicherheitsmaßnahmen verlinkt. Auf diese Weise wird der Datenschutz bestmöglich gewahrt.

Semantische Elemente

HTML

Auch in E-Mails kann eine semantische Kennzeichnung von Relevanz sein. Der visuellen Darstellung muss eine adäquate technische Realisierung entsprechen.

Damit semantische Elemente realisiert werden können, muss ein E-Mail im HTML-Format versendet werden. Im Textformat (Plain Text) ist keine Semantik vorgesehen.

Überschriften

Eine kurze Nachricht enthält in der Regel keine Überschriften. Werden in einem Mail unterschiedliche Themen behandelt, ist es für die Navigation jedoch hilfreich, wenn einzelne Themen durch semantische Überschriften gekennzeichnet sind.

Sofern Überschriften visuell durch Abstände, Schriftgröße, Farbe und Ähnliches dargestellt werden, müssen sie in jedem Fall auch technisch als Überschrift realisiert werden.

Die Anforderungen entsprechen denen von Überschriften in Word .

Überschriften in Outlook zuweisen
Menüband

In Outlook steht der erforderliche Befehl zur Überschriftenzuweisung nicht gleich im Menü Start zur Verfügung. In Outlook 365 können Sie in der Standardkonfiguration folgendermaßen vorgehen:

Vorgehen Zuweisung von Überschriften in Outlook 365
  1. Setze den Cursor in den Absatz, der als Überschrift gekennzeichnet werden soll.
  2. Wähle das Menü Text formatieren.
  3. Klicke auf die erweiterten Funktionen für Formatvorlagen.
  4. Wähle die gewünschte Überschriftenebene aus der Liste der Formatvorlagen.
Tastenkombinationen

Die Tastenkombination ALT+1 et cetera zum Zuweisen einer Überschriftenebene steht in Outlook leider nicht zur Verfügung.

Ich verwende daher STRG+SHIFT +S zum Öffnen des Dialogfelds Formatvorlage. In diesem Dialogfeld kann übrigens auch die visuelle Darstellung der jeweiligen Überschrift geändert werden.

Listen

Wenn ein E-Mail im HTML-Format erstellt wird, stehen alle Funktionalitäten von Listen wie auf Webseiten zur Verfügung. Allerdings sehen E-Mail Editoren wie Outlook keine Definitionslisten vor. Werden solche benötigt, sind daher Kenntnisse im Editieren des Quellcodes erforderlich.

Einfache nummerierte und unnummerierte Listen können in Outlook wie in Word erstellt werden.

Weitere semantische Komponenten

Für weitere semantische Komponenten gelten die Anforderungen analog zu HTML oder Word:

Bilder und Grafiken

Boot mit Spiegelung im Wasser

Auch in E-Mails können und müssen Bildelemente mit einer textuellen Alternative versehen werden. Folgende Bildtypen sind in diesem Kontext besonders häufig zu finden:

Logos

Die Signatur oder Briefvorlage für E-Mails enthält typischerweise ein Logo der Einrichtung. Als Alternativtext wird für ein Logo die Bezeichnung der Einrichtung verwendet. Eine Beschreibung des Logos ist nicht erforderlich. Dies gilt auch, wenn das Logo zur Startseite des Webauftritts der Einrichtung verlinkt ist.

Textgrafiken

nur € 19 99

Digitale Weihnachtsgrüße, Werbe-Postings, politische Aussendungen oder Einladungen werden häufig mit Bildern versehen, auf denen relevanter Text zu sehen ist. Ein solcher Text muss alternativ auch in textueller Form verfügbar sein, sei es für Screen Reader oder bei deaktivierten Bildern im E-Mail Programm.

Zunächst sollte überlegt werden, ob die Darstellung des Textes tatsächlich in einem Bild erforderlich ist. Einladungen, die lediglich aus einem Screenshot bestehen sind für die Barrierefreiheit ein Gräuel.

Vielfach genügt erfahrungsgemäß schon eine saubere textuelle Version ohne Bilder von Text, etwa für eine Einladung. Ort, Datum und weitere Angaben sollten natürlich mit semantischen Kennzeichnungen versehen werden.

Vielfach lässt sich die visuelle Darstellung des Textes mit CSS-Anweisungen realisieren. Farben und Abstände werden meiner Erfahrung nach auch in Outlook sauber mittels Styles dargestellt.

Erscheint dies nicht möglich oder zweckmäßig, stehen folgende Optionen zur Verfügung:

Alternativtext für das Bild von Text

Der Text, der auf dem Bild zu lesen ist, wird Eins zu Eins im Alternativtext wiedergegeben. Dies ist für kurze Texte mit maximal 120 - 150 Zeichen zweckmäßig.

Dieser Alternativtext wird von einem Screen Reader anstelle des Bildes vorgelesen. Er erscheint auch, wenn die Darstellung von Bildern blockiert wird.

Wiedergabe des Textes außerhalb des Bildes

Längere oder komplexe Textinhalte auf dem Bild müssen mit der erforderlichen Semantik unterhalb des Bildelements wiederholt in Textform angeboten werden. Dies kann durch eine redundante Wiedergabe des Textes oder durch eine Verlinkung zu einer Textversion erfolgen.

Kontraste auf Grafiken

Grußkarten oder Slogans in einer Textgrafik sind häufig in dezenten oder grellen Farbtönen zu sehen. Die Helligkeitskontraste sind dabei oft mangelhaft.

Ein allfällig vorhandener Alternativtext stellt keinen hinreichenden Ersatz für Kontrastmängel dar. Der Alternativtext wird nur von bestimmten assistierenden Technologien oder unter speziellen Einstellungen im Programm dargestellt.

Visuelles Design

Schriftgestaltung

Bei der Gestaltung der Schrift steht die visuelle Lesbarkeit im Blickpunkt. Menschen mit Sehbehinderung und Menschen mit Legasthenie profitieren von einem gut lesbaren Schriftbild.

Schriftarten (Font Families)

Vermeide verschnörkelte Schriftarten und das auch auf Grußkarten.

Für Bildschirmtexte haben sich serifenlose Schriftarten eingebürgert. Werden solche Lesegewohnheiten berücksichtigt, kann mit einer allgemein guten Lesbarkeit gerechnet werden.

Schriftgröße

E-Mail Programme verfügen über Funktionalitäten zum Vergrößern der Texte (STRG + Mausrad, …). Diese sind vielfach bekannt und werden im Bedarfsfall auch verwendet.

Trotzdem sollte die initiale Größe über ein gewisses Mindestmaß verfügen. Je nach Zielgruppe werden mindestens 11-14 Pixel empfohlen.

Beim Vergrößern dürfen jedenfalls keine Inhalte oder Funktionalitäten verloren gehen. Dies ist bei einfachen Mails ohne CSS-Formatierung oder Layout-Tabellen gewährleitstet. Newsletter mit aufwendigem technischem Design müssen jedoch bei 200% Vergrößerung getestet werden.

Kontraste

Schrift und Hintergrund müssen über ausreichemden Kontrast verfügen. Dies muss auch bei Bildern von Text gewährleistet sein.

Ein sicherer Weg ist, auf Briefformate gänzlich zu verzichten. Die Darstellung erfolgt dann entsprechend der gewohnten Standardeinstellungen im E-Mail Programm für das jeweilige HTML-Element.

CSS Formatierung

CSS3 wird von E-Mail Clients teilweise schon recht sauber unterstützt. Allerdings können Positionierungen und externe Stylesheets nicht zuverlässig implementiert werden.

Sicherheitshalber sollten Informationen und Funktionalitäten aber weiterhin ohne diese Technologien zur Verfügung stehen. Es empfiehlt sich, das Grunddesign erst für die schwächsten E-Mail Clients zu entwerfen und mit ihnen zu testen. Eine Anreicherung der Semantik und Darstellung sollte erst danach erfolgen.

Layout-Tabellen

Vor allem zur visuellen Realisierung von Spalten werden in E-Mails noch Layout-Tabellen eingesetzt. Als Grund wird die teilweise mangelhafte Unterstützung von CSS-Anweisungen in E-Mail Programmen angeführt.

Aus der Perspektive der Barrierefreiheit treten bei Layout-Tabellen folgende Probleme auf:

Screen Reader und Layout-Tabellen

Screen Reader geben Tabellen und deren Teile auch in ihrer Semantik wieder. Dies führt zu Wortballast bei der linearen Wahrnehmung durch Braillezeile oder Sprachausgabe. Je nach Konfiguration wird die Anzahl der Spalten und Zeilen, die Position einer Zelle innerhalb der Tabelle und Ähnliches angegeben.

Die Semantik einer Tabelle kann mittels ARIA unterdrückt werden. Das erforderliche Attribut wird folgendermaßen eingesetzt:

<table role="presentation">
Details zur Verwendung von "role=presentation"
Kindelemente mit Semantik versehen
Die einzelnen Kindelemente einer Tabelle müssen in <h#>, <p> und <li>-Tags verpackt werden, damit der Tabelleninhalt nicht in einer Wurst vom Screen Reader vorgelesen wird.
Verschachtelte Layout-Tabellen
Bei verschachtelten Tabellen muss das Attribut role="presentation" in jedes table-Element eingefügt werden.
(<th> und <td> übernehmen role="presentation")
Reihenfolge der Attribute

Zur Vermeidung von Darstellungsproblemen sollte für Outlook 2016 role="presentation" vor style-Anweisungen im table-Element eingebaut werden.

<table role="presentation" style="…">

Smart Phones und Layout-Tabellen

Im responsiven Design wird weithin auf Layout-Tabellen verzichtet. Dadurch lassen sich Darstellungsprobleme auf Smart Phones vermeiden.

Sofern ein Design mit Spalten ohne Layout-Tabellen unvermeidbar erscheint, sollte zumindest die Anzahl der Spalten und die Länge der Spalteninhalte minimiert werden. Eine Überprüfung der Darstellung auf schmalen Displays ist jedenfalls vorzunehmen.

Newsletter und Mailinglisten

Relevant für: Nutzungsfreundlichkeit (Usability)

Newsletter oder Beiträge in einem Diskussionsforum sind nicht exklusiv an mich adressiert. Ich muss mich in der Regel daher nicht unverzüglich mit deren Bearbeitung befassen. Ich sollte jedoch möglichst intuitiv erkennen, dass ein entsprechendes Mail einen Newsletter oder Beitrag in einem Diskussionsforum darstellt.

Kennzeichnung als Newsletter oder Listenbeitrag

Da es für Newsletter keine entsprechende technische Kennzeichnung gibt, muss der Charakter aus den Absenderangaben oder dem Betreff hervorgehen. Folgende Konzepte stehen zur Verfügung:

Charakterisierung durch Absendeangaben

Angaben zu Absender*innen können im E-Mail Programm visuell wahrgenommen und von einem Screen Reader wiedergegeben werden. Ein Von: kann folgendermaßen ausreichen:

newsletter@example.org

Ein weiterer Hinweis im Betreff scheint bei solchen Absendeangaben nicht mehr erforderlich.

Kennzeichnung im Betreff

Geht der Charakter als Newsletter oder Beitrag in einer Mailingliste nicht bereits aus den Absendeangaben hervor, muss sich der entsprechende Charakter im Text des Betreff wiederfinden. Folgende Varianten sind gebräuchlich und zulässig:

  • Newsletter Jänner …
  • [Newsletter] Stellenausschreibung …
  • XY Diskussion | Frage zu …

Die Trennung von Präfix und Inhaltsangabe durch ein Sonderzeichen ([], |) ist in den meisten Fällen erforderlich.

Die Kennzeichnung mittels […] ist visuell signifikant.
Ein | als Trennzeichen zwischen Kennzeichnung und Inhaltsangabe ist mit einer Sprachausgabe jedoch weniger störend.

Verlinken zu einer Online Version

Grafische Formatierungen wie CSS-Anweisungen werden von E-Mail Programmen teilweise noch recht unzuverlässig umgesetzt. Zudem können Sicherheitseinstellungen im E-Mail Client zu Darstellungsverlusten insbesondere von Bilder führen.

Aus diesen Gründen hat sich eingebürgert und bewährt, den Inhalt eines Newsletters im Bedarfsfall alternativ auf einer Webseite anzubieten. Browser sorgen für eine zuverlässigere Darstellung und verfügen über andere Sicherheitskonzepte.

Zur Webseite mit dem Inhalt des Newsletters wird zweckmäßigerweise ganz oben im Newsletter verlinkt. Es frustriert, wenn erst nach langem Plagen klar wird, dass es auch einfacher gegangen wäre.

Der Link zur Online-Version wird so beschriftet, dass dessen Funktion aus der Beschriftung hervorgeht. Hinreichend und zweckmäßig ist folgende Formulierung:

Newsletter online lesen

Seitenregionen

Seitenbereiche eines komplexen Newsletters sollten mit HTML5 Regionen gekennzeichnet werden. Auch wenn in E-Mail Programmen Funktionalitäten zur Navigation zwischen Seitenregionen noch nicht unterstützt werden, können diese Funktionalitäten vorsorglich verwendet werden. Und eine Online-Version benötigt die Seitenregionen ohnedies.

Die Komponenten eines Newsletters werden typischerweise folgendermaßen zugeordnet:

<header>
  1. Link zur Online-Version
  2. Logo
<main>
Redaktionelle Inhalte des Newsletter, gegebenenfalls durch Überschriften strukturiert.
<footer>
  1. Signatur / Kontaktangaben
  2. Hintergrund der Zusendung (Anmeldeverfahren)
  3. Angaben zur Abmeldung

Regeln in E-Mail Programmen

E-Mail Programme verfügen über Funktionalitäten, mit denen für E-Mails mit besonderen Merkmalen Regeln erstellt werden können. Typischerweise werden auf diese Weise durch entsprechende Konfigurationen Beiträge aus einer Mailingliste in einen dafür erstellten Ordner verschoben.

Solche Regeln können für Angaben zu Absender*innen, Adressat*innen oder Teilen des Betreff erstellt werden. Eine dieser Angaben oder eine Kombination dieser Angaben sollte daher unverwechselbar für wiederkehrende E-Mails aus einem Diskussionsforum erstellt werden können.