Skip to content

Barrierefreie Nachrichten in Braze erstellen

Erfahren Sie, warum Barrierefreiheit in Ihren Marketinginhalten wichtig ist und wie Sie barrierefreie Nachrichten in Braze erstellen können. Weitere Informationen finden Sie in unserem Kurs Accessible Messaging Foundations auf Braze Learning.

Marketinginhalte, die Menschen mit Behinderungen ausschließen – selbst unbeabsichtigt – können Millionen von Menschen daran hindern, mit Ihrer Marke zu interagieren. Barrierefreiheit im Marketing bedeutet, allen Menschen zu ermöglichen, Ihr Marketing zu erleben, Ihre Kommunikation zu verstehen und die Möglichkeit zu haben, in Ihr Produkt, Ihren Dienst oder Ihre Marke zu investieren oder ein Fan davon zu werden.

Nehmen Sie sich beim Entwerfen Ihrer Nachrichten die zusätzliche Zeit, um zu überlegen, wie Sie Ihre Designs für alle Ihre Kund:innen zugänglich machen können.

Barrierefreiheit bei Braze

Barrierefreie Kommunikation zu unterstützen bedeutet, offen, neugierig und lernbereit zu bleiben. Bei Braze liegt uns daran, Menschen miteinander zu verbinden – und wir wissen, dass es dazugehört, Raum für alle zu schaffen. Barrierefreiheit ist für uns nie „abgeschlossen“, und wir freuen uns über jede Gelegenheit, weiter dazuzulernen.

Wenn Sie Feedback zur Zugänglichkeit von Braze oder zu den von Braze gesendeten Nachrichten haben, würden wir uns freuen, von Ihnen zu hören. Öffnen Sie das Menü Support in der globalen Kopfzeile und wählen Sie Share feedback, um uns Ihre Meinung mitzuteilen.

Zu berücksichtigende Bereiche von Behinderungen

Dieser Abschnitt ist teilweise adaptiert von W3C: Diverse Abilities and Barriers.

Visuelle Behinderungen können von leichtem oder mäßigem Sehverlust in einem oder beiden Augen bis hin zu erheblichem oder vollständigem Sehverlust in beiden Augen reichen. Manche Menschen haben eine verminderte oder fehlende Empfindlichkeit gegenüber bestimmten Farben oder eine erhöhte Empfindlichkeit gegenüber hellen Farben.

Um mit Ihren Inhalten zu interagieren, benötigen diese Nutzer:innen die Möglichkeit:

  • Textgröße und Bilder zu vergrößern oder zu verkleinern
  • Einstellungen für Schriftarten, Farben und Abstände anzupassen
  • Sich den Inhalt per Text-to-Speech-Synthese vorlesen zu lassen (d. h. einen Screenreader zu verwenden)
  • Audiobeschreibungen von Videos anzuhören
  • Text mithilfe einer aktualisierbaren Braillezeile zu lesen

Hör- oder auditive Behinderungen können leichte bis mäßige Hörbeeinträchtigungen in einem oder beiden Ohren umfassen. Selbst ein teilweiser Hörverlust kann bei Audioinhalten problematisch sein.

Um Ihre Inhalte zu verstehen, sind diese Nutzer:innen angewiesen auf:

  • Transkripte und Untertitel von Audioinhalten
  • Mediaplayer, die Untertitel anzeigen und Optionen zur Anpassung von Textgröße und Farben der Untertitel bieten
  • Optionen zum Stoppen, Pausieren und Anpassen der Lautstärke von Audioinhalten (unabhängig von der Systemlautstärke)
  • Hochwertige Vordergrund-Audioinhalte, die klar von Hintergrundgeräuschen unterscheidbar sind

Körperliche Behinderungen können Schwäche und Einschränkungen der Muskelkontrolle oder -empfindung, Gelenkerkrankungen, Schmerzen, die die Bewegung behindern, sowie fehlende Gliedmaßen umfassen.

Diese Nutzer:innen sind auf Tastaturunterstützung angewiesen, um Funktionen zu aktivieren (auch wenn sie keine Standardtastatur verwenden). Um mit Ihren Inhalten zu interagieren, benötigen diese Nutzer:innen:

  • Große klickbare Bereiche
  • Ausreichend Zeit, um Aufgaben abzuschließen
  • Sichtbare Indikatoren für den aktuellen Fokus
  • Mechanismen zum Überspringen von Inhaltsblöcken, wie Seitenüberschriften oder Navigationsleisten

Kognitive, lernbezogene und neurologische Behinderungen umfassen Neurodiversität und neurologische Störungen sowie Verhaltens- und psychische Gesundheitsstörungen, die nicht unbedingt neurologischer Natur sind. Sie können jeden Teil des Nervensystems betreffen und beeinflussen, wie gut Menschen hören, sich bewegen, sehen, sprechen und Informationen verstehen.

Je nach individuellen Bedürfnissen sind diese Nutzer:innen angewiesen auf:

  • Klar strukturierte Inhalte
  • Einheitliche Beschriftung von Formularen, Buttons und anderen Inhalten
  • Vorhersehbare Linkziele und insgesamt vorhersehbare Interaktion
  • Verschiedene Navigationsmöglichkeiten, wie Menüs und Suchleisten
  • Einstellungen zum Deaktivieren von blinkenden, blitzenden oder anderweitig ablenkenden Inhalten
  • Einfacheren Text, der durch Bilder unterstützt wird

Best Practices

Barrierefreie Inhalte zu erstellen muss nicht überwältigend sein. Kleine, durchdachte Entscheidungen können einen großen Unterschied machen. Dieser Abschnitt führt Sie durch praktische Tipps, die mehr Menschen dabei helfen, Ihre Nachrichten erfolgreich zu lesen, zu navigieren und mit ihnen zu interagieren. Ob Sie Ihren Text anpassen, Ihre Buttons gestalten oder Alt-Text zu Bildern hinzufügen – jede Verbesserung trägt zu einem inklusiveren Erlebnis bei. Legen wir los.

Inhalt

Struktur und Aufbau

Beginnen wir mit dem Fundament. Wenn Ihr Inhalt eine klare Struktur hat, ist er für alle leichter zu verfolgen – besonders für Menschen, die auf Screenreader oder Tastaturnavigation angewiesen sind.

  • Gliedern Sie Ihren Inhalt in Abschnitte: Überschriften, Aufzählungszeichen und Listen helfen Menschen, Ihren Inhalt schnell zu verstehen und zu überfliegen – auch wenn sie es eilig haben.
  • Überspringen Sie keine Überschriftenebenen: Überschriften geben Ihrem Inhalt Struktur und helfen Leser:innen, schnell zu verstehen, wie Abschnitte zusammenhängen. Wenn Sie Überschriftenebenen überspringen (zum Beispiel direkt von einer H2 zu einer H4 springen), brechen Sie diese logische Struktur auf. Das erschwert es Nutzer:innen, insbesondere denjenigen, die Screenreader verwenden, Ihre Nachricht zu navigieren und klar zu verstehen. Folgen Sie immer einer logischen, sequenziellen Hierarchie von Überschriften (H1 zu H2 zu H3 usw.), um sicherzustellen, dass Ihr Inhalt organisiert, barrierefrei und für alle leicht zu verfolgen bleibt.

Lesbarkeit

Sobald Ihre Struktur steht, ist der nächste Schritt sicherzustellen, dass Ihre Worte tatsächlich leicht zu lesen sind. Das bedeutet, Dinge einfach, übersichtlich und komfortabel lesbar über verschiedene Geräte und Nutzerbedürfnisse hinweg zu halten.

  • Schreiben Sie kurze, klare Sätze: Kurze Sätze sind für alle leicht zu verstehen, besonders für Menschen, die Screenreader verwenden oder Schwierigkeiten haben, komplexe Informationen zu verarbeiten. Schreiben Sie auf einem Leseniveau der siebten Klasse (US-Standard). Sie können Ressourcen wie die Hemingway App verwenden, um das Leseniveau Ihres Textes zu prüfen.
  • Wählen Sie lesbare Schriftgrößen und Abstände: Text, der zu klein ist, kann schwer zu lesen sein – besonders auf Mobilgeräten. Verwenden Sie mindestens 14px für Fließtext. Machen Sie Überschriften größer, damit Nutzer:innen den Unterschied klar erkennen können. Zusätzlicher Zeilenabstand (etwa 1,5-fache Zeilenhöhe) und Absatzabstände verbessern die Lesbarkeit, besonders für Menschen mit visuellen oder kognitiven Bedürfnissen.
  • Vermeiden Sie Blocksatz: Blocksatz erzeugt ungleichmäßige Abstände zwischen Wörtern, was das Lesen für Menschen mit Legasthenie oder kognitiven Beeinträchtigungen erschwert. Erwägen Sie, Inhalte, die über mehr als zwei Zeilen umbrechen, für Links-nach-rechts-Sprachen linksbündig oder für Rechts-nach-links-Sprachen rechtsbündig auszurichten.
  • Verwenden Sie Fett, Kursiv und Großbuchstaben sparsam: Zu viel hervorgehobener Text erschwert das Lesen – besonders für Menschen mit Legasthenie oder Sehbeeinträchtigungen. Halten Sie es einfach.

Klarheit und Benutzerfreundlichkeit

Zum Schluss sprechen wir über die feineren Details – die Dinge, die Nutzer:innen helfen, Ihren Inhalt nicht nur zu sehen, sondern auch zu verstehen und damit zu interagieren.

  • Beschriften Sie Links und Buttons klar: Stellen Sie sicher, dass Ihre Link-Hinweise und Button-Texte klar erklären, was als Nächstes passiert. Das hilft Menschen, die Screenreader verwenden oder mit der Tastatur navigieren, zu wissen, was sie erwartet.
  • Gehen Sie sparsam mit Symbolen und Emojis um: Sonderzeichen und Emojis können Ihren Inhalt verspielt machen, aber sie können verwirrend sein, wenn sie von Screenreadern vorgelesen werden. Verwenden Sie sie sparsam und stellen Sie sicher, dass sie keinen klaren, beschreibenden Text ersetzen.
  • Testen Sie auf Textabschneidung: Testen Sie Ihren Text immer, indem Sie eine Testnachricht senden, um sicherzustellen, dass Ihr Text nicht abgeschnitten wird. Wenn Ihre Nachricht abgeschnitten wird, schadet das sowohl Ihnen als auch Ihrer Zielgruppe, da Ihr Inhalt sie nicht vollständig erreicht.

Barrierefreiheitssprache

Die Barrierefreiheitssprache teilt Screenreadern und anderen assistiven Technologien mit, in welcher Sprache Ihr Inhalt verfasst ist. Für Kanäle, die eine vollständige HTML-Seite oder E-Mail senden, kann Braze ein Sprach-Tag (lang) hinzufügen, wenn Sie es im Editor oder über Liquid festlegen. Das unterstützt das WCAG 2.1 Erfolgskriterium 3.1.1 Sprache der Seite (Stufe A).

Wenn Sie die Barrierefreiheitssprache leer lassen und kein sicherer Standardwert verfügbar ist, lässt Braze das Sprach-Tag weg. Wenn keine Sprache festgelegt ist, greifen assistive Technologien oft auf die Telefon- oder Computersprache der Person zurück. Wenn diese von der Nachrichtensprache abweicht, kann die Aussprache falsch klingen.

Campaigns und Canvases verwenden dieselben Editoren für diese Optionen, es sei denn, ein Feature ist für Ihren Workspace nicht verfügbar.

Barrierefreiheitssprache konfigurieren

Wenn Ihr Editor diese Option enthält, gehen Sie zum Abschnitt Barrierefreiheit in den Nachrichteneinstellungen. Wählen Sie eine Sprache aus dem Dropdown oder verwenden Sie Liquid (zum Beispiel {{accessibility_language}}, wenn mehrsprachige Nachrichten aktiviert sind und die Lokalisierungseinstellungen festgelegt sind).

Mehrsprachige Nachrichten

Legen Sie in den Lokalisierungseinstellungen eine Barrierefreiheitssprache für jedes Gebietsschema fest, damit Liquid {{accessibility_language}} für lokalisierte Sendungen ausfüllen kann. Ob dieser Wert für neue Nachrichten bereits vorausgewählt ist, hängt vom Kanal ab. Für CSV- und Übersetzungs-Workflows beginnen Sie mit Spracheinstellungen und Barrierefreiheit.

Kanal- und Editor-Unterstützung

Verwenden Sie diese Tabelle, um Kanäle zu vergleichen. Standardwerte können sich unterscheiden, also überprüfen Sie stichprobenartig, was Ihre Zielgruppe tatsächlich erhält.

Kanal Wissenswertes
E-Mail (Drag-and-Drop, vollständiges Template) Legen Sie die Sprache im Editor fest. Mit mehrsprachigen Nachrichten kann ein vollständiges E-Mail-Template die Sprache jedes Gebietsschemas automatisch zuordnen. Wenn Sie nur Content Blocks (einzelne Zeile) verwenden, funktionieren diese Abkürzungen nicht auf die gleiche Weise – wählen Sie die Sprache selbst, wo der Editor es erlaubt.
E-Mail (HTML-Code) Braze fügt kein Sprach-Tag für Sie hinzu. Fügen Sie es in Ihrem HTML hinzu, wenn Sie es benötigen.
In-App-Nachrichten (Drag-and-Drop) Wenn Sie eine Sprache unter Barrierefreiheit auswählen, fügt Braze diese Sprache dem äußeren HTML der Nachricht hinzu, sodass Screenreader die gesamte Nachricht als diese Sprache behandeln. Wenn mehrsprachige Nachrichten aktiviert sind, können neue Nachrichten standardmäßig auf Ihre Gebietsschema-Sprachen eingestellt sein. Die Vorschau zeigt möglicherweise keine Sprache an, bis Sie eine unter Einstellungen auswählen.
Banner Gleiches Verhalten wie bei In-App-Nachrichten.
Landing-Pages Sie können die Sprache auf der Live-Seite festlegen. Wählen Sie eine Sprache oder verwenden Sie Liquid, wenn Ihr Konto Liquid auf Landing-Pages erlaubt. Standardwerte unterscheiden sich auch von In-App-Nachrichten und Bannern – überprüfen Sie die veröffentlichte Seite.
Content Cards Cards verwenden ein Sprache-Feld für Apps anstelle einer expliziten Barrierefreiheitssprache.

Wenn Sie HTML selbst schreiben, können Sie trotzdem ein Sprach-Tag für einen Teil der Nachricht hinzufügen (zum Beispiel einen Satz in einer anderen Sprache). Weitere Muster finden Sie unter Benutzerdefiniertes HTML.

Standardreferenz

Wenn Braze ein Sprach-Tag auf Root-Ebene zu HTML hinzufügt, folgt es der HTML-Regel lang. Testtools suchen oft nach html-has-lang. Content Cards verwenden Ihr Sprache-Feld anstelle dieses HTML-Musters.

Buttons

Verwenden Sie Buttons, um eine Aktion anzuzeigen, wie das Absenden eines Formulars oder das Abspielen eines Karussells. Wenn Sie zu einer neuen URL navigieren, erwägen Sie stattdessen einen Link-Hinweis.

Schreiben Sie klaren, handlungsorientierten Text

Ähnlich wie bei Linktexten sollten Button-Beschriftungen die Aktion klar beschreiben. Effektiver Button-Text ist spezifisch und handlungsorientiert. Zum Beispiel sagt „Bestellung absenden“ den Nutzer:innen klar, was passiert, wenn sie klicken, während einfach „Absenden“ mehrdeutig sein kann. Jede Beschriftung sollte die beabsichtigte Aktion präzise beschreiben, damit Screenreader und alle Nutzer:innen das Ergebnis leicht verstehen und vorhersagen können, wenn sie mit Ihren Buttons interagieren.

Halten Sie Button-Texte kurz, um Abschneidung zu vermeiden. Wenn der Text eines Buttons zu lang ist, wird er möglicherweise mit Auslassungspunkten abgeschnitten, anstatt umzubrechen.

Verwenden Sie ausreichenden Farbkontrast

Button-Text muss vor der Hintergrundfarbe des Buttons gut lesbar sein. Stellen Sie sicher, dass Ihr Button-Text die WCAG 2.2 AA Kontrastminima erfüllt:

  • 4,5:1 Kontrastverhältnis für normalgroßen Text (die meisten Buttons)
  • 3:1 Kontrastverhältnis für großen Text (typischerweise 18pt oder größer)

Hoher Kontrast hilft, dass Buttons für alle lesbar und klickbar bleiben, einschließlich Nutzer:innen mit Sehbeeinträchtigungen oder solchen, die Ihre Nachricht unter schwierigen Bedingungen betrachten. Weitere Hinweise finden Sie im Abschnitt Farbkontrast.

Machen Sie Buttons leicht antippbar

Stellen Sie sicher, dass Ihre Buttons (und Links) groß genug sind und weit genug voneinander entfernt liegen, damit Nutzer:innen auf Mobilgeräten sie leicht bedienen können. Kleine oder eng beieinanderliegende Touch-Ziele können für Nutzer:innen mit motorischen Beeinträchtigungen frustrierend oder unmöglich zu bedienen sein.

Verwenden Sie Links zur Navigation, zum Beispiel um Nutzer:innen auf eine externe Seite zu leiten.

Schreiben Sie beschreibenden Linktext

Schreiben Sie Linktexte, die klar beschreiben, wohin der Link die Nutzer:innen führt. Screenreader-Nutzer:innen springen oft von Link zu Link, um Inhalte zu überfliegen, also stellen Sie sicher, dass Ihr Linktext für sich allein stehen kann. Vermeiden Sie Formulierungen wie „hier klicken“, „mehr“ und „für Details klicken“, da sie ohne Kontext mehrdeutig sind.

Überlegen Sie zum Beispiel, wie Sie einen Link zu einem Wetterbericht formulieren könnten.

Schlecht Besser Am besten
Hier klicken Hier klicken, um den heutigen Wetterbericht aufzurufen Heutiger Wetterbericht

Wie bei allen Inhalten: Halten Sie es unkompliziert mit so wenig überflüssigen Wörtern wie möglich.

Die Drag-and-Drop-Editoren von Braze geben standardmäßig semantisches HTML aus, sodass Links dort nicht wie Buttons gestaltet werden. Wenn Sie jedoch mit benutzerdefiniertem HTML arbeiten oder Änderungen auf Code-Ebene vornehmen, beachten Sie Folgendes:

  • Links (<a>) reagieren auf die Enter-Taste.
  • Buttons (<button>) reagieren sowohl auf die Enter- als auch auf die Leertaste.

Einen Link so zu gestalten, dass er wie ein Button aussieht, kann Menschen verwirren, die mit der Tastatur navigieren – sie könnten versuchen, die Leertaste zu drücken und erwarten, dass es funktioniert.

Verwenden Sie das richtige Element für die Aktion:

  • Verwenden Sie <button> für Aktionen, wie das Absenden eines Formulars oder das Öffnen eines Modals.
  • Verwenden Sie <a> für Navigation, wie das Verlinken auf eine andere Seite oder Datei.
1
2
3
4
5

<!-- Recommended: A true button for an action -->
<button type="button">Download report</button>

<!-- Not recommended: A link styled as a button -->
<a href="#" class="btn">Download report</a>

Touch-Ziele

Touch-Ziele sind alle Teile Ihrer Nachricht, die Nutzer:innen antippen, um eine Aktion auszuführen, wie Buttons, Links oder Symbole. Diese Elemente müssen groß genug sein und weit genug voneinander entfernt liegen, damit Menschen sie leicht antippen können, besonders auf Mobilgeräten.

Wenn Touch-Ziele zu klein oder zu nah beieinander sind, kann es für Nutzer:innen mit Mobilitäts- oder Geschicklichkeitseinschränkungen frustrierend oder unmöglich sein, mit Ihrer Nachricht zu interagieren. Eine Verbesserung kann dazu beitragen, Fehler zu reduzieren und ein reibungsloseres Erlebnis für alle zu schaffen.

Hier ist, worauf Sie achten sollten:

  • Verwenden Sie eine angemessene Touch-Ziel-Größe. Streben Sie eine Mindestgröße von 44 x 44 Pixeln für Touch-Ziele an. Dies entspricht den WCAG 2.2 Richtlinien für Touch-Ziele und gängigen Standards für mobile Benutzerfreundlichkeit.
  • Geben Sie jedem Ziel Freiraum. Wenn Tipp-Ziele zu nah beieinander liegen – wie gestapelte Links oder eng gruppierte Buttons – kann es leicht passieren, dass man daneben tippt oder das falsche Element trifft. Fügen Sie Abstände oder Padding zwischen Elementen hinzu, um das zu verhindern.
  • Verlassen Sie sich nicht nur auf visuelle Darstellung. Auch kleine Symbole können durch zusätzliches Padding benutzerfreundlicher gemacht werden, sodass sie die Mindestgrößenanforderungen erfüllen, ohne das Layout zu verändern.
  • Vorschau auf Mobilgeräten. Testen Sie Ihre Nachricht auf verschiedenen Bildschirmgrößen und stellen Sie sicher, dass interaktive Elemente leicht zu bedienen sind.

Die Verbesserung von Touch-Zielen ist eine der effektivsten Möglichkeiten, Ihre Nachricht auf Mobilgeräten barrierefreier zu machen – und es ist gute UX für alle.

Bilder

Alt-Text bereitstellen

Alternativer Text (Alt-Text) ist eine kurze Beschreibung des Inhalts oder der Funktion eines Bildes, die Screenreader und andere assistive Technologien den Nutzer:innen bereitstellen. Schreiben Sie für jedes bedeutungsvolle Bild beschreibenden Alt-Text, damit Nutzer:innen, die die visuellen Inhalte nicht sehen können, Ihre Nachricht oder Ihren Handlungsaufruf trotzdem verstehen.

Vermeiden Sie Bilder mit Text

Vermeiden Sie es nach Möglichkeit, Text in Bilder einzubetten – Screenreader können bildbasierten Text nicht lesen, und Nutzer:innen können Schriftgröße oder -farbe nicht einfach für bessere Sichtbarkeit anpassen. Beachten Sie diese Tipps:

  • Entfernen Sie Text, wo Sie können: Verschieben Sie beschreibenden oder werblichen Text aus dem Bild in ein Textfeld in Ihrer Nachricht. So können Nutzer:innen ihn nach Bedarf mit ihren Geräte- oder Browsereinstellungen vergrößern oder umfärben.
  • Testen Sie auf Lesbarkeit und Kontrast: Wenn Sie Text im Bild behalten müssen, befolgen Sie die Best Practices für Farbkontrast und verwenden Sie eine große Schriftgröße. Das bedeutet, dass Text mindestens 18 Punkt (etwa 24 Pixel) für nicht-fetten Text oder 14 Punkt (etwa 18 Pixel) für fetten Text betragen sollte. Diese Größen helfen, dass Text ohne Zoomen lesbar bleibt, und verbessern den Gesamtkontrast und die Lesbarkeit des Inhalts. Testen Sie, ob er auf kleineren Bildschirmen noch lesbar ist.
  • Stellen Sie Alt-Text bereit: Für wesentlichen Text, der im Bild bleiben muss, fügen Sie Alt-Text hinzu, der die Worte beschreibt.

Wenn Bilder Text enthalten, der nicht bearbeitet werden kann, verlieren Nutzer:innen mit Sehbeeinträchtigungen die Flexibilität, Leseanpassungen vorzunehmen. Indem Sie Text von Bildern trennen, helfen Sie mehr Nutzer:innen, Ihre Nachricht komfortabel zu lesen und damit zu interagieren.

Tipps zum Schreiben von Alt-Text

Beschreiben Sie, was tatsächlich im Bild zu sehen ist

Screenreader-Nutzer:innen verlassen sich auf Alt-Text, um den Inhalt oder die Funktion eines Bildes zu verstehen. Vermeiden Sie generische „Marketing-Sprache“, die nicht dem entspricht, was visuell gezeigt wird.

Halten Sie es kurz, aber spezifisch

Prägnanter Alt-Text erleichtert es Nutzer:innen, ihn zu verarbeiten. Fügen Sie genug Details hinzu, um den Zweck zu vermitteln, aber lassen Sie Überflüssiges weg. Als Faustregel gilt: Halten Sie Alt-Text auf 125 Zeichen oder weniger. Wenn mehr als ein kurzer Satz nötig ist, erwägen Sie eine der Methoden für lange Beschreibungen von W3C.

Vermeiden Sie „Bild von“ oder „Foto von“

Screenreader kündigen ein Bild bereits an. Beginnen Sie direkt mit der Beschreibung des Motivs.

Geben Sie Text wieder, der im Bild erscheint

Wenn ein Bild wesentlichen Text enthält, nehmen Sie diese Information in den Alt-Text auf, damit Nutzer:innen sie nicht verpassen.

Bleiben Sie beim relevanten Kontext – kein zusätzlicher Marketing-Jargon

Füllen Sie Alt-Text nicht mit SEO-Begriffen oder Handlungsaufforderungen auf, die nicht direkt mit dem Bild zusammenhängen. Bieten Sie Mehrwert für diejenigen, die das Bild nicht sehen können.

Berücksichtigen Sie den Zweck des Bildes

Wenn ein Bild als Link oder Handlungsaufforderung fungiert, beschreiben Sie die beabsichtigte Aktion („Einkaufen“, „Link zu“, „Anmelden“), nicht nur das Label oder das gezeigte Produkt.

Wenn das Bild keinen Zweck hat, machen Sie auch das deutlich. Dekorative Bilder, wie Logos, sollten ein leeres Alt-Tag (alt="") haben, damit Screenreader wissen, dass sie es überspringen können. Ohne dieses wird normalerweise stattdessen der Bilddateiname vorgelesen.

Wie E-Mail-Clients Alt-Text anzeigen

Die Anzeige und Darstellung von Alt-Text in E-Mail-Nachrichten wird vom E-Mail-Client der Empfänger:innen (wie Gmail, Outlook oder Apple Mail) gesteuert, nicht von Braze. Wenn Sie Unterschiede in der Darstellung von Alt-Text in verschiedenen E-Mail-Clients oder Plattformen bemerken – zum Beispiel Alt-Text, der in Gmail auf dem Desktop anders angezeigt wird als in der Gmail-Mobil-App – liegt das daran, wie jeder Client dasselbe HTML rendert.

Sie können Alt-Text beliebiger Länge in Ihr E-Mail-HTML einfügen, aber einige E-Mail-Clients können Alt-Text abschneiden oder ausblenden, der zu lang ist, um in die Abmessungen des Bildes zu passen. Wenn Sie Fragen zum Verhalten von Alt-Text in einem bestimmten E-Mail-Client haben, wenden Sie sich an den Support.

Videos

Videos sind ansprechend, aber wenn sie nicht barrierefrei sind, riskieren Sie, einen Teil Ihrer Zielgruppe auszuschließen. Verwenden Sie die folgenden Tipps, um Ihre Videoinhalte inklusiver zu gestalten:

Stellen Sie Untertitel bereit

Fügen Sie Ihren Videos Untertitel hinzu, damit Nutzer:innen den Dialogen, Soundeffekten und anderen Audioinhalten folgen können. Untertitel helfen:

  • Menschen, die gehörlos oder schwerhörig sind
  • Zuschauer:innen, die in einer lautlosen Umgebung schauen
  • Nicht-Muttersprachler:innen, die lieber mitlesen

Untertitel können ein- oder ausgeschaltet werden, sodass Nutzer:innen wählen können, was für sie am besten funktioniert.

Stellen Sie Wiedergabesteuerungen bereit

Stellen Sie sicher, dass Ihr eingebettetes Video barrierefreie Wiedergabesteuerungen enthält – wie Abspielen, Pause, Stummschalten und Spulen – damit Nutzer:innen auf die für sie beste Weise damit interagieren können.

Vermeiden Sie automatische Wiedergabe

Vermeiden Sie es nach Möglichkeit, Videos auf automatische Wiedergabe einzustellen. Automatische Wiedergabe kann irritierend oder desorientierend sein für:

  • Nutzer:innen, die auf Screenreader oder Tastaturnavigation angewiesen sind
  • Menschen mit Bewegungsempfindlichkeit
  • Alle in einer ruhigen Umgebung (wie am Arbeitsplatz oder spätabends)

Lassen Sie Nutzer:innen selbst entscheiden, wann sie ein Video abspielen, indem Sie klare Steuerungen bereitstellen.

Vermeiden Sie blinkende oder stroboskopische Inhalte

Verwenden Sie keine Videos mit blinkenden oder stroboskopischen Effekten, besonders bei hoher Frequenz. Diese können bei Nutzer:innen mit photosensitiver Epilepsie Anfälle auslösen und bei anderen Unbehagen verursachen.

Farbkontrast

Ausreichender Farbkontrast hilft sicherzustellen, dass Ihre Nachrichten für alle leicht zu lesen sind, einschließlich Menschen mit eingeschränktem Sehvermögen oder solchen, die Ihre Inhalte bei hellem Licht oder unter schwierigen Bedingungen betrachten. Streben Sie Kontrastverhältnisse an, die den WCAG 2.2 AA-Anforderungen entsprechen:

  • 4,5:1 Kontrastverhältnis für normalen Text (Fließtext, Buttons und Links)
  • 3:1 Kontrastverhältnis für großen Text (Überschriften und größere Beschriftungen)

Sie können Ihre Farbwahl mit dem WebAim Contrast Checker Tool testen.

Benutzerdefiniertes HTML

Wenn Sie benutzerdefiniertes HTML in Ihrem Messaging verwenden:

  • Verwenden Sie semantisches HTML. Das bedeutet, die richtigen HTML-Elemente für ihren vorgesehenen Zweck zu verwenden, anstatt ein Element so zu gestalten, dass es wie ein anderes aussieht. Die meisten HTML-Elemente haben ihre eigene eingebaute Barrierefreiheitsunterstützung.
  • Für die Sprache auf Dokumentebene, bei der Braze HTML-Metadaten beim Export hinzufügen kann, siehe Barrierefreiheitssprache; das Verhalten variiert je nach Kanal. Wenn Sie Inhalte selbst auszeichnen, setzen Sie das lang-Attribut in Ihrem HTML, um die Sprache Ihres Inhalts zu identifizieren. Screenreader verwenden verschiedene Klangbibliotheken für jede Sprache basierend auf der Aussprache und den Eigenschaften dieser Sprache. Wenn dies nicht angegeben ist, nimmt ein Screenreader an, dass der Inhalt in der Standardsprache geschrieben ist, die die Nutzer:innen bei der Einrichtung des Screenreaders gewählt haben. Wenn die Nachricht nicht tatsächlich in der Standardsprache verfasst ist, kann der Screenreader die Nachricht möglicherweise nicht korrekt aussprechen.
1

<html lang="en-us">
  • Verwenden Sie ARIA-Attribute, um zusätzlichen Kontext zu geben. Diese Attribute liefern zusätzliche Informationen für assistive Technologien und helfen, die Rolle, den Zustand oder die Eigenschaften von UI-Elementen zu verdeutlichen, die andernfalls unklar sein könnten.

ARIA-Attribute

Wenn Sie benutzerdefinierten Code in Braze-Editoren verwenden, können Sie Accessible Rich Internet Applications (ARIA) nutzen, um zusätzliche Barrierefreiheitsunterstützung für Nutzer:innen bereitzustellen, die auf assistive Technologien angewiesen sind. ARIA-Rollen und -Attribute helfen Screenreadern, Ihren Inhalt klarer zu interpretieren, besonders wenn Sie Elemente verwenden, die von sich aus keine Bedeutung vermitteln (wie <div> oder <span>).

Hier sind einige Beispiele, die besonders in Messaging-Kontexten nützlich sind:

aria-label

aria-label fügt Elementen, die keinen sichtbaren Text haben, einen barrierefreien Namen hinzu. Wenn Sie ein Symbol ohne Text verwenden (wie einen Papierkorb oder ein „X“ zum Schließen), weiß jemand, der einen Screenreader verwendet, nicht, was es tut – es sei denn, Sie beschriften es. aria-label gibt diesem Symbol eine Stimme.

1
2
3

<button aria-label="Close message">
  <svg ...></svg>
</button>

aria-labelledby

aria-labelledby verbindet ein Element mit etwas, das bereits ein sichtbares Label hat. Wenn Sie also ein Banner oder einen Bereich haben, der mit einem Titel vorgelesen werden soll, können Sie aria-labelledby verwenden, um assistiver Technologie mitzuteilen: „Verwende diese Überschrift dort drüben, um diesen Teil zu benennen.“

1
2

<h2 id="banner-title">Important Update</h2>
<div role="region" aria-labelledby="banner-title">...</div>

aria-hidden=”true”

aria-hidden="true" verbirgt Dinge vor Screenreadern. Es ist hilfreich für Text oder visuelle Elemente, die keine wichtige Bedeutung vermitteln – wie ein Glitzern, ein Häkchen oder ein Emoji, das rein dekorativ verwendet wird.

Das hält das Erlebnis für Screenreader-Nutzer:innen sauberer, die sonst möglicherweise redundante oder verwirrende Inhalte hören würden. Es ist auch nützlich, um Dinge wie Offscreen-Akkordeon-Inhalte auszublenden, die noch nicht aufgeklappt wurden.

1

<span aria-hidden="true">✔️</span>

Im Allgemeinen ist es besser, alt="" für dekorative Bilder und Symbole zu verwenden als aria-hidden="true". Während semantisches HTML von allen Screenreadern und assistiver Software weitgehend unterstützt wird, variiert die ARIA-Unterstützung. Auch wenn Sie aria-hidden verwenden, sollten Sie trotzdem ein leeres Alt-Attribut einfügen.

role=”presentation”

role="presentation" teilt assistiver Technologie mit, rein layoutbezogene Elemente zu ignorieren, wie Design-Tabellen. E-Mails verwenden zum Beispiel oft Tabellen nur zur Ausrichtung. Ohne diese Rolle könnten Screenreader annehmen, dass Ihr Layout eine Datentabelle ist, und beginnen, Zeilen- und Spaltennummern vorzulesen.

1

<table role="presentation">...</table>

E-Mails, die im Drag-and-Drop-E-Mail-Editor erstellt werden, haben Präsentationselemente automatisch mit dem ARIA-Attribut role="presentation" markiert.

aria-live=”polite”

aria-live="polite" kündigt Aktualisierungen an, wenn sich Inhalte ändern, ohne dass eine Nutzerinteraktion erforderlich ist. Verwenden Sie es, wenn Sie dynamische Aktualisierungen innerhalb einer Nachricht anzeigen, wie Erfolgsmeldungen, Fehler oder andere Benachrichtigungen.

1

<div aria-live="polite">Your preferences have been saved.</div>

Automatisierte Barrierefreiheitstests

Um Ihnen zu helfen, Probleme mit der Barrierefreiheit frühzeitig zu erkennen und zu beheben, bietet Braze automatisierte Barrierefreiheitstests in den folgenden Bereichen an:

Diese Tests prüfen Ihre Nachricht anhand der Web Content Accessibility Guidelines (WCAG) – einem Satz international anerkannter technischer Standards für barrierefreie Inhalte. Alle Probleme, die automatisch erkannt werden können, werden markiert und nach Schweregrad kategorisiert, um Ihnen bei der Priorisierung zu helfen.

Was automatisierte Tests erkennen können und was nicht

Automatisierte Barrierefreiheitstests sind ein guter Ausgangspunkt – aber sie können nicht alles erfassen. Einige Probleme erfordern eine manuelle Überprüfung, insbesondere wenn Kontext oder visuelles Design eine Rolle dabei spielen, wie Nutzer:innen Ihre E-Mail erleben.

Möglicherweise sehen Sie einige Probleme, die als Needs review markiert sind. Das sind Fälle, in denen die Prüfung nicht sicher feststellen kann, ob etwas ein Problem für die Barrierefreiheit darstellt. In diesem Fall empfehlen wir, es manuell zu überprüfen.

Einige Beispiele dafür, was automatisierte Tools nicht zuverlässig erkennen können:

  • Ob die Fokusreihenfolge interaktiver Elemente einer logischen Abfolge folgt
  • Ob Inhalte vollständig mit einer Tastatur bedienbar sind, ohne dass eine Maus erforderlich ist
  • Ob Alt-Texte ein Bild aussagekräftig beschreiben
  • Ob Überschriften korrekt verwendet werden, um Inhalte zu strukturieren
  • Ob Links und Buttons klar beschriftet und leicht verständlich sind
  • Ob Touch-Ziele groß genug und angemessen platziert sind
  • Ob Text auf Hintergrundbildern die Anforderungen an den Farbkontrast erfüllt
  • Ob Anweisungen oder Beschriftungen klar und für alle Nutzer:innen hilfreich sind

Diese Einschränkungen sind nicht spezifisch für Braze – sie gelten für alle automatisierten Barrierefreiheitstools. Automatisierte Prüfungen können nicht jede assistive Technologie, jeden Screenreader oder jedes Nutzerbedürfnis simulieren. Deshalb ist Barrierefreiheit keine einmalige Prüfung – sondern eine kontinuierliche Praxis.

Auch wenn Ihre Nachricht jede automatisierte Prüfung besteht, ist es dennoch wichtig:

  • Markierte Probleme sorgfältig zu überprüfen, insbesondere solche, die als Needs review gekennzeichnet sind.
  • Wo möglich manuell zu testen, insbesondere bei Layout- und Interaktionsmustern.
  • Tools wie Screenreader, reine Tastaturnavigation und Browser-Zoom zu verwenden, um verschiedene Zugangsbedürfnisse zu simulieren.

Durch die Kombination automatisierter Tests mit durchdachter manueller Überprüfung erkennen Sie mehr potenzielle Probleme und erstellen inklusivere, benutzerfreundlichere Campaigns für alle Empfänger:innen.
New Stuff!