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, müssen wir HTML-Tabellen (<table>) für das Seitenlayout verwenden. 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 Ihnen zu helfen, die Erfahrung für alle Ihre Leser zu verbessern: 

Der Email Builder erkennt automatisch die Sprache Ihrer E-Mail und fügt sie dem generierten E-Mail-Code hinzu.

Diese Funktion hilft Hilfstechnologien (zum Beispiel: Sprachsynthese), den Inhalt besser zu interpretieren.

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

Um mehr zu erfahren, finden Sie zusätzliche Informationen 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 Ihr Textelement aus und definieren Sie dann dessen Überschriftenebene mit dem dafür vorgesehenen Feld.

Um mehr zu erfahren, finden Sie zusätzliche Informationen auf der W3C-Website.

Die Möglichkeit, E-Mails mit der Tastatur zu navigieren, ist ein entscheidender Aspekt der Barrierefreiheit. Wir generieren 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 zeigen wir einen violetten Rahmen um klickbare Elemente an.

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' zeigen wir Hilfstechnologien an, welche Elemente ignoriert werden sollen, da sie nicht zur Bedeutung der Nachricht beitragen.

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

Um mehr zu erfahren, finden Sie zusätzliche Informationen auf der Mozilla-Website.

Wir empfehlen, das target='_blank' Attribut vorsichtig zu verwenden, um Benutzer nicht zu verwirren, entsprechend den WCAG-Empfehlungen.

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 verstehen und 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.