Gestalten barrierefreier Inhalte accessible-content
Die EU-Richtlinie zur Barrierefreiheit soll die Beseitigung von Hindernissen, die durch unterschiedliche nationale Vorschriften in den Mitgliedstaaten verursacht werden, den Binnenmarkt für barrierefreie Produkte und Dienstleistungen verbessern.
Diese Richtlinie legt fest, dass alle digitalen Mitteilungen, einschließlich E-Mails, Newslettern, PDFs und herunterladbaren Inhalten, barrierefrei sein sollen. Beim Erstellen von Inhalten für Ihre Empfängerinnen und Empfänger müssen Sie daher bestimmte Richtlinien befolgen, z. B. barrierefreie Schriftarten, lesbare Formate und die Bereitstellung von Alternativtext für Bilder.
Mit Journey Optimizer E-Mail-Designer, mit dem Marketing-Fachleute Inhalte sowohl für E-Mails als auch für Landingpages erstellen können, können Sie diese Richtlinie auf Grundlage der Web Content Accessibility Guidelines (WCAG) 2.1, Level AA, problemlos einhalten.
Dementsprechend finden Sie im Folgenden Best Practices für die Gestaltung barrierefreier Inhalte mit Journey Optimizer.
Sicherstellen der Lesbarkeit von Text text-readability
Verwenden Sie die Registerkarte Stile der Komponente Text, um dafür zu sorgen, dass Ihr Text lesbar ist (z. B. mit einem angemessenen Farbkontrast und einfachen Schriftarten). Weitere Informationen
Befolgen Sie für Schriftarten und Text die folgenden Leitlinien:
Schriftartenauswahl
- Verwenden Sie serifenlose Schriftarten wie Arial, Verdana, Tahoma, Helvetica oder Open Sans.
- Vermeiden Sie in Textinhalten serifenbetonte, kursive oder dekorative Schriftarten.
- Achten Sie auf einen beschränkten Schriftsatz, um Konsistenz und Fallback zu gewährleisten (z. B.
font-family: Arial, Helvetica, sans-serif;
).
Schriftgrad
- Achten Sie beim Textkörper auf einen Schriftgrad von mindestens 16 Pixel.
- Verwenden Sie eine angemessene Hierarchie für Überschriften.
Farbkontrast
- Wahren Sie zwischen Text und Hintergrund ein Kontrastverhältnis von mindestens 4,5 :1.
- Achten Sie bei großem Text (≥24 Pixel oder 18 Pixel fett) auf einen Kontrast von mindestens 3 :1.
- Vermeiden Sie hellgrauen oder pastellfarbenen Text auf weißem Hintergrund.
- Verlassen Sie sich nicht allein auf Farbe, um Bedeutung zu vermitteln, sondern verwenden Sie auch Unterstreichungen, Symbole usw.
Barrierefreiheit von Text
- Vermeiden Sie Text in Bildern.
- Verwenden Sie im Textkörper nicht ausschließlich Großbuchstaben.
- Sorgen Sie dafür, dass Text bis zu 200 % gezoomt werden kann, ohne das Layout zu zerstören.
Sicherstellen der visuellen Barrierefreiheit visual-accessibility
Um dafür zu sorgen, dass Inhalte visuell barrierefrei sind, wenden Sie die folgenden Best Practices an:
- Verwenden Sie für wichtige Informationen keine reinen Farbindikatoren.
- Nutzen Sie Text-Labels oder Symbole, um Klarheit zu schaffen.
- Optimieren Sie Ihr Design für mobile und responsive Layouts und stellen Sie sicher, dass Schaltflächen groß sind und ausreichend Abstand aufweisen.
- Testen Sie regelmäßig für verschiedene Geräte und Bildschirmgrößen, um die Barrierefreiheit zu gewährleisten.
In Journey Optimizer können Sie die Größe und den Abstand der verschiedenen Elemente in Ihrem Content mithilfe der Stilparameter und -attribute im Bereich Stile von E-Mail-Designer weiter verfeinern. 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
Darüber hinaus können Sie mit dem E-Mail-Designer von Journey Optimizer das Design für verschiedene Geräte und Bildschirmgrößen in der Vorschau anzeigen und optimieren. Sie können jederzeit die Option Zur Live-Ansicht wechseln wählen, um zu überprüfen, wie Ihre Inhalte auf verschiedenen Gerätegrößen gerendert werden.
Verwenden von Alternativtext für Bilder alt-text
Verwenden Sie die Komponente Bild, um alternativen Text für Bilder bereitzustellen. Weitere Informationen
Wenden Sie die folgenden Richtlinien an, um in digitalen Produkten effektiven Alternativtext zu nutzen:
- Beschreiben Sie den Zweck des Bildes kurz und kontextbezogen.
- Vermeiden Sie redundante Ausdrücke wie „Abbildung von …“ und verwenden Sie leeren Alternativtext für dekorative Bilder.
- Geben Sie für Symbole mit Bedeutung aussagekräftige Labels an. Nutzen Sie für komplexe Bilder einen kurzen Alternativtext und an anderer Stelle eine längere Beschreibung.
Verwenden von lesbarem Format readable-format
Verwenden Sie die für E-Mail-Designer relevante Struktur und Inhaltskomponenten sowie die Optionen im Bereich Stile, um Ihren Content übersichtlich, logisch und präzise anzuordnen, sodass er für alle zugänglich ist.
- Nutzen Sie strukturierte, semantische HTML mit passenden Überschriften, Absätzen, Listen und Tabellen.
- Stellen Sie sicher, dass Inhalte einem logischen Fluss von links nach rechts und von oben nach unten folgen.
- Verwenden Sie klare, knappe Formulierungen.
- Stellen Sie alternative Formate für PDF-Dateien und Infografiken bereit.
- Lassen Sie Änderungen an Textgröße und Textfluss zu und sorgen Sie dafür, dass die Typografie in allen Formaten mit angemessenem Farbkontrast lesbar ist.
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:
- Bilden Sie Sätze mit höchstens 20 Wörtern.
- Bearbeiten Sie Ihren Text so, dass er direkt ist und alles auf den Punkt bringt.
- Nutzen Sie das Aktiv, um die Satzstruktur einfacher zu halten.
- Vermeiden Sie Slang, Fachsprache oder regionale Wörter, mit denen manche Menschen möglicherweise nicht vertraut sind.
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
Zum Überprüfen der Barrierefreiheit Ihrer Inhalte können Sie die von Journey Optimizer 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.
-
Zeigen Sie Ihren Inhalt mithilfe von Testprofilen in der Vorschau an. Weitere Informationen
-
Verwenden Sie die Option E-Mail-Rendering, die Litmus zur Simulation Ihrer Designs in wichtigen E-Mail-Clients (Apple Mail, Gmail, Outlook) nutzt, damit Sie sehen können, ob Text, Farben und Bilder Ihre Inhalte barrierefrei machen.
-
Führen Sie Testsendungen durch, um das Rendering Ihrer Inhalte zu testen, bevor Sie sie an Ihre echte Zielgruppe senden. Weitere Informationen
Um konsistenter zu überprüfen, ob Ihre Inhalte zuverlässig barrierefrei sind, nutzen Sie externe Tools wie:
-
WebAim Contrast Checker und WAVE Web Accessibility Evaluation Tool zur Bewertung von Kontrast und Compliance;
-
Hilfstechnologien wie Bildschirmlesehilfen (z. B. NVDA oder VoiceOver auf iPhone), um E-Mails aus der Perspektive sehbehinderter Benutzender zu erleben.
Verwenden des dunklen Modus dark-mode
Der dunkle Modus optimiert die visuelle Barrierefreiheit für Benutzende mit Lichtempfindlichkeit oder Sehbehinderungen, um das Anwendererlebnis zu verbessern.
Zu den Best Practices für die Gestaltung von Inhalten im dunklen Modus gehören die Verwendung transparenter PNGs oder SVGs, das Festlegen geeigneter Meta-Tags und CSS sowie das Bereitstellen barrierefreier Fallback-Stile, wenn der dunkle Modus nicht unterstützt wird. Sorgen Sie abschließend dafür, dass Ihre E-Mails im dunklen Modus korrekt gerendert werden, indem Sie alle E-Mail-Inhalte und UI-Elemente sowohl im hellen als auch im dunklen Modus testen.
Detaillierte Best Practices für den dunklen Modus, einschließlich Richtlinien zur Sicherstellung der Barrierefreiheit, finden Sie in diesem Abschnitt.
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 unterstützen Hilfstechnologien wie Bildschirmlesehilfen bei der angemessenen Interpretation und Darstellung Ihrer Inhalte.
-
Das Attribut
lang
gibt die Sprache der E-Mail für Hilfstechnologien an und stellt sicher, dass Wörter korrekt ausgesprochen werden.accordion Beispiele Beispiel für Englisch:
code language-none <body lang="en">
Beispiel für Französisch:
code language-none <body lang="fr">
-
Das Attribut
dir
gibt die Textausrichtung an. Die meisten Sprachen, einschließlich Englisch und Französisch, werden von links nach rechts (ltr) gelesen, während Sprachen wie Arabisch und Hebräisch von rechts nach links (rtl) gelesen werden.accordion Beispiele Beispiel für Englisch (links nach rechts):
code language-none <body lang="en" dir="ltr">
Beispiel für Arabisch (rechts nach links):
code language-none <body lang="ar" dir="rtl">
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. Umschließen Sie daher Ihren E-Mail-Textkörper immer mit dem entsprechenden lang
- und dir
-Attribut.
<table>
- oder <td>
-Block) die entsprechenden Sprachattribute zu, um dafür zu sorgen, dass sich jeder Teil richtig lesen lässt.Tabellen tables
In HTML-Inhalten werden häufig Tabellen 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.
role="presentation"
)code language-none |
---|
|
Die Bildschirmlesehilfen lesen:
„Hallo Welt. Willkommen zu unserem Newsletter.“ (Zeilen, Spalten oder Tabellen werden nicht erwähnt)
role="presentation"
)code language-none |
---|
|
Die Bildschirmlesehilfen lesen:
„Tabelle mit 2 Spalten und 3 Zeilen.“
„Name, Alice. Bewertung, 95.“
„Name, Bob. Bewertung, 88.“
role="presentation"
ausschließlich für Layout-Tabellen. Behalten Sie bei Datentabellen die semantische <table>
-Struktur bei, damit Bildschirmlesehilfen Header und Beziehungen korrekt ausgeben können.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 den E-Mail-Designer, um einen Link zu Ihrem Inhalt hinzuzufügen und das Label zu bearbeiten, damit es erkennbar (sichtbar) und beschreibend (klar bezüglich des Zwecks) ist. Vermeiden Sie vage Labels wie „hier“ oder „mehr“.
code language-none |
---|
|
Die Bildschirmlesehilfen lesen:
„Link, Versionshinweise August.“
code language-none |
---|
|
Die Bildschirmlesehilfen lesen:
„Link, hier klicken.“ (bietet keinen Kontext außerhalb der Lesereihenfolge)
Bereitstellen von Tastaturnavigation und Fokusunterstützung keyboard
Durch die Bereitstellung von Tastaturnavigation und Fokusunterstützung können Benutzende, die keine Maus verwenden können, Inhalte umfassend aufrufen und mit ihnen interagieren. Zudem wird die Anwenderfreundlichkeit verbessert, da alle Benutzenden eine klare und konsistente Möglichkeit haben, durch Informationen zu navigieren.
-
Fokus über die Tastatur
-
Sorgen Sie dafür, dass alle interaktiven Elemente (z. B. Schaltflächen, Kontrollkästchen, Links)
tabindex="0"
aufweisen, damit sie in der natürlichen Registerkartenreihenfolge enthalten sind. -
Ermöglichen Sie Navigation mithilfe der Tabulatortaste und der Pfeiltasten (↑ ↓ ← →), wobei das fokussierte Element sichtbar hervorgehoben werden sollte.
-
-
Benutzerdefinierter Fokusstil
-
Wenden Sie klare und unterscheidbare Stile an, um den Fokus auf umsetzbare Elemente zu lenken:
accordion Beispiel (CSS) code language-none [tabindex="0"] : focus { outline: 2px solid #00AEEF; /* Cyan border */ background-color: #20CEFF; /* Optional background */ }
-
Stellen Sie sicher, dass Fokusindikatoren den WCAG 2.2-Standards für das Erscheinungsbild von Fokussen entsprechen, einschließlich:
-
Mindestfläche: 2 CSS-Pixel dicke Kontur.
-
Kontrastverhältnis: ≥ 3 :1 zwischen fokussiertem und unfokussiertem Status.
-
-
-
Unterstützung für Tastaturaktivierung
-
Sorgen Sie dafür, dass Kontrollkästchen und Schaltflächen auf die Eingabetaste und Leertaste reagieren.
-
Validieren Sie Interaktion nur mit der Tastatur:
-
Bei Verwendung der Eingabetaste oder Leertaste sollten Kontrollkästchen aktiviert bzw. deaktiviert werden.
-
Die Eingabe- oder Leertaste sollten Schaltflächen auslösen.
-
-