Barrierefreiheit in E-Mails und Formularen Best Practice Referenz

Geschätzt 3 Lesedauer in Minuten
|
Aktualisiert 23. Sept. 2024, 10:29 EST
Du wirst lernen

Du wirst lernen

Lerne, wie du deine E-Mail und dein Anmeldeformular zugänglicher machen kannst. Wenn du dein E-Mail- und Anmeldeformular gestaltest, solltest du darauf achten, dass deine Designs für alle Empfänger/innen zugänglich sind. Auch wenn die Zeit, die du dir für die zusätzliche Arbeit nimmst, als lästig erscheinen mag, wird sie sich für die Millionen von Menschen, die mit einer Behinderung auf der Welt leben, enorm auszahlen. 

Barrierefreiheit in E-Mails

Barrierefreiheit in E-Mails

Betreff und Vorschautext optimieren

Betreff und Vorschautext optimieren

Wenn du dir bei deinem Betreff und dem Vorschautext besonders viel Mühe gibst, wird deine E-Mail nicht nur leichter zugänglich, sondern wirkt sich auch auf deine Öffnungsrate aus. Dein Betreff und dein Vorschautext sollten beschreibend, verlockend und kurz sein.

Grundlegendes E-Mail-Design

Grundlegendes E-Mail-Design

Genau wie bei Betreff gilt: Wenn du die Best Practices für das Design deiner E-Mail befolgst, machst du auch deine E-Mail zugänglicher. Dazu gehört, dass du alle Bilder mit einem Alt-Text versiehst, keine reinen Bild-E-Mails verschickst, kontrastreiche Farben verwendest (z. B. weiß und schwarz, grau und dunkelblau, rosa und dunkelrot), Überschriften zur Trennung von Ideen verwendest, beschreibende Links verwendest (z. B. "Shop the collection" statt "Click here to go to the collection") und deine E-Mail logisch strukturierst. Mit diesen Best Practices stellst du sicher, dass alle deine Kunden deine Nachrichten erhalten und dass du auch den Posteingang erreichst.

Checkliste und Beispiel

Checkliste und Beispiel

  1. Schreibe Betreffs und Vorschautexte, die beschreibend, kurz und auf den Punkt sind.
  2. Füge einen Alt-Text zu allen Bildern hinzu.
  3. Vermeide es, sachdienliche Informationen in Bilder einzubauen.
  4. Verwende kontrastierende Farben.
  5. Verwende Überschriften, um Ideen zu trennen.
  6. Verwende beschreibende Sprache in Links.
  7. Gestalte die E-Mail in einer logischen Struktur.

Unten siehst du ein Beispiel für eine E-Mail, die für alle Empfänger optimiert ist (links) und eine, die das nicht ist (rechts).

Ein Beispiel für Barrierefreiheit in E-Mails

Barrierefreiheit im Anmeldeformular

Barrierefreiheit im Anmeldeformular

Zum Glück macht es der Code hinter deinem Klaviyo Anmeldeformular möglich, dass alle deine Empfängerinnen und Empfänger die Informationen, die sie brauchen, durchsehen können. Ein Klaviyo-Formular, das du auf deiner Website veröffentlichst, ermöglicht es den Website-Besucherinnen und -Besuchern automatisch, das Formular vollständig über die Tastatur zu bedienen, und Screenreader können die Formulare lesen. Außerdem können Website-Besucher ein Formular mit der Escape-Taste schließen und mit der Enter-Taste abschicken. Außerdem kannst du im Formular-Editor auf der Registerkarte " Formatvorlagen" eine Umrissfarbe hinzufügen , damit die Nutzer/innen wissen, welches Feld beim Durchblättern des Formulars hervorgehoben ist.

Anmeldeformular-Design

Anmeldeformular-Design

Genau wie beim E-Mail-Design solltest du einige grundlegende Richtlinien befolgen, um sicherzustellen, dass alle deine Empfänger die Informationen erhalten, die du ihnen über deine Formulare mitteilen möchtest. Wenn du Formulare entwirfst, verwende kontrastreiche Farben, vermeide es, relevante Informationen in Bildern unterzubringen, verwende beschreibende Sprache in Links und baue deine Formulare logisch auf. Während du dein Anmeldeformular erstellst, überwacht Klaviyo eine Reihe von Problemen mit der Barrierefreiheit und fordert dich auf, alle erkannten Probleme auf der Registerkarte Formularwarnungen zu beheben. 

Unter "Wie erstelle ich ein ADA-freundliches Anmeldeformular?" erfährst du mehr über die Erstellung barrierefreier Anmeldeformulare im Klaviyo form editor. 

Unten siehst du ein Beispiel für ein gut gestaltetes Formular (rechts) und ein Formular, das nicht für alle zugänglich ist (links). 

Ein Beispiel für Barrierefreiheit im Anmeldeformular.

Zusätzliche Ressourcen

Zusätzliche Ressourcen

War dieser Artikel hilfreich?
Nutze dieses Formular nur für Feedback zu Artikeln. So kontaktierst du den Support.

Mehr von Klaviyo entdecken

Community
Vernetze dich mit Kolleg*innen, Partner*innen und Klaviyo-Expert*innen, um dich inspirieren zu lassen, Erkenntnisse auszutauschen und Antworten auf deine Fragen zu erhalten.
Live-Schulung (EN) ↗
Nimm an einer Live-Sitzung mit Klaviyo-Expert*innen teil, um mehr über Best Practices, die Einrichtung wichtiger Funktionen und mehr zu erfahren.
Support

Kontaktiere den Support über dein Konto.

Support per E-Mail (kostenlose Testversion und kostenpflichtige Konten) Verfügbar 24/7

Chat- / virtuelle Unterstützung
Verfügbarkeit abhängig von Standort und Abonnementtyp