Barrierefreie Schrift für Deine Website

Barrierefreiheit ist ein wichtiger Bestandteil moderner Webgestaltung. Ein wichtiger Aspekt ist die Wahl der richtigen Schriftart. In diesem Ratgeber erfährst Du daher alles Wichtige zum Thema barrierefreie Schrift für Websites. Los geht’s!

Was ist eine barrierefreie Schrift?

Barrierefreie Schrift bedeutet, dass sie von möglichst vielen Menschen problemlos gelesen und verstanden werden können. Dies umfasst Menschen mit Sehbehinderungen, Legasthenie oder anderen Beeinträchtigungen, die das Lesen erschweren könnten.

Durch eine barrierefreie Schrift wird Deine Website also für alle Menschen zugänglich und gesetzeskonform. Denn der Gesetzgeber schreibt eine barrierefreie Website vor (siehe Barrierefreiheit-Gesetze im Überblick).

Empfohlene barrierefreie Schriften

Menschen sind vielfältig, das gilt auch für die Sehbeeinträchtigungen und so individuell sind die Bedürfnisse. Eine absolut universelle barrierefreie Schrift gibt es daher zwar nicht, aber einige Schriften eignen sich bessere als andere.

Empfehlenswert sind humanistische, serifenlose Schriften, auch dynamische Grotesk oder serifenlose Renaissance-Antiqua genannt.

Sie bieten eine gute Balance zwischen Ästhetik und Lesbarkeit für die meisten Nutzergruppen. In Betriebssystemen oder anderer Software sind die Schriften „Lucida Sans“, „Calibri Regular“ und „Verdana Regular“ ebenfalls gut geeignet für barrierefreies Lesen. Nun aber eine Aufzählung von empfehlenswerten, barrierefreien Schriften.

• Atkinson Hyperlegible (zur Anbieterseite der Atkinson Hyperlegible Schriftart)
• Frutiger 55 Roman (zum Font-Shop der Frutiger 55 Roman) und Neue Frutiger (kostenpflichtig, nutzt der Deutsche Blinden- und Sehbehindertenverband, zum Font-Shop der Neue Frutiger)
• FF Unit (kostenpflichtig, wird vom Deutschen Blinden- und Sehbehindertenverband als positives Beispiel genutzt)
• Semikolon Plus (zur Anbieterseite von Semikolon Plus)
• Noto Sans Regular (zu Google Fonts für Noto Sans Regular wechseln)
• Open Sans Regular (zu Google Fonts für Open Sans Regular wechseln)
• Fira Sans Regular (von uns genutzt, zu Google Fonts für Fira Sans wechseln)
• Myriad Regular (kostenpflichtig, zum Adobe-Shop für Myriad Regular)

Legasthenie

• Open Dyslexic (zur Anbieterseite der Open Dyslexic)
• Dyslexie Font (zur Anbieterseite der Dyslexie Font)

CTA-Texte (Call to action)

Bedenke, dass Du vor allem bei kurzen, prägnanten Textbausteinen (Kontaktformulare, Warenkorb etc.) auf eine barrierefreie Schrift setzen solltest. Denn diese Situationen beziehungsweise Signalisationstexte fordern grundsätzlich die höchste mögliche Lesbarkeit. Hier sind humanistische, serifenlose Schriftarten ideal.

Klassische Schriftarten

Schriftarten wie Arial oder Helvetica zählen zu den klassizistischen, serifenlosen Schriften und gelten eher als nicht barrierefreie.

Kosten und Implementierung

Wie bei allen Web Fonts (Website-Schrift) gibt es sowohl kostenlose als auch kostenpflichtige Varianten. Sofern die hier genannten barrierefreien Schriften kostenpflichtig sind, werden wir Dich darauf hinweisen.

Gleiches gilt für die Implementierung in WordPress oder anderen Website-Systemen. Sie unterscheidet sich nicht von der Implementierung herkömmlicher Schriften.

Allgemeine Anforderungen

Schriftwahl und Schriftgestaltung

• Klare, serifenlose Schriften: Wir empfehlen Dir, serifenlose Schriftarten. Wenn keine Dir keine der oben genannten barrierefreien Schriften zusagt, achte auf unterscheidbare Buchstaben, vor allem „I“, „l“ und „1“ oder „O“ und „0“ solltest Du prüfen.
• Serifen-Schrift: Solltest Du zwingend eine Serifen-Schrift nutzen müssen oder wollen, achte darauf, dass sich die Serifen nicht berühren. Außerdem sollte die Schrift dem dynamischen Formenprinzip (Renaissance-Antiqua) folgen.
• Buchstabenformen: Geschlossene Buchstabenformen sind weniger barrierefrei als offene Buchstabenformen.
• Buchstaben- und Wortabstände: Ausreichende Abstände zwischen den Buchstaben (Tracking) sowie zwischen den Wörtern verhindern, dass die Buchstaben optisch „verschmelzen“. Dies unterstützt das schnelle Erfassen von Wörtern. Aus „r“ und „n“ kann schnell ein „m“ werden.
• Schriftgröße und Zeilenhöhe: Wir empfehlen Dir eine Mindestschriftgröße von mindestens 19 Pixel (px) oder etwa 14 Punkt (pt) für Fließtexte. Zusätzlich sollte der Zeilenabstand mindestens 1,5-fach der Schriftgröße betragen, um das Ablesen einzelner Zeilen zu erleichtern.

WCAG-Kriterien und deren Einfluss auf typografische Anforderungen

• WCAG 1.4.3 Kontrast (Minimum): Diese Richtlinie fordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für große Schrift (mindestens 18 pt oder 14 pt fett).
• WCAG 1.4.4 (und Aspekte von 1.4.10 – Reflow): Der Text muss bis zu 200 % vergrößert werden können, ohne dass Inhalte abgeschnitten oder horizontales Scrollen erforderlich wird.
• WCAG 1.4.12 Textabstände: Es muss möglich sein, Zeilen-, Wort- und Buchstabenabstände anzupassen, ohne dass der Inhalt unleserlich wird.

Weitere Empfehlungen für eine barrierefreie Schrift

• Vermeidung von All-Caps und reiner Kursivschrift: Texte, die ausschließlich in Großbuchstaben oder kursiv gesetzt sind, können die Lesbarkeit erheblich beeinträchtigen, da die individuellen Buchstabenformen weniger erkennbar sind.
• Optimale Zeilenlänge: Eine Zeilenlänge von maximal 80 Zeichen (inklusive Leerzeichen) erleichtert das flüssige Lesen und unterstützt den Lesefluss.

Barrierefreie Farben und Farbkontraste

Zu einer barrierefreien Schrift gehören auch die Themen Farbe und Farbkontraste. Achte immer darauf, einen hohen Kontrast zwischen Text und Hintergrund zu wählen. Das muss und sollte nicht zwingend schwarzer Text auf weißem Hintergrund sein, da dies bei einigen Beeinträchtigungen auch zu unangenehmen Spiegelungen führen kann.

Schriftgrafiken

Schriftgrafiken, also Text, der in ein Bild eingebettet ist, müssen wir zum Thema barrierefreie Schrift auch kurz beleuchten.

Vielleicht weißt Du bereits, dass Schriftgrafiken aus Sicht der Barrierefreiheit problematisch sind. Hauptsächlich deshalb, weil sie nicht manipulierbar sind (anpassbar, skalierbar, durchsuchbar, Screenreader-lesbar).

Wenn Du trotzdem eine Schriftgrafik nutzen möchtest, achte darauf, dass die verwendete Schrift eine barrierefreie ist. Idealerweise nutzt Du dann auch kein JPG oder PNG, sondern eine Vektorgrafik.

Fazit und Tipps

Vielen Dank, dass Du Dir die Zeit genommen hast, unseren Ratgeber über barrierefreie Schriften zu lesen. Wir hoffen, Du hast viele nützliche Informationen gefunden, um Deine Website barrierefreier zu gestalten. Durch die Beachtung unserer Tipps kannst Du einen großen Schritt in Richtung Inklusion machen.

An dieser Stelle möchten wir Dir noch unbedingt ein wertvolle Informationsquelle rund um das Thema barrierefreie Schriften vorstellen: Leserlich.info. Dabei handelt es sich um ein Angebot des Deutschen Blinden- und Sehbehindertenverband e.V. Schau Dich dort gerne um, Du wirst noch viele weitere, spannenden Aspekte zum Thema Schrift entdecken und vor allem noch mehr zu Theorie von barrierefreien Schriften kennenlernen.

Wir wünschen Dir viel Erfolg bei der Umsetzung und solltest Du Fragen haben, melde Dich gerne bei uns!