Die E-Mail-Barrierefreiheit verbessern

Obwohl sich E-Mails ständig weiterentwickeln, entsprechen sie oft noch nicht vollständig den Standards für Web-Barrierefreiheit.

Um mit älteren E-Mail-Clients oder solchen, die nicht den aktuellen HTML- und CSS-Standards folgen, kompatibel zu sein, verwenden wir HTML-Tabellen (<table>) für das Seitenlayout. Obwohl altmodisch, ist diese Praxis notwendig, um eine bessere Kompatibilität über verschiedene E-Mail-Clients hinweg zu gewährleisten.

Dennoch ist der Email Builder entschlossen der Mission verpflichtet, E-Mails und das Web zugänglicher und inklusiver zu gestalten. Hier sind einige Maßnahmen, die wir implementiert haben, um Sie dabei zu unterstützen, die Erfahrung für alle Leser Ihrer E-Mails zu verbessern: 

Der Email Builder erkennt automatisch die Sprache Ihrer E-Mail und fügt sie zum generierten E-Mail-Code hinzu. Diese Funktion unterstützt Hilfstechnologien (zum Beispiel Sprachsynthese) dabei, E-Mail-Inhalte besser zu interpretieren.

Sie werden neue lang- und xml:lang-Attribute am Anfang Ihrer E-Mail sehen, die die erkannte Sprache anzeigen:

Zusätzliche Informationen finden Sie auf der W3C-Website.

Strukturierte Überschriften (h1, h2, etc.) werden von den Web Content Accessibility Guidelines (WCAG) empfohlen, um die Navigation in Dokumenten zu verbessern.

Leider sind sie in E-Mails schwierig zu verwenden, da sie oft visuelle Inkonsistenzen erzeugen.

In E-Mails verwenden wir daher role='heading' und aria-level Attribute, um die visuelle Darstellung Ihrer E-Mail nicht zu beeinträchtigen und gleichzeitig die Barrierefreiheit zu maximieren.

Wählen Sie im Designer das betreffende Textelement aus und definieren Sie dann dessen Überschriftenebene mit dem dafür vorgesehenen Feld.

Zusätzliche Informationen finden Sie auf der W3C-Website.

Die Möglichkeit, E-Mails mit der Tastatur zu navigieren, ist ein entscheidender Aspekt der Barrierefreiheit. Der Email Builder generiert den benötigten Code, um Benutzern visuelles Feedback zur Tastaturnavigation zu geben, ohne die Erfahrung von Mausbenutzern zu beeinträchtigen.

Bei der Verwendung der Tastaturnavigation wird ein violetter Rahmen um klickbare Elemente angezeigt.

Die Tastaturnavigation wird in diesen beiden Artikeln erläutert:

• Artikel W3C
• Artikel Webaim

Durch die Verwendung von Attributen wie aria-hidden='true' oder role='presentation' wird in den E-Mails den Hilfstechnologien angezeigt, welche Elemente ignoriert werden sollen, da sie inhaltlich nichts zu der Nachricht beitragen.

Diese Praxis, die guten Barrierefreiheitsmaßnahmen für Webanwendungen entspricht, kann auf E-Mails übertragen werden:

Zusätzliche Informationen finden Sie auf der Mozilla-Website.

Entsprechend den WCAG-Empfehlungen sollte das target='_blank' Attribut mit Bedacht verwendet werden, um Benutzer nicht zu verwirren.

Eine sinnvolle Verwendung wäre, diese Funktion für ausgehende Links in Ihrer Umgebung zu reservieren (z.B. Links zu sozialen Netzwerken, Links zu einer anderen Website, etc.).

Barrierefreiheit ist ein sich ständig weiterentwickelndes Feld, und obwohl wir noch nicht alles automatisieren können, ist es entscheidend, dass Sie aktiv an diesem Prozess teilnehmen, indem Sie die auf unserer Plattform verfügbaren Tools nutzen.

Die Verbesserung der Barrierefreiheit ist ein fortlaufender Prozess, und wir verpflichten uns, unsere Plattform weiterhin zu aktualisieren, um das Web immer inklusiver zu machen.

Und das ist noch nicht alles. Barrierefreiheit ist auch eine Frage des Designs und der Gestaltung. Lesen Sie dazu auch unseren Blog-Artikel zur Barrierefreiheit im E-Mail-Marketing.