Wie JUNE deine E-Mails automatisch barrierefrei macht
1. Struktur & HTML-Semantik: Saubere Basis für Screenreader
lang-Attribut für<html>und<body>:
JUNE setzt automatische die korrekten Sprachkennzeichnung für bessere Screenreader-Unterstützung.
→<html lang="de">Semantik für Tabellen:
Alle<table>-Elemente, die nicht für Daten genutzt werden (z. B. Layout-Tabellen), erhalten automatischrole="presentation"oderrole="none".
→ Dies verhindert, dass Screenreader unnötige Strukturinformationen vorlesen.Button-Semantik:
Allen interaktiven Elementen, die als Button verwendet werden, wird automatischrole="button"hinzugefügt – für bessere Interpretation durch Screenreader.Leere Attribute entfernen:
Automatisches Aufräumen von leerenalt="",title=""etc., um Missverständnisse bei Screenreadern zu vermeiden.Automatische Erstellung von barrierefreien Plain-Text-Versionen:
Wenn du über JUNE versendest, wird eine Plain-Text-Version automatisch mitgesendet. Diese kann dann von Empfänger:innen kann sich diese dann im Mail Client anzeigen lassen oder runterladen.
2. Bilder: Alt-Texte
Alt-Text-Feld im Editor:
User können für jedes Bild gezielt entscheiden, ob ein Alternativtext gesetzt wird – oder das Bild als „rein dekorativ“ markiert werden soll.Alt-Text-Erkennung:
Der Editor prüft automatisch, ob Bilder mit einemalt-Attribut versehen sind. Alle leeren Attribute werden automatisch gelöscht, um Missverständnisse bei Screenreadern zu vermeiden.
3. Export & Lokalisierung: E-Mails in der richtigen Sprache
Export mit Sprachoption:
Beim Download oder Export von E-Mails kann gezielt eine Sprache gewählt werden. Damit ist sichergestellt, dass dielang-Attribute korrekt gesetzt werden – insbesondere bei multilingualen Kampagnen.
Die Sprachen, die du hier exportieren kannst, sind die von dir vorab definierten Locales. Hier findest du mehr Informationen zu dem Thema Multilinguale E-Mails.
Was du als User selbstständig beachten solltest, um E-Mail-Kampagnen WCAG-konform zu versenden
💡 WCAG = (Web Content Accessibility Guidelines)
1. Headlines
Verwende sinnvolle Überschriften: Nutze
<h1>,<h2>usw. für Überschriften – und vermeide es, einfach nur mit gestylten<div>- oder<span>-Tags zu arbeiten.
Hierfür kannst du ganz einfach den Richtext-Editor nutzen:
2. Semantisches HTML
Verwende semantisches HTML für Textelemente: Nutze <p> für Absätze, <ul>/<ol> für Listen und <blockquote> für Zitate. Vermeide rein visuelle Tricks ohne strukturelle Bedeutung.
Auch hierfür nutze im Richtext Editor einfach "Paragraph"
💡 Um deinen Text zu Überprüfen, kannst du ganz leicht auf den Source Code zugreifen und das HTML überprüfen:
3. Prüfung der Farbkontraste
1. Empfehlenswerte Tools:
So geht’s:
Kopiere die Textfarbe (z. B.
#333333) und die Hintergrundfarbe (z. B.#FFFFFF) aus deinem E-Mail-Design.Füge beide Werte im Tool ein.
Lies ab, ob das Kontrastverhältnis den WCAG 2.1 Mindestanforderungen entspricht:
Normaler Text (unter 18px): 4,5 : 1
Großer Text (mind. 18px fett oder 24px normal): 3 : 1
Hinweise, wenn Text nur über Farbe Bedeutung trägt (z. B. “rot = Fehler”)
Prüfung der Mindestschriftgröße (≥ 14px)
2. Browser-Tools nutzen (für Preview oder Live-E-Mails)
Öffne die E-Mail-Vorschau im Browser.
Öffne die Entwicklertools (Rechtsklick → "Untersuchen").
Wähle das Textelement aus.
Viele Browser (z. B. Chrome) zeigen automatisch das Kontrastverhältnis im Styles-Bereich an – inkl. Warnung, wenn der Wert zu niedrig ist.
4. Automatisierter „View in Browser“-Link für jede E-Mail
Wenn du deinen Empfänger:innen die Möglichkeit geben möchtest, deine E-Mail in einem Webbrowser zu öffnen (z. B. bei Darstellungsproblemen oder für Barrierefreiheit), kannst du ganz einfach einen dynamischen Platzhalter verwenden.
So geht’s:
Öffne deinen E-Mail-Editor.
Füge ein Richtext-Element an der gewünschten Stelle deiner E-Mail ein (z. B. ganz oben oder im Footer).
Gib folgenden Text ein – oder verlinke eine beliebige Formulierung damit:
<a href="[%=browserview%]">Im Browser ansehen</a>
💡 Alternativ kannst du den Platzhalter auch in einen Button einbauen – je nach Design.
Was macht der Platzhalter?
Der Platzhalter [%=browserview%] wird beim Versand automatisch durch einen individuellen Link ersetzt, der auf die webbasierte Version der E-Mail zeigt.
💡 Tipp:
Ein häufiger Standardtext lautet z. B.:
„Probleme bei der Darstellung? <a href="[%=browserview%]">Hier im Browser ansehen</a>“
Best Practice
💡 Nutze Tools wie WAVE zur zusätzlichen Qualitätskontrolle.
Fazit:
Mit diesen Neuerungen möchten wir es für alle Nutzer:innen unseres Editors einfacher machen, Newsletter zu erstellen, die nicht nur optisch überzeugen – sondern auch für alle Empfängerinnen zugänglich sind.
Barrierefreiheit ist kein einmaliges Feature, sondern ein kontinuierlicher Prozess. Wir freuen uns über euer Feedback, um diesen Weg gemeinsam weiterzugehen!