Vor Kurzem haben wir unseren datenwerk-Newsletter hinsichtlich Barrierefreiheit etwas optimiert. Ziel war es, auch den Newsletter-Code barrierefrei zu gestalten, und ihn somit für alle AbonnentInnen verständlicher aufzubereiten. Auch LeserInnen mit assistiven Technologien, wie z.B. Screenreadern, sollen den Inhalt besser vorgelesen bekommen. Ab sofort könnt ihr den datenwerk Newsletter also auch anhören!
Screenreader lesen nämlich nicht nur den redaktionellen Inhalt vor, sondern grasen auch den Code nach „versteckten“ Informationen, wie Tabellen oder Alt-Texten, ab. Du fragst dich, was Newsletter mit Tabellen zu tun haben? Jede Menge, aber lies hier alle Infos dazu!
Um das Newsletter-Erlebnis für Menschen mit Beeinträchtigung zu verbessern, haben wir hier bereits einige redaktionelle Tipps vorgestellt, wie du die Barrierefreiheit deiner Marketing-Mails mit wenig Aufwand optimieren kannst. Für alle, die einen Schritt weiter gehen möchten, gibt es auch Tipps, wie der Newsletter-Code barrierefrei aufgebaut werden kann. Die Anpassungen können einerseits im html-Template selber oder in der Quellcode-Ansicht im Editor vorgenommen werden. Das kommt auf den Newsletter-Anbieter an, den du verwendest.
Definiere die Sprache im <html>
Nutzt du ein Navi im Auto? Vielleicht ist es dir schon einmal passiert, dass die Navi-Daten auf deutsch nicht geladen wurden und dir die Route stattdessen auf Englisch mit deutscher Aussprache angesagt wurde? Das klingt ziemlich seltsam.
Wenn du einen deutschen Newsletter verschickst, willst du doch bestimmt nicht, dass er von einem Screen-Reader mit englischem oder anderem Akzent vorgelesen wird? Daher definiere im <html>-Tag die Sprache des Newsletters. In unserem Fall lautet der Code dann <html lang=“de“>. In einer Liste kannst du dir ansehen, welche möglichen Ländercodes es gibt. Bei den meisten Newsletter-Anbietern kannst du die Sprache auch vorab einstellen. Das solltest du unbedingt korrekt machen, damit Screenreader wissen, wie sie den Text vorlesen sollen. So kannst du zum Beispiel auch zwischen amerikanischem und britischem Englisch unterscheiden. Ist keine Sprache hinterlegt, kann es passieren, dass der Screenreader deine Texte falsch ausspricht oder nicht richtig betont.
Setze „alt“-Texte bei Bildern
Diesen Punkt habe ich in Teil 1 bereits erwähnt, es gibt aber noch mehr dazu zu wissen.
Prinzipiell gilt: Jedes deiner Bilder sollte einen Alternativ-Text hinterlegt haben. Manchmal werden Bilder von Mail-Clients nicht dargestellt, weil AbonnentInnen diese Feature bewusst ausgeschalten haben, oder strenge Einstellungen im Mail-Programm die Darstellung der Bilder unterbinden. Damit diese UserInnen sich den Inhalt der Bilder vorstellen können, wird stattdessen der Alt(ernativ)-Text ausgespielt. Alt-Texte sind vor allem dann wichtig, wenn relevante Infos direkt im Bild platziert sind. Im <img>-Tag wird dann die Bildbeschreibung hinterlegt: <img alt=“Beschreibung des Bildes“>. Wenn das Bild für das Verständnis des Inhalts nicht relevant ist, kannst du das alt-Attribut auch leer lassen (alt=““). Achte aber darauf, dass das alt-Attribut im Newsletter vorhanden ist, sonst liest der Screenreader zum Beispiel die Bild-URL, oder den Dateinamen vor, und die interessieren meist niemanden.
Extra-Tipp: Der Alt-Text lässt sich auch beliebig stylen. Egal ob fett, bunt oder all-caps. Du kannst den Alternativ-Text an das Styling deines restlichen Newsletters anpassen!
Gib deinen Tabellen die Rolle „presentation“
Wie oben schon kurz erwähnt, besteht der Code hinter einem Newsletter aus Tabellen. Komplexere Newsletter haben oft ineinander verschachtelte Tabellen. Der Screenreader weiß aber nicht, ob es sich um eine klassische Tabelle oder ein Layout-Element handelt, welches lediglich aus optischen Gründen eingesetzt wird. Im Newsletter-Code werden Tabellen vorrangig für eine schöne Darstellung genutzt. Ein Screenreader liest bei Tabellen auch die Zeilen- und Spalten-Anzahl vor. Bei rein dekorativen Tabellen ist diese Information verwirrend.
Gerade bei verschachtelten Tabellen fällt es den zuhörenden UserInnen dann schwer, diese unwichtige Information vom redaktionellen Inhalt zu trennen. Da hilft es, dem table-Tag einfach die Rolle „presentation“ (<table role=“presentation“>) zu geben. Das hat keinen Einfluss auf das Aussehen des Newsletters, aber der Screenreader erkennt, dass die Tabelle rein dekorativ ist und liest Infos zur Zeilen- und Spaltenanzahl nicht vor.
Achtung: Wenn du eine tatsächliche Tabelle mit Tabellen-Kopf, Zeilen und Spalten darstellst, dann gib ihr diese „role“ nicht.
Verwende hover– und focus-Effekte bei Buttons
Hover- und Focus-Effekte eignen sich super für klickbare Elemente in deinem Newsletter. Dazu gehören zum Beispiel verlinkte Bilder, Links im Text oder Buttons. Hover- und Focus-Effekte erhöhen die Interaktions-Rate, denn UserInnen klicken eher auf Elemente, die on-hover oder on-focus zum Beispiel Farbe und/oder Größe leicht verändern. Nutze diese Effekte dezent, wenn dein verwendetes Newsletter-System sie unterstützt!
Teste die Anpassungen mit einem Screenreader
Vor dem Versand solltest du mit einem Screenreader testen, wie der Newsletter-Code sich jetzt anhört. Schick dir dazu einen Test-Newsletter zu und hör genau rein. Für Windows gibt es zum Beispiel den kostenlosen NVDA-Reader. Für Mac gibt es VoiceOver, das schon standardmäßig integriert ist.
Raucht dir nach diesem kleinen Ausflug in die Welt der Barrierefreiheit der Kopf? Kein Problem, wir greifen dir gerne unter die Arme! Egal, ob bei barrierefreien Webseiten oder optimierten Newslettern! Schreib uns einfach.
Und abonniere doch gleich unseren Newsletter und erhalte viel mehr Tipps und Tricks:
Kommentare