Newsletter Editor: Barrierefreiheits-Test durchführen

Lesezeit: 2 min
Barrierefreie E-Mails sind der Schlüssel zur Inklusion. Sie gewährleisten, dass jeder Empfänger, unabhängig von seinen Fähigkeiten oder Einschränkungen, Ihre Inhalte problemlos verstehen kann. Ihr Mailing sorgt für eine bessere Nutzererfahrung, stärkt Ihre Marke und kann sogar zu höheren Conversion-Rates führen.

In unserem Artikel Kriterien für Barrierefreiheits-Test für Ihre E-Mails haben wir weitere Informationen zusammengefasst und aufgezeigt wie wichtig Barrierefreiheit-Tests sind.

So funktioniert der Barrierefreiheits-Test in unserem Newsletter Editor:

  1. Öffnen Sie das Mailing, bei welchem Sie den Test durchführen möchten, über den Menüpunkt E-Mails.


  2. Rechts oben unter Vorschau finden Sie den Punkt Barrierefreiheits-Test.

  3. Es öffnet sich ein Pop-up-Fenster über die gesamte Seite. Hier können Sie Ihr vorhandenes Test-Kontingent einsehen, Tests durchführen, weitere Tests kaufen und vorherige Tests abrufen.

  4. Klicken Sie auf Barrierefreiheits-Test starten. Ihr Mailing wird gescannt und Sie erhalten folgende Übersicht: 

    Unter dem Reiter Verbesserungen finden Sie die Kriterien, die Sie anpassen sollten.
    Klicken Sie rechts auf den Pfeil nach unten, um weitere Informationen zu erhalten und um zu sehen, welches HTML-Snippet betroffen ist. In der Tabelle  Erläuterungen der Regel-IDs (Verbesserungsvorschlägen) am Ende dieses Artikels finden Sie weitere Erklärungen.
  5. Klicken Sie oben rechts auf das x, um zurück in den Editor zu gelangen und passen Sie dort die Verbesserungsvorschläge an.
  6. Klicken Sie nach erfolgter Anpassung wieder auf Vorschau > Barrierefreiheits-Test. Sie können auf Vorherigen Test abrufen klicken (siehe Screenshot Schritt 3), um sich die Vorschläge erneut anzuschauen oder auf Barrierefreiheits-Test starten, um den Test für eine Kontrolle erneut durchzuführen.

Erläuterungen der Regel-IDs (Verbesserungsvorschläge nach dem Test)

Auf diese Regeln wird ihr Mailing mit dem Barrierefreiheits-Test geprüft (siehe Screenshot Schritt 4):

Regel-ID Beschreibung
accesskeys Jeder Wert des Attributs accesskey muss einzigartig sein
area-alt <area>-Elemente von Image-Maps haben einen alternativen Text
aria-allowed-attr ARIA-Attribute für die Rolle eines Elements sind zulässig
aria-allowed-role Das Attribut role hat einen geeigneten Wert für das Element
aria-hidden-body aria-hidden='true' ist im Dokumentenkörper nicht vorhanden
aria-progressbar-name Jeder ARIA-Progressbar-Knoten hat einen zugänglichen Namen
aria-required-children Elemente mit einer ARIA-Rolle, die untergeordnete Rollen erfordern, sind in diesen enthalten
aria-required-parent Elemente mit einer ARIA-Rolle, die übergeordnete Rollen erfordern, sind in diesen enthalten
aria-roledescription aria-roledescription wird nur für Elemente mit einer impliziten oder expliziten Rolle verwendet 
aria-roles Alle Elemente mit einem role-Attribut verwenden einen gültigen Wert
aria-toggle-field-name Jedes ARIA-Umschaltfeld hat einen zugänglichen Namen 
aria-tooltip-name Jeder ARIA-Tooltip-Knoten hat einen zugänglichen Namen
aria-valid-attr-value Alle ARIA-Attribute haben gültige Werte
aria-valid-attr Attribute, die mit aria- beginnen, sind gültige ARIA-Attribute
color-contrast Der Kontrast zwischen Vorder- und Hintergrundfarben entspricht den Mindestkontrastwerten der WCAG 2 AA
content-type "meta content-type" und Zeichensatz sind definiert
definition-list
<dl>-Elemente sind korrekt strukturiert
dlitem
<dt>- und <dd>-Elemente sind in einem <dl> enthalten
document-title

Jedes HTML-Dokument ein nicht leeres <title>-Element enthält

duplicate-id Jeder Wert des Attributs id ist eindeutig 
empty-heading Überschriften haben einen erkennbaren Text 
heading-order Die Reihenfolge der Überschriften ist semantisch korrekt
html-has-lang Jedes HTML-Dokument hat ein lang-Attribut
html-lang-valid Das lang-Attribut des <html>-Elements hat einen gültigen Wert
html-xml-lang-mismatch HTML-Elemente mit gültigen lang- und xml:lang-Attributen stimmen mit der Basissprache der Seite überein
image-alt <img>-Elemente haben alternativen Text oder die Rolle "keine" oder "Präsentation"
image-redundant-alt Die Bildalternative wird nicht als Text wiederholt
justification Der Inhalt ist nicht mittig ausgerichtet
landmark-no-duplicate-main Das Dokument hat höchstens ein Haupt landmark
landmark-unique landmarks sollten eine eindeutige Kombination aus Rolle oder Rolle/Label/Titel (d. h. zugänglicher Name) haben.
link-name Links haben einen erkennbaren Text
list Listen sind korrekt aufgebaut
listitem

Sicherstellung der semantischen Verwendung von <li>-Elementen

meta-viewport-large <meta name="viewport"> kann in erheblichem Umfang skaliert werden
meta-viewport <meta name="viewport"> deaktiviert nicht die Skalierung und das Zoomen von Text
object-alt <Objekt>-Elemente haben alternativen Text
page-has-heading-one Die Seite oder mindestens einer ihrer Rahmen enthält eine Überschrift der Ebene eins
presentation-role-conflict Kennzeichnet Elemente, deren Rolle "keine" oder "Darstellung" ist und die Rollenkonfliktauflösung auslösen.
role-img-alt [role='img']-Elemente haben alternativen Text
tabindex Die Werte des Attributs tabindex sind nicht größer als 0
table-roles Tabellenrollen sind definiert
svg-img-alt <svg> Elemente mit einer img, graphics-document oder graphics-symbol Rolle haben einen zugänglichen Text
valid-lang lang-Attribute haben gültige Werte


Hilfe & Support

Sollten Sie Fragen haben oder Hilfe benötigen, können Sie jederzeit gerne unser Service Team kontaktieren.