Barrierefreie Assets erstellen: Typografie

Klarer, lesbarer Text ist wichtig für eine barrierefreie Website. Die Typografie wirkt sich darauf aus, wie leicht Nutzer deine Inhalte lesen, verstehen und sich mit ihnen beschäftigen können. In diesem Artikel erfährst du, wie du barrierefreie Schriftarten auswählst, die richtige Größe und den richtigen Zeilenabstand festlegst und den Text so strukturierst, dass er lesbar ist. Befolge diese Richtlinien, um sicherzustellen, dass deine Typografie ein inklusives Erlebnis für alle Besucher/innen bietet.

Anforderungen

• Wenn du Auszeichnungssprachen verwendest, die bestimmte Textstileigenschaften unterstützen, führt eine Anpassung dieser Eigenschaften wie folgt nicht zu einem Verlust von Inhalt oder Funktion:
  • Setze die Zeilenhöhe (Zeilenabstand) auf mindestens das 1,5-fache der Schriftgröße;
  • Setze den Abstand nach Absätzen auf mindestens das 2-Fache der Schriftgröße;
  • Setze den Buchstabenabstand (Laufweite) auf mindestens das 0,12-fache der Schriftgröße;
  • Setze den Wortabstand auf mindestens das 0,16-fache der Schriftgröße.
• Die Textgröße kann ohne Hilfsmittel um bis zu 200 Prozent verändert werden, ohne dass der Inhalt oder die Funktionalität verloren geht.
• Die Seite sollte immer noch funktional sein.
• Die Seite muss es Nutzern ermöglichen, auf mobilen Geräten hineinzuzoomen. Das Folgende ist NICHT erlaubt:
  <meta name="viewport" content="user-scalable=no">.
• Der Inhalt kann ohne Informations- oder Funktionsverlust dargestellt werden, ohne dass ein Scrollen in zwei Dimensionen erforderlich ist:
  • Vertikal scrollende Inhalte mit einer Breite, die 320 CSS-Pixeln entspricht;
  • Horizontal scrollende Inhalte mit einer Höhe, die 256 CSS-Pixeln entspricht.
• Biete eine Textalternative für informative CSS-generierte Inhalte an und erwäge, den CSS-generierten Text auf aria-hidden="true" zu setzen.
• Verwende keinen Text in Bildern, wenn du stattdessen echten Text verwenden kannst, es sei denn, er ist unverzichtbar (wie ein Logo) oder du brauchst bestimmte Schriftarten, Größen, Farben oder Hintergründe.
• Wenn es erforderlich ist, das Bild eines Textes zu verwenden, befolge die Richtlinien für Farbe und Kontrast.
• Text muss den Richtlinien für Farbe und Kontrast entsprechen.

Ausnahmen

Scrollen in zwei Dimensionen

Es ist für Abschnitte des Inhalts erlaubt, die für das Verständnis oder die Benutzerfreundlichkeit ein zweidimensionales Layout benötigen, z. B. große Tabellen.

Textabstände für bestimmte Sprachen

Einige Textstileigenschaften gelten möglicherweise nicht für alle Sprachen und Schriften. Der Buchstabenabstand gilt zum Beispiel nicht für Sprachen mit Logogrammen wie Chinesisch. Der Wortabstand und die Zeilenhöhe sind in solchen Fällen aber trotzdem wichtig.

Beispiele

	DO: Wenn du den allgemeinen Zoom in Chrome verwendest, verliert die Seite nicht ihre Funktionalität und das Layout bleibt sinnvoll und ungebrochen. Auch die Reihenfolge der Elemente bleibt gleich.
	DON’T: In diesem Beispiel wird das Div, das den Text enthält, in Pixeln (px) festgelegt, sodass es sich nicht mit dem Inhalt ausdehnt. Wenn du die Höhe des Divs im Verhältnis zur Schrifthöhe mit ’em’ festlegst oder die Höhe des Divs gar nicht festlegst, kann der Text nicht über das Div hinauswachsen.