Leitfaden zu Best Practices für die Barrierefreiheit in E-Mails und Formularen
Übersicht
Hier erfährst du, wie du deine E-Mails und Anmeldeformulare barrierefreier gestalten kannst. Wenn du deine E-Mails und Anmeldeformulare gestaltest, solltest du sicherstellen, dass deine Designs für alle Empfänger*innen barrierefrei sind.
Barrierefreiheit in E-Mails
Betreff und Vorschautext optimieren
Gestalte deinen Betreff und Vorschautext beschreibend, ansprechend und kurz.
Allgemeine Best Practices für E-Mail-Design befolgen
Wenn du die allgemeinen Best Practices für E-Mail-Design befolgst, werden deine E-Mails barrierefreier:
- Füge all deinen Bildern Alternativtext hinzu.
- Vermeide E-Mails, die nur Bilder enthalten.
- Vermeide es, Bilder zu verwenden, um wichtige Details zu vermitteln.
- Verwende stark kontrastierende Farben (z. B. Weiß und Schwarz, Grau und Dunkelblau, Pink und Dunkelrot).
- Verwende Überschriften, um Ideen zu trennen.
- Verwende beschreibende Links (z. B. „Zur Kollektion shoppen“ statt „Hier klicken, um zur Kollektion zu gelangen“).
- Strukturiere deine E-Mails logisch.
Unten siehst du ein Beispiel für eine E-Mail, die für alle Empfänger*innen optimiert ist (links), und eine, die es nicht ist (rechts).
Barrierefreiheit in Anmeldeformularen
Klaviyo optimiert Anmeldeformular automatisch für Barrierefreiheit. Ein auf deiner Website veröffentlichtes Klaviyo-Formular ermöglicht es Website-Besucher*innen, vollständig mit Tastatur und Screenreader durch das Formular zu navigieren. Außerdem können Website-Besucher*innen ein Formular mit der Escape-Taste schließen und mit der Eingabetaste absenden. Du kannst eine Fokus-Umrissfarbe hinzufügen, die sich im Tab Stile im Formulareditor befindet, damit Nutzer*innen erkennen können, welches Feld beim Navigieren mit der Tabulatortaste hervorgehoben ist.
Design des Anmeldeformulars
Genau wie beim E-Mail-Design solltest du einige grundlegende Richtlinien befolgen, damit alle Empfänger*innen über deine Formulare die Informationen erhalten, die du mit ihnen teilen möchtest. Beim Erstellen von Formularen:
- Verwende kontrastreiche Farben.
- Vermeide es, wichtige Informationen in Bildern unterzubringen
- In Links eine beschreibende Sprache verwenden
- Strukturiere deine Formulare logisch.
Während du deine Anmeldeformulare erstellst, überwacht Klaviyo eine Reihe von Barrierefreiheitsproblemen und fordert dich auf, alle erkannten Probleme im Tab Formularbenachrichtigungen zu beheben.
Weitere Infos findest du unter So erstellst du ein ADA-konformes Anmeldeformular. Dort erfährst du mehr darüber, wie du barrierefreie Anmeldeformulare im Klaviyo-Formulareditor erstellst.
Unten siehst du ein Beispiel für ein gut gestaltetes Formular (rechts) und ein Formular, das nicht für alle zugänglich ist (links).
