Schlecht eingebettete Schriften verursachen auf Websites eine Reihe von Barrierefreiheitsproblemen: Texte werden nicht korrekt dargestellt, Screenreader k\u00f6nnen Inhalte falsch interpretieren, und Nutzer verlieren die M\u00f6glichkeit, Schriftgr\u00f6\u00dfe oder Kontrast individuell anzupassen. Besonders betroffen sind Menschen mit Sehbeeintr\u00e4chtigungen, motorischen Einschr\u00e4nkungen und kognitivem Unterst\u00fctzungsbedarf. Die folgenden Abschnitte beleuchten die h\u00e4ufigsten Ursachen, die relevanten WCAG-Kriterien und praktische L\u00f6sungsans\u00e4tze.<\/p>\n
Schriften beeinflussen die digitale Barrierefreiheit auf mehreren Ebenen: Sie bestimmen, ob Texte lesbar skaliert werden k\u00f6nnen, ob ausreichende Kontraste vorhanden sind und ob assistive Technologien wie Screenreader Inhalte korrekt erfassen. Eine schlecht gew\u00e4hlte oder falsch eingebundene Schrift kann dazu f\u00fchren, dass wesentliche Inhalte f\u00fcr bestimmte Nutzergruppen unzug\u00e4nglich werden.<\/p>\n
Menschen mit Sehbeeintr\u00e4chtigungen sind h\u00e4ufig auf die M\u00f6glichkeit angewiesen, Schriftgr\u00f6\u00dfen im Browser zu vergr\u00f6\u00dfern. Wird eine Schrift mit fixen Pixelwerten statt relativen Einheiten wie Auch der Kontrast zwischen Schriftfarbe und Hintergrund ist ein zentrales Thema. Zu geringe Kontraste stellen f\u00fcr \u00e4ltere Menschen, Nutzer mit Farbenblindheit oder bei ung\u00fcnstigen Lichtverh\u00e4ltnissen eine erhebliche Barriere dar. Ebenso k\u00f6nnen ungew\u00f6hnliche Schriftschnitte oder dekorative Fonts die Lesbarkeit f\u00fcr Menschen mit Legasthenie oder kognitiven Einschr\u00e4nkungen deutlich erschweren.<\/p>\n Wenn eine Schrift im Browser nicht geladen wird, greift der Browser auf eine Fallback-Schrift zur\u00fcck. Ist keine geeignete Fallback-Schrift definiert, w\u00e4hlt der Browser eine Systemschrift, was zu unerwarteten Darstellungsfehlern f\u00fchren kann. In bestimmten Szenarien bleibt Text vor\u00fcbergehend unsichtbar, was als \u201eFlash of Invisible Text\u201c (FOIT) bezeichnet wird.<\/p>\n Das FOIT-Problem entsteht, wenn der Browser wartet, bis eine externe Webfont-Datei vollst\u00e4ndig geladen ist, bevor er den Text anzeigt. F\u00fcr Nutzer mit langsamen Internetverbindungen oder in Umgebungen mit eingeschr\u00e4nkter Konnektivit\u00e4t bedeutet das: Inhalte sind f\u00fcr mehrere Sekunden nicht sichtbar. Screenreader k\u00f6nnen in dieser Zeit m\u00f6glicherweise keinen Text vorlesen, da der DOM zwar vorhanden ist, aber die Darstellung fehlt.<\/p>\n Eng verwandt ist der \u201eFlash of Unstyled Text\u201c (FOUT), bei dem der Browser zun\u00e4chst die Fallback-Schrift anzeigt und diese dann durch die geladene Webfont ersetzt. Obwohl weniger problematisch als FOIT, kann auch FOUT f\u00fcr Nutzer mit kognitiven Einschr\u00e4nkungen verwirrend sein, da sich das Schriftbild pl\u00f6tzlich ver\u00e4ndert. Beide Ph\u00e4nomene lassen sich durch die CSS-Eigenschaft Mehrere WCAG-Kriterien sind direkt oder indirekt von der Schrifteinbindung betroffen. Am relevantesten sind die Erfolgskriterien zu Kontrast, Textskalierung und Anpassbarkeit. Diese Kriterien gelten auf Konformit\u00e4tsniveau AA und sind damit f\u00fcr die meisten rechtlichen Anforderungen, darunter das Barrierefreiheitsst\u00e4rkungsgesetz (BFSG), ma\u00dfgeblich.<\/p>\n Wichtig: Das Bestehen automatisierter Tests auf Basis dieser Kriterien bedeutet nicht, dass eine Website vollst\u00e4ndig konform ist. Automatisierte Barrierefreiheitstests<\/a> k\u00f6nnen technische Aspekte wie Kontrastverh\u00e4ltnisse zuverl\u00e4ssig pr\u00fcfen, aber ob eine Schrift f\u00fcr alle Nutzergruppen tats\u00e4chlich lesbar ist, erfordert erg\u00e4nzende manuelle Pr\u00fcfungen.<\/p>\n Externe Schriftdienste wie Google Fonts oder Adobe Fonts laden Schriftdateien von fremden Servern nach. Das hat zwei wesentliche Konsequenzen: Erstens entsteht eine Abh\u00e4ngigkeit von der Verf\u00fcgbarkeit des externen Dienstes, was Ladeprobleme und damit Barrierefreiheitsprobleme verursachen kann. Zweitens werden beim Laden externe Verbindungen aufgebaut, die IP-Adressen der Nutzer \u00fcbertragen und damit datenschutzrechtliche Fragen aufwerfen.<\/p>\n Aus Barrierefreiheitsperspektive ist die Abh\u00e4ngigkeit von externen Diensten problematisch, weil Netzwerkprobleme oder Ausf\u00e4lle des Drittanbieters dazu f\u00fchren k\u00f6nnen, dass Schriften gar nicht laden. Ohne korrekt definierte Fallback-Schriften im CSS kann das zu den oben beschriebenen FOIT-Problemen f\u00fchren.<\/p>\n Aus datenschutzrechtlicher Sicht wurden externe Schriftdienste in Deutschland bereits mehrfach als problematisch eingestuft, da die IP-Adresse der Besucher ohne deren ausdr\u00fcckliche Einwilligung an Server au\u00dferhalb der EU \u00fcbermittelt werden kann. Die datenschutzkonforme Alternative ist das Self-Hosting: Schriftdateien werden direkt auf dem eigenen Server gespeichert und ausgeliefert, ohne externe Verbindungen herzustellen. So lassen sich Barrierefreiheits- und Datenschutzanforderungen gleichzeitig erf\u00fcllen. Wenn Sie wissen m\u00f6chten, ob Ihre Website externe Ressourcen einbindet, die datenschutzrechtlich relevant sind, kann ein DSGVO-Website-Check<\/a> erste Hinweise liefern.<\/p>\n F\u00fcr barrierefreie Websites sind die Formate WOFF2 und WOFF am besten geeignet. WOFF2 bietet die h\u00f6chste Komprimierung und wird von allen modernen Browsern unterst\u00fctzt, was kurze Ladezeiten und eine zuverl\u00e4ssige Darstellung sicherstellt. Kurze Ladezeiten reduzieren das Risiko von FOIT und kommen damit Nutzern mit langsamen Verbindungen zugute.<\/p>\n Neben dem Format sind folgende technische Aspekte f\u00fcr die barrierefreie Schrifteinbindung entscheidend:<\/p>\n Automatisierte Barrierefreiheitstests k\u00f6nnen eine Reihe von schriftbezogenen Problemen zuverl\u00e4ssig identifizieren, insbesondere unzureichende Kontrastverh\u00e4ltnisse, fehlende oder fehlerhafte Schriftskalierung und Probleme mit der Textdarstellung im DOM. Sch\u00e4tzungen zufolge decken automatisierte Tests typischerweise etwa 30 bis 50 Prozent aller Barrierefreiheitsprobleme ab, darunter viele der technisch messbaren Schriftprobleme.<\/p>\n Konkret erkennen automatisierte Tools auf Basis von Standards wie WCAG 2.1 und 2.2 unter anderem:<\/p>\n Was automatisierte Tests hingegen nicht zuverl\u00e4ssig beurteilen k\u00f6nnen, ist die subjektive Lesbarkeit einer Schrift f\u00fcr bestimmte Nutzergruppen oder ob eine gew\u00e4hlte Schriftart f\u00fcr Menschen mit Legasthenie geeignet ist. Solche Fragen erfordern manuelle Pr\u00fcfungen, idealerweise unter Einbeziehung von Nutzern mit entsprechenden Einschr\u00e4nkungen. Ein gutes Ergebnis im automatisierten Barrierefreiheitstest<\/a> ist daher eine notwendige, aber keine hinreichende Bedingung f\u00fcr vollst\u00e4ndige Konformit\u00e4t.<\/p>\n Wir bei decareto bieten eine SaaS-Plattform, die Websites automatisiert auf Barrierefreiheitsprobleme scannt, darunter auch schriftbezogene Schwachstellen. Unser Tool pr\u00fcft Websites auf Basis der WCAG-Standards und liefert strukturierte Reports mit konkreten Handlungsempfehlungen. Folgendes leisten wir im Bereich Schrift und Barrierefreiheit:<\/p>\nrem<\/code> oder em<\/code> definiert, skaliert sie beim Zoomen nicht mit. Das Ergebnis: Texte bleiben zu klein, Layouts brechen, und Inhalte werden unlesbar.<\/p>\nWas passiert, wenn eine Schrift im Browser nicht geladen wird?<\/h2>\n
font-display<\/code> steuern, wobei der Wert swap<\/code> in den meisten F\u00e4llen eine barrierefreiere L\u00f6sung darstellt.<\/p>\nWelche WCAG-Kriterien betreffen die Einbindung von Schriften?<\/h2>\n
\n
Wie wirken sich externe Schriftdienste auf Barrierefreiheit und Datenschutz aus?<\/h2>\n
Welche Schriftformate sind f\u00fcr barrierefreie Websites am besten geeignet?<\/h2>\n
\n
rem<\/code> oder em<\/code> statt in Pixeln definiert werden, damit Nutzer die Textgr\u00f6\u00dfe im Browser anpassen k\u00f6nnen.<\/li>\nfont-family<\/code> sollte immer eine Kette von Fallback-Schriften enthalten, die bei Ladeproblemen einspringen.<\/li>\nWie lassen sich Schrift-Barrierefreiheitsprobleme automatisiert erkennen?<\/h2>\n
\n
Wie decareto bei der Erkennung von Schrift-Barrierefreiheitsproblemen unterst\u00fctzt<\/h2>\n
\n