Barrierefreie Textgestaltung in User-Interface-Elementen

Dieser Text kann auch als PDF Datei heruntergeladen werden.

Barrierefreie Textgestaltung ist ein zentraler Bestandteil digitaler Zugänglichkeit. Sie sorgt dafür, dass Inhalte für möglichst viele Menschen verständlich, lesbar und nutzbar sind, unabhängig von Sehvermögen, Gerät oder Assistenztechnologie.

Die Gestaltung eines Textes besteht im Wesentlichen aus Schrift und Formatierung. Dieser Leitfaden konzentriert sich auf die Darstellung von Textelementen innerhalb einer Website oder Softwareanwendung. Dabei handelt es sich genauer gesagt um Textinformationen von User-Interface-Elementen. User-Interface-Elemente sind sichtbare und bedienbare Bestandteile einer digitalen Benutzeroberfläche, mit denen Menschen mit einer Software, Webseite oder App interagieren. Dazu gehören beispielsweise Formate wie Fließtexte, Beschreibungen oder Beschriftungen, aber auch Buttons, Textfelder, Menüs, Links oder Tabellen.

Damit Textinformationen von möglichst vielen Menschen wahrgenommen werden können, gibt es hinsichtlich Schrift und Formatierung konkrete Empfehlungen. Die Handreichung Barrierefreie Gestaltung von User Interface-Elementen der AG Software des Ausschusses für barrierefreie Informationstechnik listet zu diesem Thema genaue Anforderungen auf, die wir für die nachfolgende Aufzählung mit Infos aus dem Wissensportal leserlich.info ergänzt haben.

In diesem Leitfaden steht die barrierefreie Gestaltung (Schrift und Formatierung) von Textelementen auf Websites und in Softwareanwendungen im Mittelpunkt, nicht die Textgestaltung in Dokumenten in Anwendungen wie beispielsweise Microsoft Word oder Open Office. Die hier aufgezählten Anforderungen sind dennoch in vielen Punkten vergleichbar mit denen für Dokumente.

Der Leitfaden richtet sich insbesondere an Menschen, die in der Softwareentwicklung, in Webredaktionen oder Designteams arbeiten oder Barrierefreiheitstests durchführen.

Die folgenden Empfehlungen bestehen zum einen aus Mindestanforderungen aus der EN 301 549, die erfüllt sein müssen, um mit der BITV 2.0 konform zu sein. Darüber hinaus enthalten die untenstehenden Empfehlungen weitergehende Anforderungen aus der WCAG 2.1. Im Sinne der gesellschaftlichen Teilhabe ist es empfehlenswert, nicht nur ein Mindestmaß an digitaler Barrierefreiheit zu erfüllen, sondern gemäß § 3 Abs. 4 BITV 2.0 für bestimmte Anwendungsbereiche ein höchstmögliches Maß der Barrierefreiheit anzustreben:

„Für zentrale Navigations- und Einstiegsangebote sowie Angebote, die eine Nutzerinteraktion ermöglichen, beispielsweise Formulare und die Durchführung von Authentifizierungs-, Identifizierungs- und Zahlungsprozessen, soll ein höchstmögliches Maß an Barrierefreiheit angestrebt werden“. Die Zuordnung der einzelnen Anforderungen und Empfehlungen zu ihren jeweiligen Stellen in der EN 301 549 bzw. WCAG 2.1 ist hier aufgeführt: Schrift - Barrierefreie Gestaltung von User Interface-Elementen.

Humanistische serifenlose Schriften gelten als am besten lesbar und eignen sich daher gut für barrierefreie Texte. Humanistische Schriftarten mit ihren runden, offenen Formen entspringen vereinfacht gesagt einer Gegenbewegung zur engen gotischen Schrift des Mittelalters.

Die serifenlosen Varianten kommen ohne die kleinen, dekorativen Querstriche aus, die die Enden der Buchstabenstriche abschließen. Ihr Vorteil ist, dass sie häufig bereits über ausreichend Zeichenabstand verfügen (der Abstand zwischen den Buchstaben innerhalb eines Wortes) und eine offene Form haben. Das bedeutet, dass Buchstaben wie beispielsweise a, c, e, o, s und g weite Innenräume haben. Diese Buchstabenform erhöht die Unterscheidbarkeit der einzelnen Zeichen voneinander und damit die Lesbarkeit. So können auch bei schlechtem Sehvermögen oder ungünstigen Lichtverhältnissen Texte besser wahrgenommen werden. Eine gute Schrift sorgt also für offene, eindeutige Buchstabenformen und ausreichend Abstand zwischen Zeichen.

Beispiele für bekannte humanistische Serifenlose Schriften sind: Calibri, Verdana, Lucida Sans, Open Sans oder Source Sans Pro.

Andere bekannte serifenlose Schriftarten wie Arial oder Helvetica gelten als schwerer lesbar, da sie engere Innenräume der Buchstaben haben, die dadurch nicht so gut unterschieden werden können.

Bei zu kleiner Schriftgröße, schlechter Sicht, zu geringem Kontrast oder ungünstigen Lichtverhältnissen, sieht da ein c mal schnell aus wie ein e. Außerdem gelten Schriftarten als schwerer lesbar, die außergewöhnlich dünne oder unübliche Merkmale aufweisen, die die Wiedererkennung ihrer Buchstabenformen reduzieren. Insbesondere bei geringerem Farbkontrast.

Ausführliche Infos zu Schriftarten findet ihr bei leserlich.info: Schriftart

Schriftgrößen je nach Endgerät der Nutzenden. Die Schriftart auf einem Smartphone, das näher vor die Augen gehalten wird, muss nicht so groß sein, wie bei Text auf einem Desktop. Die responsive Anpassung der Schriftarten ist also zu bedenken. Aus dieser Logik ergeben sich folgende Mindestgrößen (laut DIN 1450):

• Desktop / PC-Bildschirm: 34px für Überschriften, 22px für Textblöcke, 17px für nebensächlichen Text (z. B. Fußnoten)
• Tablet: 27px für Überschriften, 18px für Textblöcke, 14px für nebensächlichen Text
• Smartphone: 22px für Überschriften, 14px für Textblöcke, 11px für nebensächlichen Text

Der Zeilenabstand (der Abstand von Zeile zu Zeile) innerhalb eines Fließtexts sollte mindestens 1,5-mal so groß sein wie die Schriftgröße, damit sich Buchstaben in verschiedenen Zeilen nicht berühren. Bei langen Zeilen ist ein größerer Zeilenabstand sinnvoll, um den Rücksprung mit dem Auge zum nächsten Zeilenanfang zu erleichtern, während bei kurzen Zeilen ein etwas geringerer Abstand genügt. Für die Bildschirmdarstellung wird generell ein größerer Zeilenabstand empfohlen, der an Leseabstand und Zeilenlänge angepasst werden sollte; auf Smartphones mit kurzen Zeilen kann er hingegen verringert werden.

Hinweise zum Zeichenabstand (dem Abstand von Buchstaben und Zeichen innerhalb eines Wortes zueinander): Die in der Schriftart eingerichteten Zeichenabstände sollten niemals verringert werden. Wird Serifenschrift verwendet, dann sollten sich die Serifen nicht berühren, sodass die Buchstaben klar voneinander getrennt sind. Im Dark Mode oder bei hellem Text auf dunklem Hintergrund ist es empfehlenswert den Zeichenabstand um 2% zu erhöhen.

Sehr lange Zeilen wirken weniger einladend und erschweren es den Lesenden, nach dem Zeilenende wieder zum Anfang der nächsten Zeile zurückzufinden. Sehr kurze Zeilen hingegen führen zu häufigen Zeilenumbrüchen und erhöhen die Zahl der Worttrennungen. Daher empfiehlt es sich zum Beispiel für Fließtext höchstens 80 Zeichen (inklusive Leerzeichen) zu verwenden.

Sonderzeichen müssen anhand ihrer Bedeutung gekennzeichnet werden. Sie dürfen nur verwendet werden, wenn sie von der Assistenztechnologie dem Kontext entsprechend korrekt ausgegeben werden können. In der Praxis kann man zwischen folgenden Funktionen von Sonderzeichen unterscheiden:

Dekorative Sonderzeichen: Sonderzeichen, die keinen Inhalt vermitteln, sind als dekorativ auszuzeichnen, sodass sie von Assistenztechnologien ignoriert werden. Beispiel: Ein Button mit der Beschriftung „Weiter »“. Die beiden Größerzeichen sind rein dekorativ und sollten daher nicht von der Assistenztechnologie ausgegeben werden. Die programmatische Beschriftung für diesen Schalter sollte also lediglich „Weiter“ lauten.

Zweckentfremdete inhaltstragende Sonderzeichen, die nicht ihrer Bedeutung entsprechend verwendet werden, sind mit einem aussagekräftigen Alternativtext zu versehen. Beispiel: Button mit der Beschriftung x. Das Multiplikationszeichen vermittelt visuell die Information „Schließen“. Damit Assistenztechnologien die Funktion des Buttons korrekt ausgeben, sollte der Button mit „Schließen“ alternativ beschriftet werden (ggf. mit einem Hinweis, was geschlossen wird, z. B. „Fenster schließen“). Das Sternchen (\*) gilt bei Verwendung als Pflichtfeldkennzeichnung nicht als zweckentfremdet.

Zweckbezogene inhaltstragende Sonderzeichen, die entsprechend ihrer Bedeutung verwendet werden, können genutzt werden, sofern das Zeichen durch Assistenztechnologien korrekt ausgegeben wird. Andernfalls soll es mit einem aussagekräftigen Alternativtext versehen werden.

Ein Beispiel für inhaltstragende Sonderzeichen ist eine mathematische Formel „3+5 > 5-3“: Die beiden Rechenzeichen sowie das Größerzeichen werden von der Assistenztechnologie korrekt ausgegeben und können somit verwendet werden.

Die Groß- und Kleinschreibung soll gemäß der Rechtschreibregeln verwendet werden, anstatt beispielsweise ganze Textabschnitte in Großbuchstaben zu gestalten. Da sich Großbuchstaben weniger voneinander unterscheiden, verringert das die Lesbarkeit.

Linksbündiger Text (Flattersatz) verhindert im Gegensatz zum Blocksatz unregelmäßige Wortabstände oder häufige Silbentrennung und ist daher lesbarer. Für die Silbentrennung muss ein Zeichen verwendet werden, welches von der Assistenztechnologie nicht ausgegeben wird. Zum Beispiel ein Bindestrich. Alternativ muss auf die Silbentrennung verzichtet werden.

Hervorhebungen sollen sparsam verwendet werden. Eine klar strukturierte Gestaltung verbessert das Textverständnis. Dazu können Hervorhebungen in fettem oder eventuell farbigem Schriftbild (mit ausreichend starkem Farbkontrast) gehören. Zu viele Hervorhebungen wirken allerdings unruhig und erschweren die Orientierung, daher sollten sie sparsam eingesetzt werden. Außerdem gilt es zu beachten, dass Hervorhebungen dieser Art nicht von Screenreadern erfasst werden und daher nur der visuellen Textstrukturierung dienen sollten. Kursive Schriftschnitte oder Unterstreichungen verschlechtern die Lesbarkeit und sollten vermieden werden.

Eine Ausnahme der Unterstreichung sind Links, die im Webdesign üblich sind und als Markierung eines interaktiven Elements dienen. Links sollten beim Hovern mit der Maus oder Auswählen mit der Tastatur deutlich erkennbar reagieren, also durch mehr als nur einen reinen Farbwechsel.

Alle Textinhalte müssen zum Hintergrund einen Farbkontrast von mindestens 4,5:1 haben. Bei großer Schrift (ab 24px bzw. ab 18,7px bei fettem Schriftschnitt) ist ein Kontrastverhältnis von mindestens 3:1 ausreichend. Wenn über die Verwendung unterschiedlicher Schriftfarben eine Information übermittelt wird, dann muss der Kontrastabstand zwischen den Farben jeweils mindestens 3:1 betragen. Dies gilt, wenn die Farben an sich keine Bedeutung besitzen, sondern nur der Farbunterschied zwischen den Farben relevant ist.

Wenn über die Verwendung einer Farbe eine Information vermittelt wird und die Farbe an sich eine Bedeutung besitzt, muss die Information zusätzlich auf andere Weise gekennzeichnet werden. Zum Beispiel zeigt „grün“ eine korrekte und „rot“ eine falsche Eingabe in einem Formular an. Hier reicht die farbliche Kennzeichnung nicht aus und muss textlich oder anderweitig ergänzt werden.

Eine Software oder Website muss die vom Nutzenden individuell gewählten Schrift‑ und Farbeinstellungen des Betriebssystems oder Browsers übernehmen können. Wird dies nicht unterstützt, muss das in der Erklärung zur Barrierefreiheit beschrieben sein. Zusätzlich kann die Anwendung eigene Einstellungsoptionen für Schrift und Farben anbieten. Vorgaben zu Farbkontrasten gelten nur, solange Nutzende die Farben nicht selbst ändern.

Für Textpassagen sollen folgende Anpassungen möglich sein:

• Vorder‑ und Hintergrundfarbe unabhängig vom restlichen Design ändern
• Zeilenlänge auf 80 Zeichen begrenzen
• Blocksatz deaktivieren
• Zeilenabstand auf 150 % erhöhen
• Absatzabstand auf das 1,5‑Fache des Zeilenabstands vergrößern
• Die Kontrastanforderungen gelten auch hier nur, wenn die Farben nicht individuell angepasst wurden.

• Schrift - Barrierefreie Gestaltung von User Interface-Elementen
• Praxistipp Farbkodierung
• Kontraste für eine barrierefreie Gestaltung
• Leserlich.info
• Schriftgrößenrechner (leserlich.info)

1. Schriftarten: Am besten sind Schriften aus der Familie der humanistischen Serifenlosen zu lesen (z.B. Calibri, Lucida Sans, Verdana), da sie offene, gut voneinander unterscheidbare Buchstaben haben.
2. Schriftgröße: Die ideale Mindestschriftgröße für Textblöcke ist am Desktop 22px, am Tablet 18px und am Smartphone 14px. Für andere Medien kann das der Schriftgrößenrechner von leserlich.info bestimmen.
3. Zeilenabstand: Zeilenabstand im Fließtext mindestens 1,5-mal der Schriftgröße. Bei sehr kurzen Zeilen (z. B. am Smartphone) kann etwas geringerer Abstand verwendet werden.
4. Zeilenlänge: Für Fließtext maximal 80 Zeichen inklusive Leerzeichen pro Zeile.
5. Sonderzeichen: Dekorative Zeichen als „dekorativ“ auszeichnen (werden vom Screenreader nicht vorgelesen). Zweckentfremdete Zeichen mit Alternativtext versehen (z. B. „Schließen“ für „x“). Bedeutungsgemäß genutzte Sonderzeichen (z.B. + oder -) sind in Ordnung, sofern korrekt auslesbar.
6. Großschreibung: Groß- und Kleinschreibung nach Rechtschreibregeln nutzen. Keine längeren Passagen komplett in GROSSBUCHSTABEN verfassen, da dies die Lesbarkeit reduziert.
7. Textanordnung & Silbentrennung: Linksbündigen Flattersatz verwenden (bessere Lesbarkeit als Blocksatz). Silbentrennung nur bei Assistenztechnologie-kompatiblem Trennzeichen (z. B. Bindestrich). Alternativ: Silbentrennung ganz vermeiden.
8. Hervorhebungen von Text und Links: Hervorhebungen sparsam einsetzen (fett/farbig mit ausreichendem Kontrast). Keine Kursivschrift oder Unterstreichungen als Hervorhebung nutzen. Unterstreichung nur für Links. Links müssen beim Hover/Focus visuelles Feedback geben (mehr als Farbwechsel).
9. Farben & Kontrast: Kontrastverhältnis von Text zum Hintergrund mindestens 4,5:1, bei großer oder fetter Schrift mindestens 3:1. Werden Informationen durch Farbunterschiede vermittelt, Kontrast zwischen den verwendeten Farben mindestens 3:1. Liegt Farbunterschied darunter oder hat eine Farbe definierte Bedeutung (z. B. Rot für Fehler, Grün für korrekt), Information zusätzlich textlich oder auf andere Weise eindeutig kennzeichnen.
10. Flexible Nutzungspräferenzen: Eine Software oder Website muss, die vom Nutzenden individuell gewählten Schrift‑ und Farbeinstellungen des Betriebssystems oder Browsers übernehmen können.

Informationen zu diesem Artikel

Verfasst von:

Team BFIT

Datum:

29.04.2026

Lizenz:

CC-BY-SA 4.0

Version:

3.0

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!