Gestalten barrierefreier Inhalte accessible-content

Der Europäische Rechtsakt zur Barrierefreiheit ist eine Richtlinie, mit der der Binnenmarkt für barrierefreie Produkte und Dienstleistungen durch die Beseitigung von Hindernissen, die durch unterschiedliche nationale Vorschriften in den Mitgliedstaaten verursacht werden, verbessert werden soll.

Diese Verordnung besagt, dass alle digitalen Kommunikationen, einschließlich E-Mails, Newsletter, PDFs und herunterladbare Inhalte, zugänglich sein sollten. Beim Erstellen von Inhalten für Ihre Empfängerinnen und Empfänger müssen Sie daher bestimmte Richtlinien befolgen, z. B. die Verwendung barrierefreier Schriftarten und lesbarer Formate und die Bereitstellung von Alternativtext für Bilder.

Mit Marketo Engage Email Designer können Sie diese Anweisung auf Grundlage der Web Content Accessibility Guidelines (WCAG) 2.1, Level AA, problemlos einhalten. Die Best Practices für die Erstellung barrierefreier Inhalte mit Marketo Engage sind unten aufgeführt.

Sicherstellen der Lesbarkeit von Text text-readability

Verwenden Sie die Registerkarte Stile der Komponente Text, um sicherzustellen, dass Ihr Text lesbar ist, z. B. mit einem ordnungsgemäßen Farbkontrast und einfachen Schriftarten.

Befolgen Sie bei Schriftarten und Text die folgenden Richtlinien:

Schriftartenauswahl

Schriftgrad

Farbkontrast

Barrierefreiheit von Text

Sicherstellen der visuellen Barrierefreiheit visual-accessibility

In Marketo Engage können Größe und Abstand der verschiedenen Elemente in Ihrem Inhalt mithilfe der Stilparameter und -attribute im Bereich E-Mail-Designer (Stile weiter werden.

Sie können beispielsweise den Hintergrund aktualisieren oder die Ränder, den Abstand und die Ausrichtung ändern, um die visuelle Barrierefreiheit zu verbessern.

Mit Marketo Engage Email Designer können Sie das Design für verschiedene Geräte und Bildschirmgrößen in der Vorschau anzeigen und optimieren. Sie können jederzeit Zur Live-Ansicht wechseln um zu überprüfen, wie Ihre Inhalte auf verschiedenen Gerätegrößen gerendert werden können.

Verwenden von Alternativtext für Bilder alt-text

Verwenden Sie die Bild-Komponente, um alternativen Text für Bilder bereitzustellen.

Verwenden von lesbarem Format readable-format

Verwenden Sie die für E-Mail-Designer relevanten Struktur- und Inhaltskomponenten sowie die Optionen im Bereich Stile, um Ihre Inhalte klar, logisch und präzise zu organisieren, sodass sie für alle zugänglich sind.

Sicherstellen der Lesbarkeit von Inhalten readability

Um lesbar zu sein, müssen Ihre Inhalte klar, gut strukturiert und für alle verwendbar sein, auch für Menschen mit visuellen, kognitiven oder Leseschwächen und solche, die Hilfstechnologien verwenden. Einige Punkte, die Sie beim Erstellen barrierefreier Inhalte beachten sollten:

Zur Einschätzung der Lesbarkeit Ihrer E-Mails können Sie den beliebten Flesch Reading Ease Test nutzen, der in Microsoft Word zu finden ist. Er berechnet auf einer Skala von 0–100, wie leicht Ihre Inhalte zu lesen sind.

Testen Ihrer Inhalte test

Um die Barrierefreiheit Ihrer Inhalte zu überprüfen, können Sie die von Marketo Engage bereitgestellten Testfunktionen verwenden. Sie wurden nicht speziell dafür konzipiert zu überprüfen, ob Ihre Inhalte vollständig barrierefrei sind, können aber einen ersten Prüfungsschritt darstellen.

Um konsistenter zu überprüfen, ob Ihre Inhalte zuverlässig barrierefrei sind, nutzen Sie externe Tools wie:

Verwenden des dunklen Modus dark-mode

Dunkelmodus Verbessert die visuelle Barrierefreiheit für Benutzer mit Lichtempfindlichkeit oder Sehbehinderungen, um das Seherlebnis zu verbessern.

Zu den Best Practices für die Gestaltung von Inhalten im Dunkelmodus gehören:

Stellen Sie sicher, dass Ihre E-Mails im Dunkelmodus korrekt gerendert werden, indem Sie alle E-Mail-Inhalte und Benutzeroberflächenelemente sowohl im Hellen als auch im Dunklen Modus testen.

Verwenden spezifischer Attribute für Barrierefreiheit attributes

Sprachattribute language

Fügen Sie beim Gestalten von Designs die Attribute lang (Sprache) und dir (Textausrichtung) in den Content-Hauptteil ein. Diese Attribute helfen Hilfstechnologien (wie Bildschirmlesehilfen), Ihre Inhalte angemessen zu interpretieren und darzustellen.

Bildschirmlesehilfen verwenden das Attribut lang, um die korrekten Ausspracheregeln anzuwenden, während die Textausrichtung dafür sorgt, dass Inhalte in Sprachen, die von links nach rechts bzw. von rechts nach links fließen, richtig dargestellt werden. Ohne diese Attribute kann es zu einer verwirrenden Leserichtung oder falscher Aussprache kommen. Verpacken Sie den Textkörper Ihrer E-Mail immer mit den entsprechenden lang- und dir.

Tabellen tables

In HTML-Inhalten werden Tabellen häufig für das Layout verwendet. Standardmäßig behandeln Bildschirmlesehilfen jede <table> als Datentabelle und geben Zeilen, Spalten und Struktur aus. Dies kann verwirrend sein, wenn die Tabelle nur zur Formatierung dient.

Fügen Sie Layout-Tabellen role="presentation" (oder role="none") hinzu, um sicherzustellen, dass Hilfstechnologien ihre Struktur überspringen und sich nur auf den tatsächlichen Inhalt konzentrieren.

<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <h1>Hello World</h1>
      <p>Welcome to our newsletter</p>
    </td>
  </tr>
</table>

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>19</td>
  </tr>
  <tr>
    <td>Parker</td>
    <td>62</td>
  </tr>
</table>

Text für Links links

Bildschirmlesehilfen lesen Links mit ihrem Text vor. Wenn ein Link nur mit „Hier klicken“ oder „Weitere Informationen“ beschriftet ist, kennen Benutzende von Hilfstechnologien das Ziel nicht. Für Barrierefreiheit benötigen sie beschreibenden Text, der das Ziel oder die Aktion klar angibt.

Verwenden Sie die E-Mail-Designer , um einen Link zu Ihrem Inhalt hinzuzufügen und die Kennzeichnung zu bearbeiten, damit sie erkennbar (sichtbar) und beschreibend (klar zu Ihrem Zweck) ist. Vermeiden Sie vage Labels wie „hier“ oder „mehr“.

<p>Learn more in the
<a href="https://adobe.com/release-notes">August release notes</a>.
</p>

<p>Learn more about our new features.
  <a href="https://adobe.com/release-notes">Click here</a>.
</p>