- Stufe
- AA
- Seit
- WCAG 2.1
- Einträge
- 29 / 193
1.4.12 Textabstand
Wenn jemand die Abstände zwischen Zeilen, Absätzen, Buchstaben und Wörtern vergrößert, darf kein Text abgeschnitten werden oder sich überlagern.
/ Was es verlangt
Manche Menschen, darunter viele mit Legasthenie oder Sehbehinderung, lesen deutlich leichter, wenn zwischen Zeilen, Wörtern und Buchstaben mehr Raum ist. Diesen Raum stellen sie selbst ein: mit einer Browsererweiterung, einem Bookmarklet oder einem eigenen Stylesheet. Die Seite muss nicht von sich aus so aussehen. Sie muss weiter funktionieren, wenn jemand es tut: keine abgeschnittenen Sätze, kein Text, der in den nächsten Block läuft, keine Schaltfläche, deren Beschriftung verschwunden ist.
Das Kriterium nennt vier Werte und verlangt, dass das Setzen aller vier, und sonst nichts, keinen Verlust von Inhalt oder Funktionalität verursacht: Zeilenhöhe mindestens das 1,5-Fache der Schriftgröße, Abstand nach Absätzen mindestens das 2-Fache, Zeichenabstand mindestens das 0,12-Fache und Wortabstand mindestens das 0,16-Fache der Schriftgröße. Es gilt für Inhalt in Auszeichnungssprachen, die diese Eigenschaften unterstützen; Bilder von Text fallen also nicht darunter, und eine Schrift, die eine der Eigenschaften nicht kennt, wird ohne sie geprüft.
/ Woran Seiten scheitern
- Ein Container hat eine feste Höhe und overflow: hidden, sodass die größere Zeilenhöhe die letzten Zeilen aus dem sichtbaren Bereich schiebt.
- Schaltflächen, Tabs oder Navigationspunkte haben eine feste Höhe oder Breite und white-space: nowrap, und der größere Zeichenabstand schneidet ihre Beschriftung ab.
- Text läuft aus einem Kasten mit fester Höhe heraus und über den Inhalt darunter.
- Überschriften oder Kartentexte werden mit text-overflow: ellipsis oder einer Zeilenbegrenzung gekürzt, und die Abstände verbergen Wörter, die vorher sichtbar waren.
- Text ist absolut über einer Hintergrundform positioniert, die nicht mit ihm wächst.
/ So prüfen Sie es selbst
- Wenden Sie die vier Werte mit einem Bookmarklet oder einer Browsererweiterung für Textabstände an oder fügen Sie in den Entwicklerwerkzeugen eine Regel ein: line-height: 1.5, letter-spacing: 0.12em, word-spacing: 0.16em für alle Elemente und margin-bottom: 2em für Absätze, jeweils mit dem Zusatz important.
- Gehen Sie die Seite durch und vergleichen Sie sie mit dem Original: Achten Sie auf abgeschnittene Zeilen, überlappenden Text, Beschriftungen, die nicht mehr in ihre Schaltflächen passen, und verschwundenen Inhalt.
- Sehen Sie sich besonders Komponenten mit engen Kästen an: Navigation, Tabs, Schaltflächen, Karten, Etiketten, Formularbeschriftungen, Tabellenzellen und Banner.
- Wiederholen Sie die Prüfung in einem schmalen Fenster, denn Kästen, die am Desktop Platz haben, haben ihn auf dem Telefon oft nicht.
/ So beheben Sie es
- Ersetzen Sie height durch min-height bei jedem Element, das Text enthält, und bemessen Sie Schaltflächen über padding statt über eine feste Höhe.
- Entfernen Sie white-space: nowrap, wo Text umbrechen kann, und lassen Sie Flex- und Grid-Elemente mit ihrem Inhalt wachsen.
- Verwenden Sie overflow: hidden nicht, um Textkästen aufzuräumen. Wo Kürzen beabsichtigt ist, geben Sie den Lesenden einen Weg zum vollständigen Text.
- Geben Sie Größen, die vom Text abhängen, in em oder rem an, damit Kästen mit der Schrift skalieren.
- Lassen Sie Text im normalen Fluss, statt ihn absolut in einen Kasten fester Größe zu setzen.
/ Was unser Scanner prüft
Der Durchlauf auf der gerenderten Seite merkt sich, welche von bis zu 400 sichtbaren Textelementen bereits abgeschnitten sind, und fügt dann ein Stylesheet ein: Zeilenhöhe 1.5, Zeichenabstand 0.12em, Wortabstand 0.16em und 2em unterer Außenabstand für Absätze, Listenpunkte und Überschriften. Er misst erneut, entfernt das Stylesheet und meldet nur die Kästen, die erst dadurch abgeschnitten wurden. Text, der sichtbar überläuft und seine Nachbarn überlappt, erkennt er nicht.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Politechnika Śląska | education · PL | 19 | 2 |
| Poznań | city · PL | 18 | 1 |
| Gdańsk | city · PL | 14 | 2 |
| Bydgoszcz | city · PL | 12 | 7 |
| Wrocław | city · PL | 10 | 2 |
| Uniwersytet Marii Curie-Skłodowskiej | education · PL | 9 | 9 |
| Uniwersytet Warszawski | education · PL | 9 | 4 |
| Gdynia | city · PL | 5 | 7 |
| Politechnika Gdańska | education · PL | 5 | 22 |
| King County | government · US | 4 | 15 |
| Universität Hamburg | education · DE | 4 | 36 |
| Warszawa | city · PL | 4 | 20 |
| Bundestag | government · DE | 3 | 17 |
| State of Washington | government · US | 3 | 9 |
| Lublin | city · PL | 2 | 17 |
| Stuttgart | city · DE | 2 | 6 |
| Uniwersytet Mikołaja Kopernika | education · PL | 2 | 6 |
| Bundesnetzagentur | government · DE | 1 | 9 |
| Główny Urząd Statystyczny | government · PL | 1 | 17 |
| Las Vegas | city · US | 1 | 8 |
| Muzeum Narodowe w Warszawie | culture · PL | 1 | 11 |
| Polski Instytut Sztuki Filmowej | culture · PL | 1 | 7 |
| RWTH Aachen | education · DE | 1 | 19 |
| Radom | city · PL | 1 | 2 |
| Szczecin | city · PL | 1 | 2 |
| Teatr Wielki Opera Narodowa | culture · PL | 1 | 3 |
| Technische Universität München | education · DE | 1 | 14 |
| Uniwersytet im. Adama Mickiewicza | education · PL | 1 | 12 |
| Warszawski Uniwersytet Medyczny | education · PL | 1 | 13 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Muss ich auf meiner Website line-height 1.5 setzen?
Nein. 1.4.12 schreibt nicht vor, wie eine Seite gestaltet wird. Es verlangt, dass nichts verloren geht, wenn Lesende die vier Abstandswerte selbst anwenden. Ein Design mit engeren Abständen ist konform, solange es diese Änderung übersteht. Großzügige Standardabstände helfen der Lesbarkeit, sind aber nicht das, was dieses Kriterium prüft.
Wie teste ich den Textabstand?
Wenden Sie alle vier Werte gleichzeitig an und sehen Sie sich das Ergebnis an. Am schnellsten geht es mit einem Bookmarklet oder einer Erweiterung für Textabstände; von Hand genügt eine Stilregel in den Entwicklerwerkzeugen mit line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em und einem Absatzabstand von 2em, alle mit dem Zusatz important. Prüfen Sie danach jede Komponente auf abgeschnittenen oder überlappenden Text.
Welche vier Werte für den Textabstand nennt WCAG?
Zeilenhöhe mindestens das 1,5-Fache der Schriftgröße, Abstand nach Absätzen mindestens das 2-Fache der Schriftgröße, Zeichenabstand mindestens das 0,12-Fache und Wortabstand mindestens das 0,16-Fache der Schriftgröße. Sie werden gemeinsam angewandt, ohne einen anderen Stil zu ändern, und die Seite muss weiterhin ihren gesamten Inhalt zeigen und alle Funktionen behalten.