Welche Anforderungen erfüllt barrierefreier Html-Code?

Der Aufbau Ihres Html-Codes bestimmt, wie gut ein Screenreader Ihren Newsletter vorlesen kann. Dies spielt bei einem importierten Newsletter oder einer selbst erstellten Vorlage eine Rolle. Im Drag & Drop-Editor legen Sie das Html nicht selbst fest.

Verwenden Sie einfachen, semantischen Code

Das Html für Newsletter ist oft komplex, da es in vielen verschiedenen E-Mail-Clients funktionieren muss. Halten Sie den Code dennoch so einfach wie möglich, insbesondere für Screenreader. Auch mit einfacherem Code können Sie einen schönen und modernen Newsletter erstellen.

Wählen Sie Tags, die zum Inhalt passen. Setzen Sie eine Überschrift in ein <h>-Tag, damit ein Screenreader sofort erkennt, dass es sich um eine Überschrift handelt:

<h1>Titel des Newsletters</h1>
<h2>Überschrift eines Artikels</h2>
<p>Ein Textabsatz.</p>
<ul>
  <li>Ein Punkt in einer Aufzählung</li>
</ul>

Verwenden Sie absteigende Überschriften-Tags (beginnen Sie mit <h1>, darunter <h2> und so weiter), ein <p> für einen Absatz und <ol>, <ul> oder <dl> für Listen mit darin enthaltenen <li>-Tags.

Achten Sie auch auf die Reihenfolge im Code. In Html muss die Reihenfolge der Tags nicht mit der sichtbaren Reihenfolge des Inhalts übereinstimmen, ein Screenreader hält sich jedoch an die Reihenfolge im Code. Achten Sie vor allem bei mehreren Spalten darauf, dass diese Lesereihenfolge logisch bleibt.

Beschränken Sie Tabellen und verwenden Sie role=“presentation”

Tabellen werden in Newslettern oft für das Layout verwendet, obwohl sie dafür nicht gedacht sind. Verwenden Sie sie so wenig wie möglich. Wenn Tabellen dennoch nötig sind, was meistens der Fall ist, solange es Outlook gibt, fügen Sie jeder Tabelle, die einen Teil des Inhalts enthält, das Attribut role="presentation" hinzu:

<table role="presentation">
  <tr>
    <td>Ein Teil des Inhalts des Newsletters</td>
  </tr>
</table>

Ein Screenreader liest dann nicht alle einzelnen Zellen (<td>-Tags) vor, sondern nur den relevanten Text.

Tastaturnutzung und Zoomen berücksichtigen

Nicht jeder nutzt eine Maus. Alle Inhalte müssen daher auch über die Tastatur erreichbar sein, damit beispielsweise Links angeklickt werden können. Dies können Sie testen, indem Sie mit der Tab-Taste durch die E-Mail navigieren: Alle wichtigen Elemente müssen in einer logischen Reihenfolge auswählbar sein. Wenn die Reihenfolge in Ihrem Html logisch ist, klappt dies meistens von selbst.

Einige Leser vergrößern den Text, um den Newsletter besser lesen zu können. Auf einem Desktop tun sie dies mit Strg und + oder Command und + und auf einem Telefon oder Tablet mit einer Zwei-Finger-Zoom-Bewegung (‘Pinchen’). Als Faustregel gilt, dass der Newsletter bis zu einer Vergrößerung von 200 % gut lesbar bleiben muss.

Verwenden Sie das alt-Attribut richtig

Viele E-Mail-Clients zeigen standardmäßig keine Bilder an. Der Text im alt-Attribut erscheint dann an der Stelle des Bildes. Für die Barrierefreiheit ist der Alt-Text mehr als nur eine Alternative für das Bild: Er ist ein wesentlicher Bestandteil des Inhalts.

Unterscheiden Sie daher zwischen zwei Arten von Bildern:

• Geben Sie einem rein illustrativen Bild ein leeres alt-Attribut (alt="").
• Geben Sie einem Bild, das Teil des Inhalts ist, einen Alt-Text, der das Bild so gut wie möglich ersetzt. Was Sie genau in einen solchen Text schreiben, lesen Sie unter dem Inhalt Ihres Newsletters. Wenn Sie im Editor arbeiten, können Sie den Alt-Text direkt beim Block selbst eingeben.

Überprüfen Sie Ihren Newsletter

Sie können die Barrierefreiheit auf verschiedene Weisen überprüfen:

• Nutzen Sie WAVE. Laposta verwendet dieses Tool selbst, um die eigens erstellten Vorlagen zu überprüfen.
• Nutzen Sie die Funktionen zur Barrierefreiheit in den Entwicklertools von Chrome. Verwenden Sie hierfür die Webversion Ihrer E-Mail.
• Testen Sie selbst: Betrachten Sie die E-Mail, ohne Bilder zu laden, lassen Sie den Newsletter von einem Screenreader wie VoiceOver von Apple vorlesen, navigieren Sie mit der Tastatur durch den gesamten Inhalt und probieren Sie das Zoomen aus.

Wenn Sie lieber nicht selbst bauen möchten, kann Laposta eine barrierefreie Vorlage für Sie entwerfen und erstellen.

Verwandte Artikel