zur Übersicht

Weitere Verbesserungen der Barrierefreiheits-Funktionen

Weitere Verbesserungen der Barrierefreiheits-Funktionen

16.01.2025: Bereits im Jahr 2021 haben wir viele Funktionen rund um das Thema Barrierefreiheit (Accessability, WAI) entwickelt, damit unsere Kunden ihre Newsletter möglichst barrierefrei verschicken können.

Mit dem neuen Barrierefreiheits-Gesetz, das im Juni 2025 in Kraft tritt, rückt das Thema für viele Unternehmen nun stärker in den Fokus.

Lesetipp: Die wichtigsten Änderungen, die das neue Gesetz mit sich bringt, haben wir Ende 2024 in unserem Blog-Artikel Was, bitte schön, ist das BaFG? beschrieben.

 

Viele automatische Anpassungen der Vorlagen

Damit unsere Kunden ihre Vorlagen möglichst wenig anpassen müssen, um ihre Mailings barrierefrei zu gestalten, haben wir eine ganze Reihe von Anpassungen programmiert, die völlig automatisch (!) für den HTML-Code aller Vorlagen und aller Abschnitte vorgenommen werden.

Für Techniker und Agenturen: Im Detail werden folgende Anpassungen durch Dialog-Mail automatisch durchgeführt, wenn die Barrierefreiheits-Features in den Einstellungen aktiviert ist:

  • Das Attribut „lang“ (Sprache) wird automatisch auf <html> tags gesetzt, wenn es noch nicht vorhanden ist. Die Sprache orientiert sich dabei an der Sprache der Versandgruppe.
  • Das Tag <title> wird im <head> Tag gesetzt, wenn es noch nicht vorhanden ist. Als Title wird die Betreffzeile eingetragen.
  • Überschriften werden mit role="heading" und aria-level="..." versehen, wobei der Level automatisch auf Basis des Levels der Überschrift in den Einstellungen der Styles gesetzt wird.
  • Layouttabellen werden automatisch mit role="presentation“ versehen (es sei denn, es gibt bereits ein „role“).
  • Das Attribut role="main" wird auf Block-Elemente gesetzt, wenn es noch nicht vorhanden ist. Hinweis: Wenn role="main" nicht gefunden wurde, wird automatisch ein DIV mit dem Attribut um den ###content### Platzhalter erzeugt, damit der Content-Bereich entsprechend markiert werden kann.
  • Das Attribut role="button" wird auf <a> Tags, welche die Klasse "emailButton" im Parent-Element haben, gesetzt. Damit werden Buttons als solche markiert.
  • Das Attribut role="separator" wird auf leere Tabellen gesetzt (es sei denn, es gibt bereits ein „role“-Attribut). Damit sollen Trennlinien o.ä. Elemente gekennzeichnet werden.
  • Das Attribut aria-hidden="true" wird auf alle leeren Elemente (td, p, div, h1, h2, h3, h4, h5, h6) gesetzt (es sei denn, es gibt bereits ein „role“-Attribut).
  • Das Attribut role="article" wird auf alle Tabellen-Elemente mit der Klasse „contents“ gesetzt (es sei denn, es gibt bereits ein „role“-Attribut). Damit sollen die einzelnen Artikel für Screen Reader o.ä. erkennbar sein.
  • Das Attribut role="contentinfo" wird auf den Block der rechtlichen Infos gesetzt (es sei denn, es gibt bereits ein „role“).
  • Tipp: Sie können das Attribut aria-hidden="true" setzen, wenn Elemente für Screen Reader o.ä. verborgen werden sollen.
  • Tipp: Sie können bei allen Abschnitten (DIV data-section)ein Attribut data-wai=“false“ setzen; wenn es gefunden wird, wird das Element nicht mehr weiter von Dialog-Mail behandelt.

Damit ist sichergestellt, dass sich der Aufwand für die Anpassungen der (bestehenden) Vorlagen an eine bestmögliche Barrierefreiheit für unsere Kunden auf ein Minimum beschränkt.