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 visuelle Gestaltung von Text umfasst unter anderem Schriftart, Schriftgröße, Schriftformatierung, Kontraste, Abstände, Zeilenlänge und Ausrichtung.

Dieser Leitfaden konzentriert sich auf die visuelle Darstellung von Text innerhalb von Websites und Softwareanwendungen. Ein Text kann unmittelbar Informationen vermitteln, beispielsweise als Fließtext, Überschrift oder Beschreibung. Er kann außerdem der Bezeichnung oder Erläuterung von Bedienelementen dienen, etwa als Linktext, Schaltflächenbeschriftung, Menüpunkt oder Beschriftung eines Eingabefeldes. Berücksichtigt werden damit sowohl allgemeine Textinhalte als auch Texte, die Bestandteil einer bedienbaren Benutzeroberfläche sind.

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. In der nachfolgenden Aufzählung gehen wir auf eine Auswahl davon genauer ein.

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 häufig als gut lesbar und eignen sich daher grundsätzlich für barrierefreie Texte. Humanistische Schriftarten mit ihren runden, offenen Formen entspringen ganz 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 meist offene Buchstabenformen und vergleichsweise gut erkennbare Innenräume besitzen. Dies betrifft beispielsweise Buchstaben wie a, c, e, o, s und g. Ausreichende Zeichenabstände und offene Formen können dazu beitragen, dass Buchstaben auch bei eingeschränktem Sehvermögen, kleinen Schriftgrößen oder ungünstigen Lichtverhältnissen besser erkannt werden.

Beispiele für bekannte serifenlose Schriften mit offenen und gut lesbaren Zeichenformen sind Calibri, Verdana, Lucida Sans, Open Sans und Source Sans 3.

Andere bekannte serifenlose Schriftarten wie Arial oder Helvetica besitzen teilweise geschlossenere und ähnlichere Zeichenformen als viele humanistische serifenlose Schriften. Insbesondere bei kleiner Schrift, geringem Kontrast oder ungünstigen Sehbedingungen können dadurch beispielsweise die Buchstaben c und e leichter verwechselt werden. Auch sehr dünne, enge oder ungewöhnlich gestaltete Schriften können die Erkennbarkeit der Buchstaben beeinträchtigen. Entscheidend sind daher offene Formen, gut unterscheidbare Zeichen, ausreichende Abstände und nicht zu geringe Strichstärken.

Für die Lesbarkeit ist außerdem wichtig, dass ähnlich aussehende Buchstaben, Ziffern und Sonderzeichen deutlich voneinander unterscheidbar sind. Dazu gehören beispielsweise das große I, das kleine l, die Ziffer 1 und der senkrechte Strich | sowie das große O und die Ziffer 0 oder der Buchstabe S und die Ziffer 5.

Manche Schriftarten legen einen besonderen Schwerpunkt auf die Unterscheidbarkeit ähnlicher Zeichen. IBM Plex Sans ist hierfür ein mögliches Beispiel. Atkinson Hyperlegible wurde ausdrücklich für Menschen mit geringem Sehvermögen entwickelt. Bei dieser Schrift wurden ähnlich aussehende Buchstaben und Ziffern bewusst unterschiedlich gestaltet, unter anderem I, l, 1 und i.

Weitere Schriftarten wurden gezielt für bestimmte Nutzergruppen oder Anforderungen entwickelt. Dazu gehören beispielsweise:

Solche Schriftarten sind nicht automatisch für alle Menschen besser lesbar. Insbesondere für sogenannte Legasthenie-Schriften ist ein allgemeiner Vorteil wissenschaftlich nicht eindeutig nachgewiesen. Sie sollten daher möglichst als wählbare Alternative angeboten und nicht ohne Nutzertests als allgemeine Standardschrift festgelegt werden.

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

Bei der digitalen Gestaltung unterscheiden sich 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.

Silbentrennungen sollten nicht durch manuell eingefügte Bindestriche erzeugt werden. Diese können von Assistenztechnologien ausgegeben werden, auf der Braillezeile erscheinen und beim Kopieren oder Verändern der Darstellung im Wort verbleiben. Für Webinhalte sollte die automatische Silbentrennung des Browsers (mit der CSS-Eigenschaft hyphens: auto) verwendet werden. Der Browser stellt bei einer automatischen Trennung am Zeilenende zwar visuell ein Trennzeichen dar, dieses wird aber nicht als festes Zeichen in den eigentlichen Text eingefügt. Voraussetzung ist, dass die Sprache der Seite und gegebenenfalls einzelner anderssprachiger Textabschnitte korrekt mit dem lang-Attribut ausgezeichnet ist. Da die verfügbaren Trennregeln vom Browser und von der Sprache abhängen, kann die Darstellung variieren. Alternativ kann auf Silbentrennung verzichtet werden.

Hervorhebungen sollten sparsam verwendet werden. Eine gut strukturierte Gestaltung kann das Textverständnis und die Orientierung verbessern. Einzelne wichtige Textstellen können beispielsweise durch Fettschrift hervorgehoben werden. Auch Farbe kann ergänzend eingesetzt werden, sofern die Informationen nicht ausschließlich durch Farbe vermittelt werden und ausreichende Kontraste bestehen. Zu viele Hervorhebungen wirken unruhig und erschweren es, wichtige Inhalte zu erkennen. Rein visuelle Hervorhebungen wie Fettschrift oder Schriftfarbe werden von Screenreadern in der Regel nicht zuverlässig als besondere Betonung ausgegeben. Informationen und Bedeutungsunterschiede dürfen deshalb nicht ausschließlich durch die visuelle Gestaltung vermittelt werden. Längere kursive Textpassagen können die Lesbarkeit beeinträchtigen und sollten vermieden werden. Unterstreichungen sollten im Regelfall Links vorbehalten bleiben, da sie im Web als verbreitete Kennzeichnung für verlinkte Inhalte verstanden werden.

Links müssen unabhängig einer Interaktion oder Fokussierung bereits als solche erkennbar sein. Insbesondere Links innerhalb von Fließtext sollten nicht ausschließlich durch einen Farbunterschied gekennzeichnet werden. Eine Unterstreichung des Links ist hierfür eine bewährte Lösung als Kennzeichnung. Bei der Tastaturbedienung muss der Fokus deutlich sichtbar sein. Zusätzliche Hover-Effekte bei Mausbedienung sind möglich, aber nicht grundsätzlich erforderlich. Auf Bewegungen, Skalierungen oder andere Animationen, wie Rotieren oder Springen bei Hover oder Fokus sollte verzichtet werden.

Für Text und Schriftgrafiken ist grundsätzlich ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund erforderlich. Bei großer Schrift (ab 24px bzw. ab 18,7px bei fettem Schriftschnitt) ist ein Kontrastverhältnis von mindestens 3:1 ausreichend. Die genannten Kontrastwerte sind Mindestwerte. Schriften mit dünnen Strichstärken können durch Kantenglättung trotz rechnerisch ausreichenden Kontrasts schlechter lesbar erscheinen. Deswegen sollten entweder die Strichstärke oder die Farben so angepasst werden, dass das Kontrastverhältnis (von mindestens 4,5:1 für Text und 3:1 für grafische Inhalte) auch bei aktivierter Kantenglättung eingehalten werden kann. Für ein erhöhtes Maß an Barrierefreiheitsieht das WCAG-Erfolgskriterium 1.4.6 auf Konformitätsstufe AAA ein Kontrastverhältnis von mindestens 7:1 für normalen Text und mindestens 4,5:1 für große Schrift vor.

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.

Ein Beispiel ist ein aktiver Menüpunkt einer Webseitennavigation: Die Hintergrundfarbe des ausgewählten Menüpunkts muss sich von der Hintergrundfarbe aller anderen Menüunkte um mindestens 3:1 unterscheiden. Unterscheidet sich die Farbe einer Hervorhebung nicht mit mindestens 3:1 vom umgebenden Text, sollte die Information zusätzlich textlich oder anderweitig eindeutig gekennzeichnet werden, damit sie auch ohne Wahrnehmung des Farbunterschieds verständlich bleibt.

Wichtig: Durch individuelle Nutzungseinstellungen (siehe folgender Punkt), wie etwa im Windows-Kontrastdesign oder erzwungene Farbmodi können eigene Vorder- und Hintergrundfarben ersetzt werden. Eine zusätzliche, farbunabhängige Kennzeichnung, wie etwa eine Unterstreichung kann deshalb sinnvoll sein.

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. Wird beispielsweise eine fehlerhafte Eingabe rot und eine korrekte Eingabe grün dargestellt, muss der jeweilige Zustand zusätzlich durch Text, ein Symbol oder eine andere eindeutig wahrnehmbare Kennzeichnung vermittelt werden.

Eine Software oder Website muss die vom Nutzenden individuell gewählten Schrift- und Farbeinstellungen des Betriebssystems oder Browsers übernehmen können. Gestaltungsvorgaben, beispielsweise einer Website, dürfen solche Anpassungen nicht blockieren. Zusätzlich kann die Anwendung eigene Einstellungsoptionen für Schrift und Farben anbieten. Werden Textabstände durch Nutzende angepasst, müssen Inhalte und Funktionen weiterhin vollständig wahrnehmbar und bedienbar bleiben.

Dies gilt für folgende Abstände:

• Zeilenabstand bis zum 1,5-Fachen der Schriftgröße,
• Abstand nach Absätzen bis zum 2-Fachen der Schriftgröße,
• Zeichenabstand bis zum 0,12-Fachen der Schriftgröße,
• Wortabstand bis zum 0,16-Fachen der Schriftgröße.

Die Website oder Anwendung muss hierfür keine eigenen Einstellmöglichkeiten anbieten. Sie darf entsprechende Anpassungen durch Browser, Erweiterungen oder andere Hilfsmittel jedoch nicht verhindern. Texte dürfen dabei insbesondere nicht abgeschnitten werden, sich überlagern oder Bedienelemente unbrauchbar machen. Für ein erhöhtes Maß an Barrierefreiheit kann zusätzlich das WCAG-Erfolgskriterium 1.4.8 „Visuelle Darstellung“ auf Konformitätsstufe AAA berücksichtigt werden. Für Textblöcke soll ein Mechanismus bereitstehen, mit dem Nutzende folgende Einstellungen vornehmen können:

• Vorder- und Hintergrundfarben auswählen,
• die Zeilenlänge auf höchstens 80 Zeichen begrenzen,
• Blocksatz vermeiden,
• einen Zeilenabstand von mindestens 1,5 einstellen und
• Zeilenabstands vergrößern
• die Textgröße bis auf 200 Prozent skalieren und zwar so, dass kein horizontales Scrollen nötig ist, um eine Textzeile in einem bildschirmfüllenden Fenster lesen zu können.

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

1. Schriftarten: Schriften mit offenen, klaren und gut unterscheidbaren Zeichenformen verwenden. Ähnliche Zeichen wie I, l, 1 und | sowie O und 0 oder 5 und S müssen gut auseinanderzuhalten sein. Sehr dünne, enge oder stark verzierte Schriften vermeiden. Speziell entwickelte Schriften wie Atkinson Hyperlegible können als Alternative angeboten werden, sind aber nicht automatisch für alle Menschen besser lesbar.
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 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: Fließtext in gut erfassbarer Zeilenlänge darstellen. Als Richtwert gelten höchstens etwa 80 Zeichen einschließlich Leerzeichen pro Zeile. Sehr kurze Zeilen mit häufigen Umbrüchen ebenfalls vermeiden.
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: Fließtext möglichst linksbündig im Flattersatz darstellen. Blocksatz vermeiden, wenn dadurch unregelmäßige Wortabstände entstehen. Keine manuellen Bindestriche zur Silbentrennung einfügen. Für Webinhalte sollte die automatische Silbentrennung des Browsers (mit der CSS-Eigenschaft hyphens: auto) verwendet werden. Alternativ auf Silbentrennung verzichten.
8. Hervorhebungen von Text und Links: Hervorhebungen sparsam einsetzen (fett/farbig mit ausreichendem Kontrast). Keine Kursivschrift oder Unterstreichungen als Hervorhebung nutzen. Links müssen bereits in der Ausgangsdarstellung erkennbar sein, beispielsweise durch Unterstreichung. Bei Tastaturbedienung muss der Fokus deutlich sichtbar sein. Zusätzliche Hover-Effekte sind möglich, aber nicht erforderlich. Auf Bewegungen, Skalierungen oder unnötige Animationen bei Hover und Fokus verzichten.
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: Nutzerseitige Anpassungen von Schrift, Farben und Textabständen dürfen nicht verhindert werden. Websites und Anwendungen müssen bei veränderten Textabständen weiterhin vollständig wahrnehmbar und bedienbar bleiben. Zusätzliche Einstellmöglichkeiten für Farben, Zeilenlänge, Ausrichtung und Abstände können angeboten werden..

Informationen zu diesem Artikel

Verfasst von:

Team BFIT

Datum:

19.08.2026

Lizenz:

CC-BY-SA 4.0

Version:

6.0

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