Text muss bei vergrößerten Textabständen lesbar bleiben
Viele Menschen mit Legasthenie oder Sehbehinderung nutzen eine Browsererweiterung, die den Abstand zwischen Zeilen, Wörtern und Buchstaben vergrößert. Haben Schaltflächen, Badges und Menüs feste Höhen, werden ihre Beschriftungen abgeschnitten, sodass Kundinnen und Kunden Preise, Größen oder den Text auf der Checkout-Schaltfläche nicht mehr lesen können.
- Regel-ID
- vs-text-spacing
- Quelle
- Validiscan-Prüfung
- Auswirkung
- Mittel
- Korrekturstufe
- ASSISTED
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Wendet die Textabstände aus WCAG an (Zeilenhöhe 1,5, Absatzabstand 2, Buchstabenabstand 0,12 und Wortabstand 0,16, jeweils als Vielfaches der Schriftgröße) und erkennt Text, der abgeschnitten wird, sich überlappt oder verschwindet (1.4.12).
Die Prüfung friert CSS-Übergänge ein, misst die Seite, fügt die Stile für die vergrößerten Textabstände ein und misst erneut. Der Absatzabstand wird als margin-bottom: 2em auf p-Elemente gesetzt. Gemessen wird jede einzelne Textzeile, nicht die Box des Elements, und zwar bei bis zu 1.500 Elementen mit eigenem Text.
Gemeldet wird Text, dessen Zeilen jetzt mehr als 4 px über eine Box hinausreichen, deren overflow auf hidden oder clip steht, oder die jetzt den Text eines anderen Elements, ein Bild oder ein input horizontal und vertikal um jeweils mehr als 4 px überlappen. Überlauf in eine scrollbare Box zählt nicht, ebenso wenig Text, der schon vorher abgeschnitten oder visuell verborgen war. Fixierte Ebenen (fixed oder sticky) werden nie mit Inhalt verglichen, der unter ihnen hindurchscrollt.
Eine dritte Messung ohne die Stile darf das Problem nicht mehr zeigen. So fällt etwa ein Karussell heraus, das sich von selbst weiterbewegt hat. Die Prüfung läuft in jedem gescannten Viewport, standardmäßig 1440 px und 390 px breit, und meldet höchstens 15 Elemente pro Seite und Viewport. Text in SVG, canvas, textarea und select wird nicht gemessen.
So wird es behoben
Vermeiden Sie feste Höhen und overflow: hidden bei Elementen, die Text enthalten; verwenden Sie stattdessen min-height und padding, damit Schaltflächen, Badges und Menüeinträge mit ihrem Inhalt mitwachsen.
WCAG-Erfolgskriterien
- 1.4.12 Text Spacing, Stufe AA
Abschnitte der EN 301 549
| WCAG-Kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.4.12 | 9.1.4.12 | 9.1.4.12 |
Beginnen Sie mit einem kostenlosen Check Ihres Shops.
Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.
Kostenlosen Check anfordernOder schreiben Sie an info@validiscan.com.
Was der kostenlose Check umfasst und was nicht- Sie senden
- die Adresse Ihres Shops
- Gescannte Seiten
- bis zu 15
- Sie erhalten
- jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
- In Ihrem Shop
- nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
- Was er nicht ist
- ein vollständiges Audit