Dieses WCAG-Kriterium verlangt, dass Nutzer den Zeilenabstand (≥ 1,5 × Schriftgröße), Absatzabstand (≥ 2 × Schriftgröße), Buchstabenabstand (≥ 0,12 × Schriftgröße) und Wortabstand (≥ 0,16 × Schriftgröße) anpassen dürfen, ohne dass dadurch Inhalte abgeschnitten, überlappt oder Funktionalitäten beeinträchtigt werden. Websites müssen so gestaltet sein, dass bei solchen Abständen Layouts flexibel mitwachsen – etwa durch relative Einheiten – und die Lesbarkeit erhalten bleibt.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 1.4.12
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 1.4.12:
- Verwende relative Einheiten (em/rem) statt Pixel für Schriftgrößen, Abstände und Container – so wächst alles zusammen proportional.
- Starre Höhen und Breiten (z. B. height: 200px) vermeiden, damit der Text bei größerem Abstand nicht abgeschnitten wird.
- Nutze flexible Container (z. B. max-width in em/rem), damit breite Buchstaben- und Wortabstände nicht dazu führen, dass Text entgleitet.
- Testen mit CSS-Overrides (z. B. via Stylus oder Bookmarklet) auf Werte:
line-height: 1.5; letter-spacing: 0.12 em; word-spacing: 0.16 em; margin-bottom: 2 em; und anschließend prüfen,
ob kein Text abgeschnitten, überlappt oder unbedienbar ist. - Absatzstruktur fördern: kurze Absätze, großzügiger Zeilenumbruch – verstärkt Lesbarkeit, besonders bei wechselnden Schriftabständen.
- Mobile Responsivität gewährleisten: Auch auf kleinen Bildschirmen muss der Text lesbar bleiben, auch mit erhöhtem Abstand.
- Gut lesbares Format bereits als Standard: Wir empfehlen dir, bereits in deinem Standard-Text eine ausreichende Textgröße sowie Text- und Zeilenabstand einzustellen, weil so alle Benutzer den Text besser lesen können.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 1.4.12 Textabstand.