WCAG 1.4.12: Textabstände

WCAG 1.4.12 verlangt, dass eine Seite es aushält, wenn Nutzer die Textabstände selbst erhöhen: Zeilenhöhe auf das 1,5-Fache, Absatzabstand auf das 2-Fache, Zeichenabstand auf das 0,12-Fache und Wortabstand auf das 0,16-Fache der Schriftgröße. Dabei darf kein Inhalt abgeschnitten werden, nichts überlappen und keine Funktion verloren gehen – setzen musst du diese Werte selbst aber nicht.

(Englisch: Text Spacing. Der BIK-BITV-Test nennt den Prüfschritt „Textabstände anpassbar“.)

Das Wichtigste in Kürze

• Vier Werte stehen im Normtext: Zeilenhöhe 1,5, Absatzabstand 2, Zeichenabstand 0,12 und Wortabstand 0,16 – jeweils bezogen auf die Schriftgröße.
• Das Kriterium verpflichtet dich nicht, diese Werte zu setzen. Es verpflichtet dich, sie zu überstehen, wenn der Nutzer sie erzwingt.
• Getestet wird mit einem Bookmarklet oder eigenem Stylesheet, das die vier Werte per !important auf die ganze Seite legt.
• Der häufigste Verstoß ist der Container mit fester Höhe: Der Text wird höher, die Box nicht, der Rest verschwindet hinter overflow: hidden.
• white-space: nowrap ist der zweite Klassiker – mit größerem Wortabstand schiebt sich die Zeile über den Rand des Elements hinaus.
• Native Formularelemente sind ausgenommen: Der BITV-Test nimmt etwa input type="file" und die Optionen in <select> aus, weil der Browser sie selbst darstellt.
• Sprachabhängig: Schriftsysteme, die einzelne dieser Eigenschaften nicht verwenden – Japanisch kennt zum Beispiel keinen Absatzabstand in diesem Sinne –, müssen nur die relevanten erfüllen.
• Wer von Anfang an mit line-height: 1.5 gestaltet, hat den halben Test schon bestanden, weil dann kein Layout auf enge Zeilen ausgelegt ist.

Abgrenzung – hier steht ein Schwellenwert. Wie du dieses Kriterium zusammen mit den beiden anderen Zoom-Kriterien in einem Durchlauf prüfst, steht unter Reflow, Zoom & Textabstände.

Was passiert, wenn Nutzer die Zeilenhöhe ändern?

Eine Anmerkung im Normtext geht dabei oft unter: Autoren müssen diese Werte nicht selbst implementieren. Verlangt wird ausschließlich, dass Nutzer sie anwenden können, ohne dass Inhalt verloren geht. 1.4.12 ist damit kein Gestaltungs-, sondern ein Robustheitstest.

Das ist auch der Grund, warum das Kriterium 2018 überhaupt neu aufgenommen wurde. Vorher galt: Wer eigene Abstände braucht, nimmt ein eigenes Stylesheet – nur zerlegte das damals die halbe Seite. Die vier Werte sind eine Verabredung: So weit darf ein Nutzer gehen, und bis dahin muss das Layout mitmachen.

Zwei Feinheiten sind für die Bewertung wichtig. Erstens gilt das Kriterium für Inhalte in Auszeichnungssprachen, die diese Eigenschaften überhaupt unterstützen – Text, der in ein <canvas> oder in eine Grafik gezeichnet wurde, fällt heraus (und ist dann meist ein Fall für 1.4.5 Bilder von Text). Zweitens sind Elemente ausgenommen, deren Darstellung der Browser bestimmt: die Dateiauswahl, die Optionsliste eines <select>, native Datumsfelder.

Der vollständige Wortlaut samt Anmerkungen steht im Understanding-Dokument des W3C zu 1.4.12; das deutsche Prüfvorgehen beschreibt der Prüfschritt 1.4.12 des BIK BITV-Tests.

Wen betrifft es besonders?

Der Hauptgrund für das Kriterium ist die Lesbarkeit bei Legasthenie und anderen Leseeinschränkungen. Größere Abstände zwischen Buchstaben und Zeilen sind für viele Menschen der Unterschied zwischen mühsamem Entziffern und flüssigem Lesen – die Zeile „springt“ beim Zeilenwechsel nicht mehr, Wortgrenzen werden eindeutig.

Bei Sehbehinderungen kommt ein zweiter Effekt dazu: Wer stark vergrößert, sieht nur wenige Zeichen gleichzeitig. Ein größerer Zeichenabstand hilft dann, Buchstaben auseinanderzuhalten, die sich sonst zu einem Klumpen verbinden.

Und es gibt eine Gruppe, an die selten jemand denkt: Menschen, die mit Leseassistenz oder eigenen Browser-Profilen arbeiten, weil sie ADHS haben oder sich nach einem Schädel-Hirn-Trauma neu ans Lesen gewöhnen. Für sie ist das eigene Stylesheet Alltag, nicht Ausnahme – und jede Seite, die dabei zerfällt, ist eine Seite, die sie nicht benutzen.

Richtig & falsch im Code

Der Kern des Problems ist immer dasselbe Muster: ein Container, dessen Höhe festgeschrieben ist, während sein Inhalt wachsen darf.

/* Falsch: feste Höhe plus versteckter Überlauf = abgeschnittener Text */
.card-text {
  height: 4.5em;
  overflow: hidden;
  line-height: 1.2;
}

/* Richtig: der Container wächst mit dem Text */
.card-text {
  min-height: 4.5em;
  line-height: 1.5;
}

Der zweite Fall betrifft Elemente, die nicht umbrechen dürfen. Ein größerer Wortabstand macht jede Zeile breiter – und nowrap verhindert dann genau die Reaktion, die das Layout retten würde:

/* Falsch: erzwungene Einzeiligkeit in fester Breite */
.nav-item {
  white-space: nowrap;
  width: 140px;
  overflow: hidden;
}

/* Richtig: Umbruch erlauben, Breite als Untergrenze */
.nav-item {
  min-width: 140px;
  overflow-wrap: break-word;
}

Der dritte Fall sind Zeilenhöhen mit Einheit. line-height: 20px ist gegenüber einer größeren Schrift unbeweglich; ein einheitenloser Wert skaliert mit:

/* Falsch: absolute Zeilenhöhe */
.lead { font-size: 1.25rem; line-height: 20px; }

/* Richtig: einheitenlos, wächst mit der Schriftgröße */
.lead { font-size: 1.25rem; line-height: 1.5; }

Als Faustregel: Alles, was Text enthält, bekommt min-height statt height, min-width statt width und keinen versteckten Überlauf. Wo doch abgeschnitten werden soll – etwa bei einer Textvorschau –, ist -webkit-line-clamp die bessere Wahl als eine feste Höhe, weil es an Zeilen und nicht an Pixeln hängt. Die gemeinsamen Muster für Zoom, Reflow und Abstände stehen unter Reflow, Zoom & Textabstände.

So testest du es

1. Die Prüfwerte anlegen. Am schnellsten geht das mit einem Bookmarklet oder einer Stylus-Regel, die alle vier Werte per !important überschreibt:

   * {
     line-height: 1.5 !important;
     letter-spacing: 0.12em !important;
     word-spacing: 0.16em !important;
   }
   p { margin-block-end: 2em !important; }

2. Die Seite systematisch durchsehen. Überlappt etwas? Wird Text in Buttons, Menüpunkten, Karten oder Akkordeon-Köpfen abgeschnitten? Verschwindet ein Bedienelement aus dem sichtbaren Bereich?

3. Aufgeklappte Zustände nicht vergessen. Der BITV-Test verlangt ausdrücklich, dass auch Ausklappbereiche und Menüs vollständig lesbar bleiben – die sind bei der Sichtprüfung meist zu. Also: Navigation öffnen, Akkordeons aufklappen, Dialoge öffnen.

4. Kritische Stellen gezielt ansehen: mehrzeilige Formular-Labels, Tabellenköpfe, Badges mit Zahlen, Breadcrumbs, Buttons mit langem Text, Fußzeilen mit mehrspaltigen Linklisten.

5. Gegenprobe mit langem Text. Deutsche Komposita sind der Härtefall: „Barrierefreiheitserklärung“ oder „Grundsteuermessbescheid“ in einem 140-Pixel-Menüpunkt zeigt das Problem sofort.

Häufiger Fehler in der Praxis

Der Klassiker ist die Produktkachel im Shop. Titel, zwei Zeilen Beschreibung, Preis, Button – und damit alle Kacheln gleich hoch sind, bekommt der Textblock height: 3em mit verstecktem Überlauf. Bei den Prüfwerten braucht derselbe Text vier Zeilen, und der Preis rutscht aus dem Bild. Das kostet nicht nur Konformität, sondern im Zweifel den Kauf.

Der zweite Fall sind Buttons mit langer Beschriftung. „Jetzt unverbindlich anfragen“ passt bei normalem Wortabstand knapp in eine Zeile. Mit 0,16-fachem Wortabstand passt es nicht mehr – und wenn der Button white-space: nowrap und eine feste Breite hat, steht das letzte Wort außerhalb des farbigen Bereichs. Es sieht dann so aus, als gehöre es nicht dazu.

Der dritte fällt fast nie auf, weil ihn niemand aufklappt: die mobile Navigation. Sie ist im Test zugeklappt, wird also nicht geprüft, und im geöffneten Zustand hat sie oft eine Höhe in Viewport-Einheiten mit overflow: hidden. Ich sag’s mal so: Wenn du bei einem Audit nur eine einzige Stelle zusätzlich aufklappen kannst, dann diese.

Häufige Fragen

Muss ich line-height: 1.5 auf meiner Seite verwenden?

Nein. Das Kriterium verlangt nur, dass deine Seite es verkraftet, wenn ein Nutzer diesen Wert erzwingt. Du darfst weiterhin mit 1,3 gestalten. In der Praxis ist 1,5 als Ausgangswert für Fließtext trotzdem sinnvoll: Er ist besser lesbar, und weil das Layout dann schon auf hohe Zeilen ausgelegt ist, geht beim Test kaum noch etwas kaputt.

Gilt das auch für Überschriften und Buttons?

Ja, für allen Text im Inhalt. Die Prüfwerte werden von den Testwerkzeugen auf die gesamte Seite gelegt, also auch auf Überschriften, Navigationspunkte, Schaltflächen und Tabellenzellen. Ausgenommen sind nur Elemente, deren Darstellung der Browser vorgibt – etwa die Optionsliste eines <select>.

Was ist der Unterschied zu 1.4.4 und 1.4.10?

Die drei prüfen dieselbe Robustheit aus drei Richtungen: 1.4.4 vergrößert den Text auf 200 Prozent, 1.4.10 verkleinert den Platz auf umgerechnet 320 Pixel Breite, und 1.4.12 dehnt die Abstände. Wer Layouts ohne feste Höhen baut, besteht in der Regel alle drei gemeinsam.

Zählt es als Verstoß, wenn nur ein Scrollbalken erscheint?

Nein. Ein zusätzlicher senkrechter Scrollbalken ist ausdrücklich in Ordnung – die Seite darf länger werden. Ein Verstoß liegt erst vor, wenn Inhalt abgeschnitten wird, sich überlappt oder eine Funktion nicht mehr erreichbar ist. Waagerechtes Scrollen innerhalb eines Textblocks ist dagegen ein Befund.

Gibt es Sprachen, für die einzelne Werte nicht gelten?

Ja. Der Normtext hält fest, dass Sprachen und Schriftsysteme, die eine dieser Eigenschaften nicht verwenden, nur die übrigen erfüllen müssen. Im W3C-Dokument wird Japanisch als Beispiel genannt, wo der Absatzabstand ohne Wirkung bleibt. Für deutschsprachige Angebote sind alle vier Werte relevant.

Verwandte Themen

• Reflow, Zoom & Textabstände – der gemeinsame Praxisartikel
• 1.4.4 Textgröße ändern – dieselben Container, andere Belastung
• 1.4.10 Reflow – 400 Prozent Zoom ohne waagerechtes Scrollen
• Kognition & Neurodiversität – wem angepasste Abstände helfen
• Klickbare Cards – das Bauteil, das am häufigsten reißt