Worauf achten Sie für ein barrierefreies Design?
Das Design bestimmt, wie gut der Text Ihres Newsletters zu lesen ist. Berücksichtigen Sie daher schon während der Gestaltung die unten stehenden Punkte. Sie schränken Ihre gestalterischen Möglichkeiten etwas ein, aber Sie können dennoch einen schönen und modernen Newsletter erstellen.
Text gut lesbar machen
Die unten stehenden Einstellungen hängen miteinander zusammen: Eine große Schrift hilft beispielsweise wenig, wenn die Zeilen zu dicht beieinander stehen.
- Textgröße: Für viele Menschen ist eine Schriftgröße unter 14px bereits schwer zu lesen. Verwenden Sie daher mindestens 14px. Auf mobilen Bildschirmen wird Text oft noch kleiner dargestellt. Verwenden Sie Media Queries, um dort mindestens 16px zu garantieren.
- Schriftart: Dank Webfonts haben Sie eine große Auswahl, aber nicht jede Schriftart ist gleich gut lesbar. Wählen Sie eine Schriftart, die einer Schreibschrift nicht zu sehr ähnelt und bei der der Abstand zwischen den Buchstaben nicht zu klein ist. Achten Sie auch auf die Fallback-Schriftart, die angezeigt wird, wenn der E-Mail-Client des Empfängers keine Webfonts unterstützt.
- Weißraum: Halten Sie den Zeilenabstand mindestens 2px größer als die gewählte Textgröße und lassen Sie Platz zwischen den Absätzen. Ein Abstand zwischen dem Text und den Rändern der E-Mail sowie zwischen Bildern und Text macht Ihren Newsletter besonders übersichtlich.
- Ausrichtung: Richten Sie Ihren Text linksbündig aus. Das liest sich am angenehmsten. Blocksatz („justified“) ist im Druckbereich üblich, aber auf einem Bildschirm sorgt der unregelmäßige Abstand zwischen den Wörtern für ein unruhiges Bild.
Farbe, Bild und Bewegung berücksichtigen
- Kontrast: Menschen mit eingeschränktem Sehvermögen profitieren von einem deutlichen Farbunterschied, vor allem zwischen dem Text und dem Hintergrund. Achten Sie auch auf Ihre Farbkombinationen für Menschen mit Farbenblindheit.
- Anzahl der Bilder: Für Menschen mit einer Sehbehinderung sind Bilder weniger geeignet. Sie können natürlich Bilder verwenden, aber sorgen Sie für ein ausgewogenes Verhältnis zwischen Text und Bild.
- Text in einem Bild: Wenn Sie Text als Bild einfügen, haben Sie mehr Kontrolle über das Aussehen, aber ein Screenreader kann diesen Text nicht vorlesen. Fügen Sie daher den gesamten Text in Ihrem Newsletter als normalen (reinen) Text ein.
- Blinkender Inhalt: Schnell blinkende Bilder oder Farben können bei Menschen, die darauf empfindlich reagieren, einen Anfall auslösen. Verwenden Sie diese daher lieber nicht.
Schaltflächen und Links zum Antippen
Gestalten Sie Schaltflächen und Links groß genug. Das hilft Menschen, die ihre Maus oder ihre Finger nicht sehr präzise bewegen können, und auf kleinen Bildschirmen merkt jeder Leser den Unterschied. Der Text auf einer solchen Schaltfläche ist ebenfalls wichtig: Mehr dazu lesen Sie unter die Texte von Links und Schaltflächen.
Ihr Design überprüfen
- Betrachten Sie den Newsletter ohne Bilder und vergrößern Sie den Inhalt durch Heranzoomen. Überprüfen Sie, ob dann immer noch alles gut aussieht.
- Testen Sie mit einem Online-Tool, ob der Farbkontrast groß genug ist, zum Beispiel über https://contrastchecker.com.
Lesen Sie auch, wie Sie beim Aufbau des HTML-Codes auf Barrierefreiheit achten.