Barrierefreie Formatierung

Textinhalte und Umbrüche

Texte ab zwei Zeilen sollten linksbündig ausgerichtet sein. Dies verbessert die Lesbarkeit, da es einen einheitlichen Startpunkt für jede Zeile bietet. Vermeiden Sie Blocksatz, der zu unregelmäßigen Wortabständen führt und ein Verfolgen des Textes schwerer macht. Die Schriftgröße für Textinhalte sollte mindestens 14px betragen, damit der Text für Menschen mit Sehbehinderungen gut lesbar ist.

Wenn Sie Custom-HTML verwenden, vermeiden Sie mehrfache <br>-Tags zur Absatztrennung. Diese haben keine semantische Bedeutung und können von Screenreadern nicht interpretiert werden. Stattdessen sollte das <p>-Tag verwendet werden, um Absätze zu definieren, sowie Margin und Padding, um Abstände festzulegen, und so eine klare und barrierefreie Struktur zu gewährleisten.

Anpassbare Textabstände

Digitale Kommunikation muss so gestaltet sein, dass Nutzer bestimmte Textabstände anpassen können, ohne dass dabei Inhalt oder Funktionalität verloren gehen oder Text abgeschnitten oder überlappt wird. Es geht nicht darum, dass der Autor diese Abstände von vornherein einstellen muss, sondern vielmehr darum, dass das zum Lesen der E-Mails genutzte E-Mail-Programm oder der Browser robust genug sind, um solche Anpassungen durch den Nutzer zu verkraften. Dies ermöglicht es Menschen mit verschiedenen Bedürfnissen, die Lesbarkeit von Text für sich zu optimieren.

Konkret bezieht sich das Kriterium auf die Möglichkeit, folgende Textabstände anzupassen:

• Zeilenabstand (line-height): Der Abstand zwischen zwei aufeinanderfolgenden Zeilen muss mindestens auf das 1,5-fache der Schriftgröße vergrößert werden können.
• Absatzabstand (margin): Der Leerraum nach einem Absatz muss mindestens auf das 2-fache der Schriftgröße vergrößerbar sein.
• Wortabstand (word-spacing): Der Abstand zwischen einzelnen Wörtern muss mindestens auf das 0,16-fache der Schriftgröße vergrößert werden können.
• Zeichenabstand (letter-spacing): Der Abstand zwischen einzelnen Buchstaben innerhalb eines Wortes muss mindestens auf das 0,12-fache der Schriftgröße vergrößerbar sein.

Buttons und Links

Buttons benötigen einen aussagekräftigen Beschriftungstext. Dieser informiert sowohl Nutzer als auch Screenreader über die Funktion und die auslösbare Aktion des Buttons. Um Unklarheiten zu vermeiden, ist es wichtig, dass Button-Texte im jeweiligen Kontext eindeutig und nicht wiederholend sind. Denken Sie daran, dass wichtige Handlungsaufforderungen (z. B. „Jetzt anmelden“ oder „Mehr erfahren“) immer in Textform vorliegen sollten, damit Nutzer diese nicht aufgrund blockierter Bilder verpassen.

Links vermitteln über ihren Linktext Informationen zu ihrer Funktion und dem damit verbundenen Linkziel. Um die Navigation zu optimieren und Mehrdeutigkeiten auszuschließen, sollten Linktexte ebenfalls einzigartig sein. Generische Linktexte wie „Hier klicken“ sollten vermieden werden. Zusätzlich empfiehlt es sich, jedem Link ein Titel-Attribut hinzuzufügen, das als Tooltip erscheint und weitere nützliche Informationen für alle Nutzer bietet.
Zudem sollten Links speziell hervorgehoben werden, um sie visuell von normalem Text abzuheben und ihre Erkennbarkeit und Interaktionsmöglichkeiten für Menschen mit Sehbehinderungen zu verbessern. Dies kann durch folgende Maßnahmen erreicht werden:

• Unterstreichen
• Farbgebung, mit ausreichendem Kontrast zum Hintergrund (siehe Kontraste für Textinhalte und Bilder)
• Fettdruck

Die Umsetzung von mindestens zwei der drei Möglichkeiten (Unterstreichen, Farbgebung und Fettdruck) zur Hervorhebung von Links wird empfohlen.

Kontraste für Textinhalte und Nichttextinhalte

Visuelle Kontraste spielen eine entscheidende Rolle für die Wahrnehmbarkeit von Inhalten, insbesondere für Nutzer mit Sehbeeinträchtigungen. Entscheiden Sie sich für kontrastreiche Kombinationen: Wählen Sie für Text- und Hintergrundfarben Kombinationen mit hohem Kontrast, wie beispielsweise dunklen Text auf hellem Hintergrund oder umgekehrt. Testen Sie den Farbkontrast auf verschiedenen Geräten (Mobil, Desktop), um Lesbarkeit bei unterschiedlichen Licht- und Bildschirmbedingungen zu gewährleisten.

Spezifische Kontrastanforderungen für Textinhalte (Mindestwerte):

• Großer Text (mindestens 24px oder 18,7px fett) erfordert ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund
• Kleiner Text (unter 24px oder 18,7px fett) erfordert ein höheres Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund

Spezifische Kontrastanforderungen für Grafiken und Buttons (Mindestwerte):

• Informationstragende Grafiken, Buttons und Icon-Buttons müssen ein Kontrastverhältnis von mindestens 3:1 zwischen Elementfarbe und Hintergrund aufweisen.

Für nicht sichtbare, inaktive oder dekorative Elemente sowie für Markenlogos besteht keine Anforderung an das Kontrastverhältnis.

Zur Überprüfung des Kontrastverhältnisses kann der WEBAIM Contrast Checker verwendet werden.