Als stilistisches Element sind sie inzwischen weit verbreitet: Überschriften oder andere Beschriftungen in Großbuchstaben. Der Button erscheint als Absenden, wir lesen von Menüs oder gleich ganzen Sätzen in Großschreibung. Doch hat die Art, wie wir Texte darstellen abseits von Schriftgröße und Farbkontrast einen Einfluss darauf, wie barrierearm eine Website ist? Schauen wir uns heute an, was Barrierefreiheit mit Großbuchstaben zu tun hat.
Wann Großbuchstaben zur Barriere für die Leserlichkeit werden
Texte, die vollständig in Großbuchstaben geschrieben sind, sind nicht grundsätzlich schlecht. Sie können für einige Personen aber zum echten Hindernis werden.
Einer der wichtigsten Aspekte beim Gestalten einer Website ist es, sicherzustellen, dass der Text auch lesbar ist. Ein wichtiger Aspekt ist die Auswahl der Schriftart und Schriftgröße. Aber nicht jede gut lesbare Schrift ist überhaupt geeignet um auch in Großbuchstaben lesbar zu sein. Schauen wir uns 3 Beispiele an.
barrierefrei
barrierefrei
barrierefrei
Hier sieht man gut: je detailreicher eine Schrift ist, desto schwerer ist sie lesbar, wenn nur Großbuchstaben genutzt werden. Diese sind meist nicht so gestaltet, dass sie ein gut lesbares Schriftbild ergeben. Buchstabenabstände sind nicht optimal und die hinzugefügten Details erschweren das Lesen zusätzlich. Wenn überhaupt, wählen Sie für eine Großschreibung also eine serifenlose Schrift.
Bedenken Sie aber: Auch dann ist ein in Großbuchstaben geschriebener Text immer schwerer lesbar als die grammatikalisch richtige Variante. Das gilt besonders für Menschen mit Dyslexie oder anderen Leseschwächen.
Mehr Informationen zur Leserlichkeit von Text:
- Barrierefreie Schriftarten – damit Schrift nicht zum Hindernis wird
- Schriftgröße und Barrierefreiheit – kein Kleingedrucktes mehr
Wie lesen Screenreader groß Geschriebenes vor?
Die kurze Antwort: Es kommt drauf an. Um diese Frage zu beantworten müssen wir uns nämlich zuerst anschauen, wie man die Großschreibung eigentlich erreicht hat.
Groß geschriebener Text
Der einfachste Weg, Text in Großbuchstaben zu erhalten, ist nachvollziehbarerweise, dass man ihn groß schreibt. Aber Achtung: viele Screenreader interpretieren diese Schreibweise als Abkürzung und würden in unserem oberen Beispiel nicht „barrierefrei“, sondern „B A R R I E R E F R E I“ vorlesen. Für einen kurzen Absenden-Button mögen Ihre Nutzer das noch tolerieren und verstehen können. Für ganze Überschriften ist das aber nicht akzeptabel, Ihre Screenreadernutzer würden die Seite vermutlich verlassen.
Professionelle, moderne Screenreader kommen mit dieser Schreibweise zwar besser klar, aber auch hier kann es zu Problemen bei der Aussprache der Texte kommen. Bleiben Sie also bei der korrekten Schreibweise und ändern Sie nur die Darstellung.
Großschreibung dank text-transform
Überlegt man sich, was eigentlich das Ziel ist, dann ist die Umsetzung eigentlich klar. Denn man möchte ja nicht das Wort verändern, sondern nur dessen Darstellung. Aus Gründen der gewünschten Optik soll der Text in Großbuchstaben gesetzt werden, eine rein optische Entscheidung. Und die Optik ändert man mit CSS.
Das für unsere Zwecke geeignete Attribut ist text-transform. Es kann unter anderem folgende Werte annehmen:
- none: der Text wird so ausgegeben, wie er im HTML-Dokument steht.
- capitalize: der erste Buchstabe wird groß geschrieben.
- uppercase: alle Buchstaben werden groß geschrieben, also genau das, was wir hier benötigen.
- lowercase: alle Buchstaben werden klein geschrieben.
Werden die Texte nun also grammatikalisch korrekt im HTML geschrieben, können sie mit CSS trotzdem mit Großbuchstaben dargestellt werden ohne, dass die Barrierefreiheit darunter leidet. Die allermeisten Screenreader lesen so dargestellten Text völlig korrekt vor.
Fazit – Großbuchstaben sparsam und dann richtig einsetzen
Am leserlichsten ist ein Text immer dann, wenn er der Erwartung des Lesenden und damit der korrekten Rechtschreibung entspricht. Insbesondere Texte in Leichter oder einfacher Sprache sollten keinesfalls Text in Großbuchstaben nutzen.
Sollten Sie diesen als Stilelement trotzdem einsetzen wollen, dann nutzen Sie in jedem Fall CSS zur Darstellung. Dadurch können zumindest Screenreader diesen Text sauber vorlesen. Nutzen Sie außerdem eine serifenlose Schrift und kürzen Sie die Texte auf das nötigste. Auch ein wenig Abstand zwischen den Buchstaben mithilfe von letter-spacing kann die Leserlichkeit verbessern.
Ein gut durchdachtes Textdesign trägt maßgeblich zur Barrierefreiheit bei. Deshalb sollten wir Großbuchstaben vorsichtig einsetzen, um sicherzustellen, dass alle Nutzer die Texte problemlos lesen können.