Barrierefreiheit: Warum Text in GROSSBUCHSTABEN schwer lesbar ist

Großbuchstaben sind für eine Beschriftung aus zwei Wörtern in Ordnung und für alles Längere eine schlechte Wahl. Lange Passagen in Großbuchstaben lesen sich langsamer, sie werfen Informationen weg, die die normale Schreibweise transportiert (ist „US“ das Land oder das englische „us“, also „uns“?), und Screenreader ignorieren die Großschreibung größtenteils: Die beabsichtigte Betonung verschwindet, während hier und da ein kurzes Wort Buchstabe für Buchstabe buchstabiert wird. Barrierefrei ist es, Text in normaler Schreibweise zu schreiben und Großbuchstaben dort, wo ein Design sie wirklich will, per CSS anzuwenden, auch wenn selbst das nicht narrensicher ist.
Warum lange Passagen in Großbuchstaben schwerer zu lesen sind
Forscher vergleichen das Lesen von Groß- und Kleinbuchstaben seit fast einem Jahrhundert. Kevin Larsons Artikel für Microsoft, „The Science of Word Recognition“, fasst Studien bis zurück zu Woodworth im Jahr 1938 zusammen: Leser kamen durch Passagen in Kleinbuchstaben 5 bis 10 Prozent schneller voran als durch dieselben Passagen in Großbuchstaben.
Die verbreitete Erklärung ist die „Wortform“ (word shape): Kleingeschriebene Wörter haben dank Ober- und Unterlängen markante Umrisse, während Großbuchstaben jedes Wort in ein Rechteck verwandeln. Larson hält dagegen, dass die Belege das nicht stützen. Wir erkennen Wörter an ihren Buchstaben, und Kleinbuchstaben gewinnen vor allem, weil wir mit ihnen am meisten üben. Wer viel Text in Großbuchstaben lesen muss, wird darin schneller.
Das ist eine nützliche Korrektur, aber sie rettet den Absatz in Großbuchstaben auf deiner Website nicht. Deine Leser hatten diese Übung nicht, und am härtesten trifft es Menschen, denen Lesen ohnehin Mühe macht. Die MDN-Seite zu text-transform warnt, dass lange Abschnitte in Großbuchstaben „may be difficult for people with cognitive concerns such as Dyslexia to read“ (für Menschen mit kognitiven Einschränkungen wie Legasthenie schwer zu lesen sein können). Der Styleguide von GOV.UK führt es gleich selbst vor: „DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.“ (Keine Großbuchstaben für längere Texte, weil sie ziemlich schwer zu lesen sind.)
Großbuchstaben werfen Informationen weg
Gemischte Schreibweise ist keine Dekoration. Ein Großbuchstabe sagt dir, dass ein Wort ein Name, eine Abkürzung oder der Anfang eines Satzes ist. Lies diesen englischen Satz und achte darauf, wie viel du raten musst:
PLEASE CONTACT US ABOUT POLISH ORDERS IN MARCH. NASA SAYS HI.Die Vereinigten Staaten oder „us“ (uns)? Kunden in Polen oder Möbelpolitur („polish“)? Der Monat oder ein Protestmarsch („march“)? Ist ein Text erst einmal in Großbuchstaben getippt, kann auch Software die Antwort nicht mehr herausfinden. Schick die Zeile durch die Option Satzform (Sentence Case) in unserem Case-Konverter, und du bekommst „Please contact us about polish orders in march. Nasa says hi.“ Er schreibt alles klein und den Anfang jedes Satzes groß, mehr kann er nicht wissen. Die Namen musst du von Hand wieder einsetzen.
Was Screenreader mit Text in Großbuchstaben machen
Meistens: nichts. Screenreader sprechen die Wörter und erwähnen ihre Schreibweise nicht. 2022 testete der Barrierefreiheitsberater Adrian Roselli Rechtstexte in Großbuchstaben mit JAWS, NVDA, Narrator, Orca, VoiceOver und TalkBack in den Standardeinstellungen, und keiner davon teilte dem Zuhörer mit, dass der Text in Großbuchstaben stand. Optionen wie die Tonhöhenänderung von NVDA oder „say cap“ sind dafür gedacht, sich Zeichen für Zeichen durch einen Text zu bewegen, nicht für vorgelesene Sätze.
Das hat zwei Folgen:
- Großbuchstaben, die Bedeutung tragen, gehen verloren. Wenn Großbuchstaben dein Mittel sind, um „das ist wichtig“ zu sagen (eine Warnung, eine Vertragsklausel, ein gerufenes Wort), hört ein Zuhörer gewöhnlichen Text. Die Ausnahme sind Braille-Leser, denn die Brailleschrift hat ein Großbuchstabenzeichen.
- Manche kurzen Wörter werden buchstabiert. Sprachausgaben raten, ob eine Folge von Großbuchstaben eine Abkürzung ist. Roselli nennt „AM“, „ADD“ und „IT“ als Wörter, die Screenreader in Großbuchstaben oft buchstabieren, und aus der Praxis wird berichtet, dass „CONTACT US“ als „contact U.S.“ herauskam.
Welche Wörter buchstabiert werden, hängt vom Screenreader, von der Stimme, von den Einstellungen des Nutzers und manchmal vom Browser ab, und es ändert sich von Version zu Version. Verlässlich vorhersagen kannst du es nicht, und das ist das beste Argument dafür, wichtige Wörter gar nicht erst in Großbuchstaben zu setzen.
Laufweite nie mit Leerzeichen vortäuschen
Weit gesperrte Großbuchstaben sind ein beliebtes Gestaltungsmittel, und sie als S A L E zu tippen, ist der schlechteste Weg zu diesem Look. Screenreader lesen jeden Buchstaben einzeln, und die WCAG führen „using white space characters to control spacing within a word“ (Leerraumzeichen verwenden, um den Abstand innerhalb eines Wortes zu steuern) als Fehler auf (Technik F32). Nimm stattdessen letter-spacing in CSS, wie im Beispiel unten.
CSS text-transform: uppercase statt getippter Großbuchstaben
Soll ein Button, ein Tab oder eine kleine Überschrift wie in Großbuchstaben aussehen, schreib den Text in normaler Schreibweise und lass CSS sein Aussehen ändern:
<button class="caps">Add to basket</button>
.caps {
text-transform: uppercase;
letter-spacing: 0.06em; /* capitals need a little extra room */
}In deinem HTML steht weiterhin „Add to basket“, und das bringt dir einiges:
- Redesigns kosten wenig. Die Großbuchstaben später wieder loszuwerden, ist eine Zeile CSS und keine Suche durch jede Beschriftung und jede Übersetzungsdatei.
- Der Text funktioniert auch anderswo. Feeds, Exporte und alle anderen Orte, die dein Stylesheet nicht erreicht, bekommen richtig geschriebene Wörter.
- Sprachen werden für dich berücksichtigt. Browser wenden Sprachregeln anhand des
lang-Attributs an. Die MDN-Referenz zu text-transform listet sie auf: Griechische Vokale verlieren in Großbuchstaben zum Beispiel ihre Akzente, und im Türkischen gehört zumidasİ. Mit CSS behält der gespeicherte griechische Text seine Akzente; getippte Großbuchstaben würden sie für immer verlieren.
Überschätze das aber nicht. Browser können den umgewandelten Text an Hilfstechnologien weitergeben. Ein 2016 gemeldeter WebKit-Bug, der bis heute offen ist, beschreibt, wie VoiceOver einen per CSS in Großbuchstaben gesetzten Button „Add to Cart“ als „A D D to cart“ vorliest, und Entwickler haben dasselbe bei VoiceOver in Chrome beobachtet. Außerdem sind CSS-Großbuchstaben für sehende Leser immer noch Großbuchstaben, an den Kosten langer Passagen ändert sich also nichts. Betrachte text-transform als den richtigen Weg, ein paar Wörter in Großbuchstaben zu setzen, nicht als Freibrief für ganze Absätze.
Wann Großbuchstaben in Ordnung sind, und was du sonst nimmst
Großbuchstaben sind nicht verboten. Die WCAG haben kein Erfolgskriterium dagegen, und kurze Folgen machen kaum Probleme. Wir würden sie behalten für:
- Echte Akronyme und Abkürzungen wie NASA, HTML und BBC.
- Kurze Beschriftungen, Tabs und die kleine Dachzeile über einer Überschrift. Unsere Faustregel: höchstens drei Wörter, per CSS angewendet.
- Ein einzelnes Badge-Wort wie „New“, solange nichts davon abhängt, dass man es als etwas Besonderes hört.
Für alles andere greif zu etwas, das eine Umgestaltung oder das Vorlesen übersteht:
- Betonung: Nimm
<strong>und gestalte es über Schriftstärke oder -größe. Auch Fettdruck kündigen die meisten Screenreader standardmäßig nicht an, also leg das Wichtige in die Wörter selbst: „Das kannst du nicht rückgängig machen“ sagt mehr als jede Formatierung. - Warnungen: Eine kurze, schlichte Überschrift („Wenn du dein Konto löschst, werden alle deine Dateien entfernt“) leistet, was ein Block aus Großbuchstaben leisten wollte, und sie wird vorgelesen.
- Rechtstexte: In US-Verträgen stehen Gewährleistungsausschlüsse oft in Großbuchstaben, weil der Uniform Commercial Code verlangt, dass sie „conspicuous“ (auffällig) sind. Seine Definition verlangt im Fließtext eines Dokuments keine Großbuchstaben: Größere Schrift, kontrastierende Schrift, Schriftart oder Farbe oder Zeichen, die den Text abheben, genügen ebenfalls. Sprich mit der Person, die deine Nutzungsbedingungen aufsetzt, bevor du sie änderst, aber Großbuchstaben sind nicht der einzige Weg.
Unicode-„Kapitälchen“ sind gar keine Großbuchstaben
Unser Unicode-Schriftgenerator hat einen Stil „Kapitälchen“, und es lohnt sich, ehrlich zu sagen, was er erzeugt. Tippst du „Sale on now“, bekommst du „sᴀʟᴇ ᴏɴ ɴᴏᴡ“. Das sind keine kleiner gezeichneten Buchstaben, sondern andere Zeichen, größtenteils aus phonetischen Alphabeten entlehnt. Manche Buchstaben haben keine Kapitälchen-Version, deshalb bleibt das „s“ ein gewöhnliches kleines s, und aus „q“ wird „ǫ“, ein o mit Ogonek.
Für Software sind das Symbole, die mit den normalen Buchstaben nichts zu tun haben. Rechtschreibprüfungen markieren sie deshalb gern als Fehler, und eine Suche nach dem normalen Wort findet sie unter Umständen nicht. Screenreader gehen mit ähnlich aussehenden Zeichen sehr uneinheitlich um; als vergleichbare „Fake-Fett“-Buchstaben getestet wurden, übersprangen manche Screenreader die Wörter komplett. Unser Ratgeber zum Schreiben für Screenreader geht diesen Test durch. Nutze diese Stile als Dekoration neben normalem Text, nie für Wörter, die jemand hören muss.
Eine kurze Checkliste für Großbuchstaben
- Schreib Text in normaler Schreibweise und setze Großbuchstaben mit
text-transform. - Beschränke Großbuchstaben auf wenige Wörter. Nie auf einen ganzen Absatz.
- Gib Großbuchstaben etwas
letter-spacing, und nimm dafür nie Leerzeichen. - Leg die Bedeutung in die Wörter, nicht in die Formatierung.
- Hör dir deine wichtigsten Buttons und Beschriftungen vor dem Launch mit VoiceOver und NVDA an.
- Halte Unicode-Doppelgänger von Buchstaben aus allem heraus, worauf es ankommt.
Wo Großbuchstaben beim Schreiben wirklich hingehören, von Abkürzungen bis zu Überschriften in Rechtstexten, zeigt unser Ratgeber dazu, wann du Großbuchstaben verwenden solltest.


