Entwerfen 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 legt fest, dass alle digitalen Mitteilungen, 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. barrierefreie Schriftarten und lesbare Formate verwenden und alternativen Text für Bilder bereitstellen.

Mit Adobe Campaign E-Mail-Designer, mit dem Marketing-Experten Inhalte sowohl für E- als auch Landingpages erstellen können, können Sie diese Richtlinie auf der Grundlage der Web Content Accessibility Guidelines (WCAG) 2.1, Level AA, problemlos einhalten.

Dementsprechend finden Sie im Folgenden die Best Practices für die Gestaltung barrierefreier Inhalte mit Adobe Campaign.

Auf dieser Seite geht es darum, Ihre Inhalte für alle Ihre Empfängerinnen und Empfänger zugänglich zu machen, um sicherzustellen, dass Menschen mit Behinderungen Ihre mit Adobe Campaign entworfenen E-Mails und Landingpages lesen, verstehen und mit ihnen interagieren können.

Textlesbarkeit sicherstellen 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. Weitere Informationen

{width="80%"}

Befolgen Sie für Schriftarten und Text die folgenden Richtlinien:

Schriftartenauswahl

Schriftgröße

Farbkontrast

Barrierefreiheit von Text

Sicherstellen der visuellen Barrierefreiheit visual-accessibility

Um sicherzustellen, dass Ihr Inhalt visuell zugänglich ist, befolgen Sie die folgenden Best Practices:

Adobe Campaign 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. Weitere Informationen

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

{width="80%"}

Darüber hinaus können Sie mit der Adobe Campaign Email Designer 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.

{width="80%"}

Alternativtext für Bilder verwenden alt-text

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

{width="90%"}

Befolgen Sie die folgenden Richtlinien für effektiven Alternativtext in digitalen Produkten:

Lesbares Format verwenden readable-format

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

{width="100%"}

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 beim Erstellen barrierefreier Inhalte zu beachten sind:

Um Ihre E-Mail-Lesbarkeit zu bewerten, können Sie den beliebten Flesch Reading Ease Test verwenden, der in Microsoft Word zu finden ist und berechnet, wie einfach Ihre Inhalte auf einer Skala von 0-100 zu lesen sind.

Testen von Inhalten test

Um die Barrierefreiheit Ihrer Inhalte zu überprüfen, können Sie die von Adobe Campaign bereitgestellten Testfunktionen verwenden. Sie sind nicht speziell dafür konzipiert, zu überprüfen, ob Ihre Inhalte vollständig zugänglich sind, aber sie können eine erste Ebene der Überprüfung bieten.

{width="90%"}

Um konsistenter zu überprüfen, ob Ihre Inhalte zuverlässig zugänglich sind, wählen Sie bestimmte externe Tools aus, z. B.:

Dunklen Modus verwenden dark-mode

Zu den Best Practices für die Erstellung von Inhalten im dunklen Modus gehören die Verwendung transparenter PNGs oder SVGs, das Festlegen geeigneter Meta-Tags und CSS sowie das Bereitstellen zugänglicher Fallback-Stile, wenn der dunkle Modus nicht unterstützt wird.

Verwenden spezifischer Attribute für die Barrierefreiheit attributes

Sprachattribute language

Fügen Sie beim Erstellen von Designs die Attribute lang (Sprache) und dir (Textrichtung) in den Inhaltshauptteil ein. Diese Attribute unterstützen Hilfstechnologien wie Bildschirmlesehilfen bei der Interpretation und Darstellung Ihrer Inhalte auf geeignete Weise.

Bildschirmlesehilfen verwenden das lang-Attribut, um die korrekten Ausspracheregeln anzuwenden, während die Textrichtung sicherstellt, dass Inhalte für Sprachen mit von links nach rechts oder von rechts nach links fließen. Ohne diese Attribute kann es zu verwirrender Leserichtung oder falscher Aussprache kommen. Umschließen Sie daher Ihren E-Mail-Textkörper 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 Strukturen aus. Dies kann verwirrend sein, wenn die Tabelle nur zur Formatierung verwendet wird.

Fügen Sie Layouttabellen 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>Alice</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Bob</td>

    <td>88</td>

  </tr>

</table>

Text für Links links

Bildschirmlesehilfen lesen Links mithilfe ihres Textes aus. Wenn ein Link nur mit „Hier klicken“ oder „Weitere Informationen“ beschriftet ist, kennen Benutzer von Hilfstechnologien das Ziel nicht. Um die Barrierefreiheit zu gewährleisten, benötigen sie beschreibenden Text, der die Zielgruppe oder Aktion klar angibt.

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

{width="70%"}

<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>

Bereitstellen von Tastaturnavigation und Fokusunterstützung keyboard

Durch die Unterstützung der Tastaturnavigation und des Fokus können Benutzende, die keine Maus verwenden können, umfassend auf Inhalte zugreifen und mit ihnen interagieren. Außerdem wird die Benutzerfreundlichkeit verbessert, da alle Benutzer eine klare und konsistente Möglichkeit haben, sich durch Informationen zu bewegen.