Text Spacing (WCAG 1.4.12): Zeilen-, Wort- und Absatzabstand anpassen

Kurz erklärt: Text Spacing (WCAG 1.4.12) fordert, dass Nutzer Textabstände anpassen können, ohne dass Inhalt oder Funktion verloren geht. Konkret: Zeilenhöhe 1.5, Absatzabstand 2em, Wortabstand 0.16em und Buchstabenabstand 0.12em. Dieses Level-AA-Kriterium ist BFSG-relevant.

Viele Menschen mit Leseschwäche, Dyslexie oder Sehbehinderung passen Textabstände über Browser-Extensions oder eigene Stylesheets an. Wenn eine Webseite dabei Texte abschneidet, überlappt oder verschwinden lässt, ist das eine WCAG-Verletzung. Das BFSG verlangt über die EN 301 549 die Einhaltung von WCAG 2.1 Level AA – Text Spacing gehört dazu.

Die vier Text-Spacing-Werte

WCAG 1.4.12 definiert vier konkrete Mindest-Anpassungen, die eine Seite vertragen muss, ohne Informationsverlust: Zeilenhöhe (line-height): mindestens 1.5-fache der Schriftgröße. Absatzabstand (paragraph spacing): mindestens 2-fache der Schriftgröße (margin-bottom/margin-top). Buchstabenabstand (letter-spacing): mindestens 0.12em. Wortabstand (word-spacing): mindestens 0.16em. Wichtig: Die Seite muss diese Werte nicht von Haus aus verwenden – aber wenn ein Nutzer sie per User-Stylesheet erzwingt, darf kein Inhalt abgeschnitten, überlappt oder unzugänglich werden.

Technische Umsetzung und Testing

Um WCAG 1.4.12 einzuhalten, gelten folgende Best Practices: Verwende keine festen Höhen (height) auf Textcontainern – nutze min-height oder gar keine Höhenangabe. Vermeide overflow: hidden auf Textbereichen. Nutze relative Einheiten (em, rem) statt px für Abstände. Teste mit dem Text-Spacing-Bookmarklet (z. B. von Steve Faulkner), das die vier Werte per JavaScript auf die Seite anwendet. Prüfe danach: Wird Text abgeschnitten? Überlappen Elemente? Verschwinden Buttons oder Links?

Häufige Text-Spacing-Probleme

Container mit fester Höhe: Ein div mit height: 200px; overflow: hidden schneidet Text ab, wenn der Zeilenabstand vergrößert wird. Absolute Positionierung: Texte in absolut positionierten Elementen können sich überlappen. CSS Clamp/Truncation: -webkit-line-clamp oder text-overflow: ellipsis verbergen Inhalte bei vergrößerten Abständen. Inline-Styles: Fest definierte line-height-Werte in Inline-Styles überschreiben User-Stylesheets und verhindern die Anpassung.

WCAG-Bezug

WCAG 1.4.12 Text Spacing ist ein Level-AA-Kriterium und damit über das BFSG und die EN 301 549 (Abschnitt 11.1.4.12) verbindlich. Es steht in engem Zusammenhang mit WCAG 1.4.10 (Reflow) – beide Kriterien fordern ein flexibles Layout, das sich an Nutzerbedürfnisse anpasst. Auch WCAG 1.4.4 (Resize Text) ist verwandt: Wer die Schriftgröße verdoppelt und gleichzeitig die Abstände anpasst, testet gleich drei Kriterien auf einmal.

Wird geprüft: bf-check wendet die vier WCAG-Text-Spacing-Werte per Injection an und prüft auf Overflow, Clipping und Überlappungen.

Wie steht deine Webseite in diesem Punkt da?

Kostenloser Scan gegen 15 WCAG-2.1-AA-Kriterien – inkl. Text Spacing-Check.

Jetzt Webseite prüfen →

Ratgeber zum Thema

Wcag Resize Text Reflow Zoom → Wcag 2 1 Einfach Erklaert →