1.4.12 Textabstand

Was bedeutet das?

Manche Menschen lesen besser mit mehr Abstand und stellen ihn mit einer Browsererweiterung oder einem eigenen Stylesheet ein. Ihre Seite muss diese Werte aushalten: Zeilenhöhe 1,5-fache Schriftgröße, Abstand nach Absätzen 2-fache Schriftgröße, Buchstabenabstand 0,12-fache und Wortabstand 0,16-fache Schriftgröße.

Sie müssen diese Abstände nicht selbst so einstellen. Es geht nur darum, dass nichts kaputtgeht, wenn jemand sie setzt. Häufige Ursache für Probleme sind feste Höhen und overflow: hidden. Ausgenommen sind Sprachen und Schriften, die eine dieser Eigenschaften nicht nutzen.

Wem hilft das?

• Menschen mit Lese-Rechtschreib-Schwäche
• Menschen mit Sehbehinderung
• Menschen mit kognitiven Einschränkungen, denen mehr Abstand beim Lesen hilft

Typische Fehler

• Buttons und Menüeinträge mit fester Höhe, in denen Text abgeschnitten wird
• Teaser-Kästen mit overflow: hidden, die nach zwei Zeilen enden
• Beschriftungen, die mit absoluter Position über anderen Elementen liegen und bei mehr Abstand überlappen

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Wird mit vergrößertem Zeilen-, Absatz-, Buchstaben- und Wortabstand Text abgeschnitten oder überlappt?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

.btn  { height: 40px; overflow: hidden; white-space: nowrap; }
.card { height: 180px; overflow: hidden; }

.btn  { min-height: 2.75rem; padding: 0.5rem 1rem; }
.card { min-height: 11rem; }
/* Testwerte, die Ihre Seite aushalten muss: */
/* * { line-height: 1.5 !important; letter-spacing: 0.12em !important;
       word-spacing: 0.16em !important; }
   p { margin-bottom: 2em !important; } */

Mit Mindesthöhen statt fester Höhen wachsen Kästen mit, wenn Nutzende größere Abstände einstellen.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.12 Text Spacing