Typografie

Beim Erstellen und Entwerfen barrierefreier Inhalte geht es nicht nur um die Wahl einer leicht lesbaren Schriftart. Selbst mit barrierefreien Schriftfamilien haben Menschen mit eingeschränktem Sehvermögen, kognitiven Beeinträchtigungen, Sprach- oder Lernschwächen möglicherweise aufgrund anderer Elemente wie Schriftvariationen, Größe, Abstände und Unterschneidung Schwierigkeiten, den Text zu verarbeiten. 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 wesentlicher Faktor, der die Barrierefreiheit von Texten stark beeinflussen kann, ist das Schriftbild. Die Schriftart und der Stil Ihrer Website bestimmen das Design jeder Seite.

Menschen mit Lese-, Lern- und Aufmerksamkeitsstörungen wie Legasthenie und Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (AdHS) sowie Menschen mit eingeschränktem Sehvermögen können von barrierefreien Schriftbildern profitieren.

Gängige Schriftbilder auswählen Der schnellste Weg zur Erstellung eines barrierefreien Designs besteht darin, ein gängiges Schriftbild zu wählen (z. B. Arial, Times New Roman, Calibri, Verdana und viele andere).

Viele Schriftbildstudien, in denen Menschen mit Behinderungen getestet wurden, haben gezeigt, dass gängige Schriftbilder im Vergleich zu ungewöhnlichen Schriftbildern zu einer höheren Lesegeschwindigkeit und einem besseren Verständnis führen. Auch wenn diese gängigen Schriftbilder grundsätzlich nicht barrierefreier sind als andere Schriftbilder, fällt es einigen Menschen mit Beeinträchtigungen leichter, sie zu lesen, da sie viel Erfahrung mit der Arbeit mit (oder in der Nähe) dieser Schriftbilder haben.

Achten Sie nicht nur auf ein gängiges Schriftbild, sondern achten Sie auch darauf, kunstvolle oder handschriftliche Schriftarten sowie solche, in denen nur die Groß-/Kleinschreibung zu beachten ist, zu vermeiden (z. B. nur Großbuchstaben). Diese besonderen Schriftbilder mit Kursivdesigns, ausgefallenen Formen oder künstlerischen Elementen wie dünnen Linien sehen zwar gut aus, für manche Menschen mit Behinderungen sind sie jedoch viel schwerer zu lesen als gängige Schriftbilder.

Buchstabenmerkmale und Unterschneidung

Die Untersuchung, ob Serifen- oder Sans-Serif-Schriftbilder leichter zu lesen sind, ist nicht aussagekräftig, aber bestimmte Zahlen, Buchstaben oder Kombinationen können Menschen mit sprachbasiertem Lernen und kognitiven Beeinträchtigungen verwirren. Für Menschen mit diesen Arten von Beeinträchtigungen muss jeder Buchstabe und jede Zahl klar definiert sein und eindeutige Eigenschaften haben, damit Buchstaben nicht mit Zahlen verwechselt werden können.

Gängige Verstöße gegen die Lesbarkeit sind das Großbuchstaben "I" (Indien), das Kleinbuchstaben "l" (Salat) und die Zahl "1". Ebenso können Buchstabenpaare wie b/d, p/q, f/t, i/j, m/w und n/u manchmal für einige Leser entweder nach links nach rechts oder nach oben nach unten blättern.

Die Lesbarkeit der Kopie nimmt auch ab, wenn der Zeichenabstand oder die Unterschneidung zu eng ist. Achten Sie besonders auf die Unterschneidung, insbesondere zwischen dem problematischen Buchstabenpaar r/n. Andernfalls könnten sich Wörter wie „Garn“ in „Jam“ oder „ernst“ zu „Stamm“ ändern, was die Bedeutung des Textes komplett verändert.

Open-Source-Schriftsammlungen wie Google Fonts können Ihnen dabei helfen, die umfassendste Schriftart für Ihr nächstes Design auszuwählen. Wenn Sie Adobe-Produkte verwenden, können Sie barrierefreie Schriftfamilien von Foundry-Partnern direkt in Ihre Designs einbetten – dazu gehören auch ausgewählte 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 aufwendige oder handschriftliche Schriftarten und Schriftarten mit nur einer Groß-/Kleinschreibung.
  • Wählen Sie ein Schriftbild mit einzigartigen Eigenschaften. Achten Sie dabei besonders auf das große I, das kleine l und die 1.
  • Überprüfen Sie bestimmte Buchstabenkombinationen, um sicherzustellen, dass diese kein exaktes Abbild der anderen sind.
  • Überprüfen Sie die Unterschneidung, insbesondere zwischen den Buchstaben r/n.

Schriftgröße und typografischer Stil

Inklusive Inhalte erstellen oft nur eine barrierefreie Schriftfamilie. Dennoch ist es wichtig, die Schriftgröße und das Design des Textes auf einer Seite zu berücksichtigen.

Menschen mit eingeschränktem Sehvermögen oder Farbenblindheit können beispielsweise einen Teil des Textes nicht lesen, wenn dieser zu klein ist, und ihn mit einem AT wie dem Browser-Zoom lesen. Andere Nutzende, z. B. Menschen mit Legasthenie oder Lesestörungen, haben möglicherweise Schwierigkeiten, kursiven Text zu lesen. Screenreader ignorieren häufig Formatierungsmethoden wie Fett- oder Kursivschrift, sodass blinde Nutzer oder Nutzer mit eingeschränktem Sehvermögen die Absicht dieser Stile nicht vermitteln können.

Don'ts
h2 {font-size: 16px;}
Das sollten Sie tun:
h2 {font-size: 1rem;}

Da Sie die Anforderungen aller Nutzenden nicht vorhersagen können, sollten Sie beim Hinzufügen von Schriftarten zu Ihren digitalen Produkten die folgenden Richtlinien beachten:

  • Die Basisschriftgrößen sollten mit einem relativen Wert (%, rem oder em) definiert werden, um eine einfache Größenanpassung zu ermöglichen.
  • Begrenzen Sie die Anzahl der Schriftbildvariationen 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 das Hervorheben einzelner Wörter.
  • Verwenden Sie auf Bildern nach Möglichkeit Markup anstelle von Text. Screenreader können in Bildern eingebetteten Text nicht lesen (ohne zusätzlichen Code) und eingebetteter Text kann auch verpixelt werden, wenn Nutzer mit eingeschränktem Sehvermögen vergrößert werden.

Struktur und Layout

Während Schriftbild, Schriftgröße und typografischer Stil für die barrierefreie Typografie wichtig sind, können die Struktur und das Layout des Textes auf einer Seite für den Nutzer ebenso wichtig sein.

Komplexe Layouts können für Menschen mit eingeschränktem Sehvermögen, Leseschwächen und 6, 1 Millionen Menschen in den USA mit ADHS eine echte Hürde darstellen. Diese Arten von Beeinträchtigungen erschweren es Menschen, ihren Platz zu behalten und dem Textfluss zu folgen, da keine klaren linearen Pfade, fehlende Überschriften und nicht gruppierte Elemente vorhanden sind.

Ein wichtiger Aspekt barrierefreier Layout-Designs besteht darin, kritische Elemente voneinander abzugrenzen und ähnliche Elemente zu gruppieren. Wenn die Elemente zu nah sind, kann es schwierig sein, zu erkennen, wo ein Element beginnt und endet, insbesondere wenn sie einen ähnlichen Stil haben.

Stellen Sie sich Ihren Text als eine Sammlung einzelner Aufzählungspunkte auf einer Gliederung vor. So können Sie die Seitenstruktur insgesamt planen und gegebenenfalls Überschriften, Zwischenüberschriften und Listen verwenden.

Abstand

Absätze, Sätze und Wortabstände sind ebenfalls wichtig, da die Leser sich so besser auf den Text konzentrieren können und das Gesamtbild der Seite verbessert wird. Lange Zeilen können für Leser mit Beeinträchtigungen eine Hürde darstellen, da sie Schwierigkeiten haben, ihren Platz zu behalten und dem Fluss des Textes zu folgen. Ein schmaler Textblock erleichtert es den Lesern, zur nächsten Zeile zu gelangen.

Ausrichtung von Inhalten

Ein weiteres Frustrationspotenzial für viele Menschen mit Beeinträchtigungen ist das Lesen von gerechtfertigten Texten. Aufgrund der ungleichmäßigen Abstände zwischen Wörtern in einem im Blocksatz ausgerichteten Text können sich auf der Seite „Flüsse des Raums“ bilden, wodurch der Text schwer zu lesen ist.

Textausrichtung kann auch dazu führen, dass Wörter entweder gebündelt oder auf unnatürliche Weise gestreckt werden, sodass es für die Leser schwierig sein kann, Wortgrenzen zu finden.

Zum Glück gibt es klare Richtlinien für Abstände und Tools wie Good Line-Height (Gute Zeilenhöhe) und den Golden Ratio Calculator, um die Zugänglichkeit unserer Texte zu verbessern. Die Einbeziehung dieser Richtlinien hilft Menschen mit Aufmerksamkeitsdefizit-Störungen, Lese- oder Sehbehinderungen, sich mehr auf die Texte und weniger auf das Layout zu konzentrieren.

Best Practices für Struktur und Layout

Wenn Sie über Struktur und Layout nachdenken, sollten Sie Folgendes beachten:

  • Verwenden Sie Elemente wie Überschriften, Zwischenüberschriften, Listen, Zahlen, Anführungszeichen, Blöcke und andere visuelle Gruppierungen, um die Seite in Abschnitte zu unterteilen.
  • Verwenden Sie klar definierte Absätze, Sätze und Wortabstand.
  • Erstellen Sie Textspalten, die nicht länger als 80 Zeichen sind (40 Zeichen für Logogramme).
  • Vermeiden Sie eine Blockausrichtung, da in der Kopie „Flüsse an Freiraum“ entstehen.

Barrierefreie Typografie-Erkenntnisse

Barrierefreie Typografie kann auf gesunde Designentscheidungen beschränkt werden, die auf Ihrem Wissen über die Anforderungen der Nutzenden basieren. Wenn Sie dieses Modul beim Entwerfen und Ausbauen Ihrer Inhalte im Hinterkopf behalten, können Sie mit den meisten Personen klar kommunizieren.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über die Messung der Barrierefreiheit

Für eine lesbare Kopie sollte ich immer einen hohen Kontrast zwischen dem Text und dem Hintergrund verwenden.

Richtig
Während ein hoher Kontrast für manche Menschen mit Sehbeeinträchtigungen wertvoll ist, leiden andere möglicherweise unter Beeinträchtigungen, die das Lesen von Inhalten mit hohem Kontrast erschweren.
Falsch
Manche Menschen mit Behinderungen können Ihre Inhalte nicht lesen, wenn der Kontrast zu hoch ist. Wenn möglich, lassen Sie den Kontrast in den Betriebssystemeinstellungen des Nutzers bestimmen.

Welche Schriftarten sind für die Barrierefreiheit am besten geeignet?

Systemschriftarten wie Arial und Verdana
Gängige Schriftbilder führen im Vergleich zu ungewöhnlichen Schriftbildern zu schnelleren Lesegeschwindigkeiten und einem tieferen Verständnis.
Barrierefreie Schriftbilder.
Barrierefreie Schriftbildsammlungen wie das Google Foundry auf Adobe Fonts können Ihnen dabei helfen, das inklusiveste Schriftbild für Ihr nächstes Design auszuwählen.
Ist nicht schlimm.
Die Lesbarkeit kann durch die Auswahl der Schriftart beeinflusst werden. Vermeiden Sie aufwendige Skripte und künstlerische Schriftarten.