WCAG 1.4.12 Textabstand

Das Erfolgskriterium 1.4.12 hilft Menschen mit Legasthenie, Sehbehinderung und anderen Leseschwierigkeiten, die Text mit Browsererweiterungen oder eigenen Styles weiter auseinanderziehen. Größere Abstände machen Text leichter lesbar — aber nur, wenn die Seite dabei nicht kaputtgeht. Es kam mit WCAG 2.1 hinzu, gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.1.4.12). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Bei Inhalten in Auszeichnungssprachen, die diese Eigenschaften unterstützen (HTML und CSS tun das), darf kein Inhalt und keine Funktion verloren gehen, wenn der Nutzer alle folgenden Werte setzt und keine andere Stileigenschaft ändert:

• Zeilenhöhe auf mindestens das 1,5-Fache der Schriftgröße;
• Abstand nach Absätzen auf mindestens das 2-Fache der Schriftgröße;
• Zeichenabstand auf mindestens das 0,12-Fache der Schriftgröße;
• Wortabstand auf mindestens das 0,16-Fache der Schriftgröße.

Ihr Design muss diese Werte nicht verwenden. Die Anforderung lautet, dass ein Nutzer sie überschreiben kann, ohne dass Text abgeschnitten wird, sich überlappt oder verdeckt wird.

Ausnahme: Sprachen und Schriften, die eine dieser Eigenschaften nicht verwenden, müssen nur die Eigenschaften unterstützen, die es für sie gibt.

Typische Fehler in Onlineshops

• „In den Warenkorb“ und andere Buttons mit fester Höhe und overflow: hidden, sodass die Beschriftung abgeschnitten wird;
• Produktkarten mit fester Höhe, sodass Produktname oder Preis verschwinden;
• Navigationstabs und Filter-Chips, deren Text das nächste Element überlappt;
• Badges wie „−20 %“ oder „Neu“, absolut über dem Bild positioniert, sodass breiterer Text den Preis verdeckt;
• Inline-style-Attribute mit Abständen per !important, die das Überschreiben durch den Nutzer verhindern.

So prüfen Sie es

Automatisch: Unser Checker markiert Inline-Styles, die Zeichen-, Wort- oder Zeilenabstand mit !important setzen und damit das Überschreiben durch Nutzer verhindern (Regel avoid inline spacing). Ob Text nach der Änderung abgeschnitten wird, sieht man nur, deshalb ist auch eine manuelle Prüfung nötig.

Manuell: Wenden Sie ein Textabstand-Bookmarklet oder ein Benutzer-Stylesheet mit genau diesen Werten an: line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; und margin-bottom: 2em für Absätze. Gehen Sie dann die wichtigsten Seiten durch und suchen Sie nach abgeschnittenem Text, Überlappungen und Bedienelementen, die sich nicht mehr nutzen lassen.

So beheben Sie es

• Vermeiden Sie feste Höhen bei Elementen, die Text enthalten; verwenden Sie stattdessen min-height und Innenabstand.
• Vermeiden Sie overflow: hidden bei Textcontainern oder lassen Sie sie mitwachsen.
• Lassen Sie Beschriftungen, Tabs und Chips in die nächste Zeile umbrechen.
• Setzen Sie Abstände nicht mit !important in Inline-Styles.

Verwandte Kriterien

• 1.4.4 Textgröße ändern — Text bei 200 % Zoom.
• 1.4.10 Umfluss (Reflow) — kein horizontales Scrollen bei 320 px.
• Kostenlose Prüfung einer Seite — finden Sie Probleme mit Inline-Abständen.

Häufige Fragen

Muss meine Website eine Zeilenhöhe von 1,5 verwenden?

Nein. Die WCAG verlangen diese Abstandswerte nicht in Ihrem Design. Sie verlangen, dass nichts verloren geht, wenn ein Nutzer Ihre Abstände mit diesen Werten überschreibt.

Wie teste ich WCAG 1.4.12?

Wenden Sie ein Textabstand-Bookmarklet oder ein Benutzer-Stylesheet an, das line-height 1.5, Absatzabstand 2em, letter-spacing 0.12em und word-spacing 0.16em setzt, und suchen Sie dann nach abgeschnittenem, überlappendem oder verdecktem Text und defekten Bedienelementen.

Was ist die häufigste Fehlerursache?

Container mit fester Höhe oder overflow: hidden — Buttons, Tabs, Badges und Karten —, die den Text abschneiden, sobald er mehr Platz braucht.