Standards · WCAG 2.2

SC 1.4.12 Stufe AA WCAG 2.1

Textabstand

Wenn Nutzende den Textabstand überschreiben — Zeilenhöhe 1,5-fach, Absatzabstand 2-fach der Schriftgröße, Buchstabenabstand 0,12 em, Wortabstand 0,16 em — darf die Seite keine Inhalte oder Funktionen verlieren.

Was verlangt dieses Erfolgskriterium?

Menschen mit Legasthenie, Sehbeeinträchtigung oder kognitiven Behinderungen setzen häufig Browser-Erweiterungen oder eigene Stylesheets ein, die enge Typografie aufweiten. Das Erfolgskriterium definiert vier konkrete Überschreibungen — Zeilenhöhe auf das 1,5-Fache der Schriftgröße, Absatzabstand auf das 2-Fache der Schriftgröße, Buchstabenabstand auf 0,12 em, Wortabstand auf 0,16 em — und verlangt, dass die Seite auch bei deren Anwendung noch funktioniert. Kein abgeschnittener Text, kein Überlauf, keine fehlenden Inhalte.

So wird das Erfolgskriterium erfüllt

  • Container-Höhen werden mit min-height statt mit einem fixen height-Wert gesetzt, damit sie beim Wachsen des Textes mitwachsen können.
  • Feste Pixelhöhen bei Schaltflächen, Navigationselementen, Karten und Badges werden vermieden — sie sollen mit dem Inhalt wachsen.
  • Das Erfolgskriterium lässt sich durch Einfügen eines bekannten Bookmarklets prüfen (das WCAG-1.4.12-Textabstand-Bookmarklet), das alle vier Überschreibungen gleichzeitig anwendet.
  • Text darf umbrechen; white-space: nowrap sollte bei Beschriftungen, die wachsen können, nicht gesetzt werden.
  • Navigationsmenüs, Tabs und Tab-Beschriftungen müssen auch bei erweitertem Buchstabenabstand noch vollständig sichtbar sein.

Häufige Fehler

  • Schaltflächen mit height: 40px, bei denen die Beschriftung abgeschnitten wird, wenn die Zeilenhöhe auf 1,5 anwächst.
  • Tab-Beschriftungen mit white-space: nowrap, die bei größerem Buchstabenabstand aus ihrem Container herauslaufen.
  • Karten mit fester Höhe, bei denen Text hinter einem „Mehr lesen“-Verlauf verborgen wird.
  • Tooltips und Badges, bei denen der Text abgeschnitten wird, wenn der Absatzabstand zunimmt.
  • Sticky-Header mit fester Höhe, die den Seiteninhalt überlagern, wenn ihr Navigationstext wächst.

Warum das wichtig ist

Dieses Erfolgskriterium deckt Layouts auf, die für exakt einen Abstandssatz entworfen wurden — dort, wo die Designerin oder der Designer alle Werte auf einen Figma-perfekten Zeilenabstand eingefroren hat. Reale Nutzende von Leseunterstützungs-Tools wenden Abstandsüberschreibungen regelmäßig an. Die Behebung besteht meist darin, von height auf min-height zu wechseln und white-space: nowrap zu entfernen — kleine, mechanische Änderungen, die sich auf die gesamte Benutzeroberfläche positiv auswirken.