Zweiter Blick: E-Mail Barrierefreiheit

BarrierefreiheitDarstellungsoptionen



E-Mail und Newsletter barrierefrei

Ausschnitt E-Mail Kopf

Bedeutung von barrierefreien E-Mails

Auch ein Newsletter muss für die Barrierefreiheit optimiert werden. Und werden in umfangreicheren E-Mails strukturierende Elemente wie Überschriften oder Listen eingesetzt, sollten diese auch über die entsprechende Semantik verfügen.

Zweckmäßigerweise werden dazu die entsprechenden HTML-Elemente verwendet. Doch auch die grafische Realisierung muss den WCAG Erfolgskriterien entsprechen. Eine besondere Herausforderung stellt dabei die mangelhafte Unterstützung der CSS Formatierung in E-Mail Programmen dar.

Ebenso muss die Wahrnehmbarkeit auf mobilen Endgeräten berücksichtigt werden.

Ausschnitt E-Mail Kopf

Betreff und Frequenz

Jedes E-Mail sollte aus dem Betreff schon in seiner individuellen Relevanz aussagekräftig sein: Soll ich es gleich lesen, bei Gelegenheit lesen oder kann ich es gleich löschen?

Für die textuelle Gestaltung von Newslettern gilt zunächst, dass der Newsletter als solcher schon erkennbar sein sollte. Die Betreffzeile enthält daher als Präfix etwa Zweiter Blick Newsletter.

Die weitere textuelle Formulierung des Betreff richtet sich nach den Inhalten des Newsletters. Es gibt dafür zwei Konzepte, die sich von der Frequenz der Erscheinung unterscheiden:

  1. Newsletter mit einer einzelnen überwiegend tagesaktuellen Information. Sie sollten im Betreff nach dem Präfix eine prägnante Überschrift für den Inhalt des Newsletters enthalten, insgesamt also etwa
    Zweiter Blick Newsletter: Einladung zum IT'S ART Cafe
  2. Newsletter, die überwiegend als Periodikum mit einer Sammlung von Informationen erscheinen. Sie enthalten Informationen zu mehreren Themen, die jeweils adäquat als Überschrift gekennzeichnet werden sollten. Die Betreffzeile kann nach dem Präfix eine Kurzinfo zum Erscheinungsdatum erhalten, insgesamt also etwa
    Zweiter Blick Newsletter Februar 2018.
Ausschnitt E-Mail Kopf

Newsletter online lesen

E-Mail Clients unterstützen CSS-Anweisungen teilweise sehr mangelhaft, was zu Darstellungsproblemen führt. Außerdem können in den Einstellungen aus Sicherheitsgründen Elemente ausgeblendet werden.

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

Die Webseite mit dem Inhalt des Newsletters wird zweckmäßigerweise ganz oben im Newsletter verlinkt. Es frustriert, wenn erst nach langen Plagen klar wird, dass es auch einfach gegangen wäre. Die Wahrscheinlichkeit, dass ein Newsletter auch gelesen wird, steigt dadurch.

Ich empfehle, den Linktext für die Zielgruppe zu optimieren. Nicht alle wissen, was es bedeutet, etwas im Browser anzusehen.

HTML

Semantische und grafische Realisierung

Auch in E-Mails ist eine semantische Kennzeichnung von Relevanz. Überschriften und Listen oder fremdsprachige Seitenbereiche gehören als solche gekennzeichnet.

Selbst Seitenbereiche eines E-Mai Newsletters können mit HTML5 Regionen gekennzeichnet werden. Hilft es nichts auf Grund mangelnder Unterstützung, so schadet es nichts, soweit ich sehe.

CSS3 wird von E-Mail Clients teilweise schon recht sauber unterstützt. Sicherheitshalber sollten Informationen und Funktionalitäten aber weiterhin ohne diese Technologien zur Verfügung stehen. Allerdings können Positionierungen und externe Stylesheets nicht zuverlässig implementiert werden.

Es empfiehlt sich also, 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.

Ausschnitt E-Mail Kopf

Layout-Tabellen in Newslettern

Leider werden manche E-Mails grafisch stark mit Layout-Tabellen realisiert. Der Grund dafür ist, dass E-Mail Clients CSS nicht ausreichend unterstützen.

Das Problem dieser Layout - Tabellen ist, dass Screen Reader Tabellen und deren Teile auch in ihrer Semantik wiedergeben. Dies führt zu äußerst viel Wortballast: Je nach Konfiguration wird die Anzahl der Spalten und Zeilen, die Position einer Zelle innerhalb der Tabelle und Ähnliches vorgelesen.

Dabei kann für den Screen Reader die Semantik der Tabelle mittels ARIA verborgen werden. Der Code lautet folgendermaßen:

<table role="presentation">

Bei verschachtelten Tabellen muss das Attribut in jedes <table>-Element eingefügt werden.

nur € 19 99

Textgrafiken

Gerade in Newslettern und Werbemails werden vielfach Grafiken eingebaut, in denen sich ein Linkname, Werbetext oder ein sensationeller Preis befinden. Dabei werden Bilder in E-Mails bei entsprechender Konfiguration gar nicht angezeigt. Und für Screen Reader ist das Bild eines Textes nicht wahrnehmbar.

Die eleganteste und zweckmäßigste Lösung ist, das grafische Erscheinungsbild eines Textes nicht in eine Textgrafik zu verpacken, sondern mittels CSS Formatierung zu realisieren. Farben und Abstände werden meiner Erfahrung nach auch in Outlook sauber mittels Styles dargestellt.

Lässt sich eine Schriftart oder ein Effekt nicht sicher mittels CSS realisieren muss die Grafik mit dem HTML Attribut für Alternativtexte versehen werden. Der Text auf der Grafik wird einfach in das Alt-Attribut geschrieben. Das kann folgendermaßen aussehen:

<img alt="nur € 19,99" src=…

Der Alternativtext wird vom Screen Reader vorgelesen und am Bildschirm angezeigt, wenn Bilder auf Grund der Einstellungen im E-Mail blockiert sind.

Besonders wichtig ist ein Alternativtext für Grafiklinks: Verfügt der Link über keinen wahrnehmbaren Namen, kann dessen Bedeutung nicht eingeschätzt werden.

Ausschnitt E-Mail Kopf

Weniger kann mehr sein

E-Mails haben sich als Kommunikations- und Informationsformat gerade dadurch bewährt, dass sie ohne größeren Aufwand erstellt und wahrgenommen werden können. Eine grafische Anreicherung von E-Mails über Standardkonfigurationen hinaus sollte daher nur mit Bedacht vorgenommen werden.

Eine semantische Anreicherung von speziellen Seitenelementen sollte hingegen im Sinne der Barrierefreiheit vorgenommen werden. Dies gilt natürlich nicht für den alltäglichen E-Mail Verkehr, sondern für Massenaussendungen, etwa mittels Newslettern.

In diesem Blogbeitrag wird plausibel dargestellt, dass Plain Text auch kommerziell von Vorteil sein kann. Ich plädiere darüber hinaus zur Verwendung adäquater Semantik.