Barrierefreies HTML
Korrekte HTML-Syntax und vollständige Metadaten
Für die Barrierefreiheit von E-Mails ist eine korrekte HTML-Syntax bezüglich Tags, Verschachtelung sowie eindeutiger Attribute und IDs unerlässlich, um eine fehlerfreie Interpretation durch Screenreader zu gewährleisten. Der Design Editor in Optimizely Campaign erstellt bereits ein HTML, das diesen Anforderungen gerecht wird. Achten Sie zusätzlich darauf, dass die folgenden Elemente vorhanden sind:
- Titel-Element zur Unterscheidung mehrerer geöffneter Dokumente in Browser-Tabs
- Angabe der Standardsprache zur korrekten Aussprache des Inhalts durch einen Screenreader
- Angabe des Content-Typs und des verwendeten Zeichensatzes. Im Design Editor von Optimizely Campaign wird dies standardmäßig wie folgt gesetzt:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Note
Wenn Sie mit Custom-HTML arbeiten, nutzen Sie zur Prüfung den offiziellen HTML-Validator des W3C.
Nutzung von semantischem HTML
Semantisches HTML schafft eine logische Gliederung des Inhalts und definiert die inhaltliche Rolle der Elemente. Damit wird es Browsern und Screenreadern ermöglicht, verschiedene Inhalte entsprechend zu interpretieren und sinnvoll zu präsentieren. Im Folgenden finden Sie eine Übersicht über die wichtigsten semantischen HTML-Elemente (standardmäßig in Optimizely Campaign gesetzt):
- Überschriftenebenen mit <h1>, <h2>, <h3>
- Absätze mit <p>
- Listen mit <ul> (unordered list), <ol> (ordered list) sowie <li> (list items)
- Tabellen mit <table>, <thead>, <tbody>, <th> und <td>
- Formulare mit <form>
Note
Buttons können derzeit noch mit class="button" erzeugt werden, da einige E-Mail-Programme das semantische <button>-Element bisher nicht unterstützen.
Important
Semantisches vs. strukturelles HTML: Semantisches HTML verwendet den Inhalt beschreibende HTML-Elemente wie <h1>, <p> und <table>, um die Bedeutung und Struktur des Inhalts zu kennzeichnen und ihn so für Browser, assistive Technologien und Entwickler verständlicher zu machen. Im Gegensatz dazu nutzt strukturelles, also nicht-semantisches HTML hauptsächlich generische Elemente wie <div> und <span>, deren Zweck primär in der visuellen Gestaltung liegt, ohne die inhaltliche Rolle des Elements zu definieren.
Hierarchische HTML-Struktur und Überschriften
Für die Barrierefreiheit und Benutzerfreundlichkeit ist es entscheidend, dass jedes HTML-Dokument eine einzigartige H1-Überschrift enthält, die den Hauptinhalt prägnant zusammenfasst und als wichtiger Orientierungspunkt für Screenreader dient. Überschriften sollten zudem individuell formuliert sein und Wiederholungen vermieden werden.
Darüber hinaus ist eine logische und hierarchische Strukturierung aller Überschriften (H1 bis H3) unerlässlich, um die Beziehungen zwischen den Inhalten klar zu vermitteln. H1 kennzeichnet die Hauptüberschrift, während H2 und H3 abnehmende Unterebenen darstellen und somit eine klare Gliederung für Nutzer und Suchmaschinen schaffen.
Nutzung von ARIA-Attributen
Neben dem Standard-HTML können sogenannte ARIA-Attribute (Accessible Rich Internet Applications) verwendet werden, um Screenreadern zusätzliche Instruktionen mitzugeben.
Der Design Editor in Optimizely Campaign kennzeichnet reine Layout-Elemente bereits automatisch mit dem ARIA-Attribut role="presentation". Dies hilft Screenreadern, zwischen Layouttabellen (die ausschließlich der visuellen Gestaltung dienen) und Datentabellen (mit aussagekräftigem Inhalt) zu unterscheiden, und verhindert, dass diese vorgelesen werden.
Weiterhin sind folgende Attribute möglich:
- aria-label="Beispielinhalt", um Elementen eine textuelle Beschreibung mitzugeben, die von einem Screenreader zusätzlich vorgelesen wird. ARIA-Labels sollten prägnant, klar und bedeutsam für die Nutzer von assistiven Technologien sein.
- aria-hidden="true", um Elemente zu verbergen, wenn diese rein dekorativer Natur sind und/oder deren Inhalt an anderer Stelle wiederholt wird. Es sollte nicht auf Elemente angewendet werden, die wichtigen Inhalt oder Interaktionsmöglichkeiten beinhalten.
Note
Während das Attribut role="presentation" in Optimizely Campaign standardmäßig für rein dekorative Layout-Tabellen gesetzt wird, können weitere ARIA-Attribute über die Custom Attributes-Funktion eingebunden werden.
Important
ARIA-Attribute: ARIA-Attribute sind HTML-Erweiterungen, welche die Barrierefreiheit verbessern, indem sie assistierenden Technologien zusätzliche semantische Informationen über Rollen, Zustände und Eigenschaften von UI-Elementen liefern, die im Standard-HTML nicht vorhanden sind.