Typografie

Das Erstellen und Entwerfen barrierefreier Inhalte umfasst mehr als nur die Auswahl einer gut lesbaren Schriftart. Selbst bei barrierefreien Schriftfamilien kann es für Nutzer mit eingeschränktem Sehvermögen, Kognition, Sprach- oder Lernschwächen aufgrund anderer Elemente wie Schriftvariationen, Größe, Abstände und Unterschneidung schwierig sein, den Text zu verarbeiten, um nur einige zu nennen.

In diesem Modul geht es um grundlegende Designüberlegungen, mit denen Sie Ihre Inhalte inklusiver gestalten und noch mehr Menschen erreichen können.

Schriftart

Ein wichtiger Faktor, der sich stark auf die Barrierefreiheit von Text auswirken kann, ist die Schriftart. Die Schriftart und der Stil können das Erscheinungsbild einer Seite entscheidend beeinflussen.

Menschen mit Lese-, Lern- und Aufmerksamkeitsstörungen wie Legasthenie und ADHS sowie Menschen mit eingeschränktem Sehvermögen können von barrierefreien Schriftarten profitieren.

Gängige Schriftarten verwenden Der schnellste Weg, ein barrierefreies Design zu erstellen, besteht darin, eine gängige Schriftart auszuwählen (z. B. Arial, Times New Roman, Calibri, Verdana und viele andere).

Viele Studien zu Schriftarten, bei denen Menschen mit Behinderungen getestet wurden, zeigen, dass gängige Schriftarten im Vergleich zu seltenen Schriftarten zu einer schnelleren Lesegeschwindigkeit und einem besseren Verständnis führen. Gängige Schriftarten sind nicht von Natur aus barrierefreier als andere Schriftarten. Einige Menschen mit Behinderungen können sie jedoch leichter lesen, weil sie viel Erfahrung mit diesen Schriftarten haben.

Achten Sie darauf, eine gängige Schriftart auszuwählen und reich verzierte oder handgeschriebene Schriftarten sowie Schriftarten mit nur einer Schriftart (z. B. nur Großbuchstaben) zu vermeiden. Diese speziellen Schriftarten mit Schreibschrift, skurril geformten Buchstaben oder künstlerischen Elementen wie dünnen Linien sehen zwar schön aus, sind aber für manche Menschen mit Behinderung viel schwerer zu lesen als gängige Schriftarten.

Buchstabenmerkmale und Kerning

Die Untersuchung, ob Serif- oder serifenlose Schriftbilder leichter zu lesen sind, ist nicht schlüssig, aber bestimmte Zahlen, Buchstaben oder Kombinationen können Menschen mit sprachbasiertem Lernen und kognitiven Beeinträchtigungen verwirren. Für Menschen mit diesen Arten von Behinderungen müssen alle Buchstaben und Zahlen klar definiert und eindeutig sein, damit Buchstaben nicht mit Zahlen verwechselt werden.

Häufig werden das Großbuchstaben „I“ (Indien), das Kleinbuchstaben „l“ (Salat) und die Zahl „1“ falsch lesbar sein. Ebenso können Buchstabenpaare wie b/d, p/q, f/t, i/j, m/w und n/u bei einigen Lesern manchmal entweder nach links rechts oder nach oben gedreht werden.

Die Lesbarkeit der Kopie nimmt auch ab, wenn der Buchstabenabstand oder die Unterschneidung zu eng ist. Achten Sie besonders auf das Kerning, insbesondere zwischen dem problematischen Buchstabenpaar „r/n“. Andernfalls könnten Wörter wie „Garn“ in „Glas“ oder „Stern“ in „Stamm“ umgewandelt werden, was die Bedeutung des Textes völlig verändern würde.

Open-Source-Schriftartensammlungen wie Google Fonts können Ihnen bei der Auswahl der inklusivesten Schriftart für Ihr nächstes Design helfen. Wenn Sie Adobe-Produkte verwenden, können Sie barrierefreie Schriftfamilien von Foundry-Partnern direkt in Ihre Designs einbetten – einschließlich der Auswahl von Google Fonts.

Achten Sie bei der Suche nach Ihrer nächsten Schriftart besonders auf Folgendes:

  • Verwenden Sie nach Möglichkeit gängige Schriftarten.
  • Vermeiden Sie die Verwendung von aufwendig gestalteten oder handgeschriebenen Schriftarten sowie Schriftarten mit nur einem Schriftschnitt.
  • Wählen Sie ein Schriftbild mit einzigartigen Merkmalen. Achten Sie dabei besonders auf das große I, das kleine l und die 1.
  • Prüfen Sie bestimmte Buchstabenkombinationen, um sicherzugehen, dass sie sich nicht genau spiegeln.
  • Prüfen Sie das Kerning, insbesondere zwischen den Buchstaben r und n.

Schriftgröße und typografische Gestaltung

Viele Menschen gehen davon aus, dass die Auswahl einer barrierefreien Schriftfamilie alles ist, was für die Erstellung inklusiver Inhalte erforderlich ist. Es ist jedoch auch wichtig, die Schriftgröße und die Art und Weise zu berücksichtigen, wie der Text auf einer Seite gestaltet ist.

Menschen mit eingeschränktem Sehvermögen oder Farbenblindheit können beispielsweise nicht den gesamten Text lesen, wenn er zu klein ist, und verwenden einen Browserzoom, um den Text zu lesen. Andere Nutzer, z. B. Menschen mit Legasthenie oder Lesestörungen, haben möglicherweise Probleme beim Lesen kursiver Texte. Screenreader ignorieren oft Stilmethoden wie Fettdruck und Kursivschrift, sodass die Absicht dieser Stile für blinde oder sehbehinderte Nutzer nicht vermittelt wird.

Don'ts
h2 {font-size: 16px;}
Do
h2 {font-size: 1rem;}

Da Sie nicht vorhersagen können, welche Anforderungen die einzelnen Nutzer haben, sollten Sie beim Hinzufügen von Schriftarten zu Ihren Websites und Webanwendungen die folgenden Richtlinien beachten:

  • Basisschriftgrößen sollten mit einem relativen Wert (%, rem oder em) definiert werden, um eine Größenanpassung zu ermöglichen.
  • Begrenzen Sie die Anzahl der Schriftartenvarianten wie Farbe, Fett, GROSSBUCHSTABEN und Kursiv, um die Lesbarkeit zu verbessern. Verwenden Sie stattdessen Methoden, um Wörter in Ihrem Text hervorzuheben, z. B. Sternchen, Bindestriche oder einzelne Wörter.
  • Verwenden Sie nach Möglichkeit Markup anstelle von Text auf Bildern. Screenreader können ohne zusätzlichen Code keinen eingebetteten Text in Bildern lesen. Außerdem kann eingebetteter Text verpixelt werden, wenn Nutzer mit Sehbehinderung ihn heranzoomen.

Struktur und Layout

Schriftart, Schriftgröße und typografischer Stil sind zwar wichtig für barrierefreie Typografie, aber auch die Struktur und das Layout des Texts auf einer Seite können für das Verständnis der Nutzer ebenso wichtig sein.

Komplexe Layouts können für Menschen mit eingeschränktem Sehvermögen, Leseschwierigkeiten und für die 6, 1 Millionen Menschen in den USA mit ADHS eine echte Barriere darstellen. Aufgrund fehlender klarer linearer Pfade, fehlender Überschriften und nicht gruppierter Elemente ist es für Menschen mit diesen Arten von Behinderungen schwieriger, den Überblick zu behalten und dem Textfluss zu folgen.

Ein wichtiger Aspekt barrierefreier Layouts besteht darin, wichtige Elemente voneinander abzuheben und ähnliche Elemente zu gruppieren. Wenn die Elemente zu nah beieinander liegen, ist es manchmal schwer zu erkennen, wo ein Element beginnt und wo es endet, insbesondere wenn sie ein ähnliches Design haben.

Stellen Sie sich Ihren Text als Sammlung einzelner Aufzählungspunkte in einer Gliederung vor. So können Sie die gesamte Seitenstruktur planen und bei Bedarf Überschriften, Zwischenüberschriften und Listen verwenden.

Abstand

Abstände zwischen Absätzen, Sätzen und Wörtern helfen den Lesern, sich auf den Text zu konzentrieren, und tragen zum visuellen Gesamteindruck der Seite bei. Lange Zeilen können für Leser mit Behinderungen eine Barriere darstellen, da sie den Überblick verlieren und den Lesefluss nicht mehr verfolgen können.

Ein schmaler Textblock erleichtert es den Lesern, zur nächsten Zeile überzugehen.

Inhaltsausrichtung

Ein weiteres Frustrationspotenzial für viele Menschen mit Beeinträchtigungen ist das Lesen gerechtfertigter Texte. Der ungleichmäßige Abstand zwischen den Wörtern bei Blocksatz kann dazu führen, dass sich auf der Seite „Rücksprünge“ bilden, die den Text schwer lesbar machen.

Durch den Blocksatz können Wörter auch unnatürlich aneinandergereiht oder gedehnt werden, sodass es für Leser schwierig ist, Wortgrenzen zu erkennen.

Zum Glück gibt es klare Richtlinien für den Abstand und Tools wie Good Line-Height und den Golden Ratio Calculator, mit denen wir unsere Texte barrierefreier gestalten können. Wenn Sie diese Richtlinien berücksichtigen, können sich Menschen mit Aufmerksamkeitsdefizit-Störungen, Lese- und Sehbehinderungen besser auf den Text und weniger auf das Layout konzentrieren.

Best Practices für Struktur und Layout

Beachten Sie bei der Struktur und dem Layout Folgendes:

  • Verwenden Sie Elemente wie Überschriften, Zwischenüberschriften, Listen, Zahlen, Zitatblöcke und andere visuelle Gruppierungen, um die Seite in Abschnitte zu unterteilen.
  • Verwenden Sie klar definierte Absätze, Sätze und Wortabstände.
  • Erstellen Sie Textspalten mit weniger als 80 Zeichen in der Breite (40 Zeichen für Logogramme).
  • Vermeiden Sie die Blocksatzausrichtung von Absätzen, da dadurch „Räumliche Risse“ im Text entstehen.

Erkenntnisse zur barrierefreien Typografie

Barrierefreie Typografie lässt sich auf gesunden Menschenverstand basierende Designentscheidungen zurückführen, die auf Ihrem Wissen über die Bedürfnisse der Nutzer beruhen. Wenn Sie dieses Modul beim Entwerfen und Erstellen Ihrer Inhalte im Hinterkopf behalten, können Sie mit der größten Anzahl von Menschen klar kommunizieren.

Wissenstest

Testen Sie Ihr Wissen über die Messung der Barrierefreiheit

Für gut lesbaren Text sollte ich immer einen hohen Kontrast zwischen Text und Hintergrund verwenden.

Richtig
Ein hoher Kontrast kann für einige Menschen mit Sehbehinderung hilfreich sein, andere haben jedoch Behinderungen, die das Lesen von Inhalten mit hohem Kontrast erschweren.
Falsch
Manche Menschen mit Beeinträchtigungen können deine Inhalte nicht lesen, wenn der Kontrast zu hoch ist. Lassen Sie nach Möglichkeit den Kontrast von den Einstellungen des Betriebssystems des Nutzers bestimmen.

Welche Schriftarten eignen sich am besten für die Barrierefreiheit?

Systemschriften wie Arial und Verdana
Gängige Schriftarten führen im Vergleich zu weniger gängigen Schriftarten zu einer höheren Lesegeschwindigkeit und einem besseren Verständnis.
Barrierefreie Schriftarten
Barrierefreie Schriftartensammlungen wie die Google Foundry auf Adobe Fonts können Ihnen bei der Auswahl der inklusivesten Schriftart für Ihr nächstes Design helfen.
Ist nicht schlimm.
Mit der Auswahl der Schriftart können Sie die Lesbarkeit beeinflussen. Vermeiden Sie ausgefallene Schriftarten und Kunstschriften.