WCAG 2.1 - 1.4.12
Text Spacing
In Inhalten, die mit Auszeichnungssprachen implementiert sind und die folgenden Textstil-Eigenschaften unterstützen, tritt kein Verlust von Inhalt oder Funktionalität auf, wenn alle folgenden Eigenschaften festgelegt werden und keine anderen Stil-Eigenschaften geändert werden:
Inhalt
Was steht in den Guidelines zum Success Criterium 1.4.12 - Text Spacing?Was Bedeutet das Success Criterium 1.4.12 - Text Spacing?Warum ist es so wichtig, das Success Criterium 1.4.12 - Text Spacing zu beachten?Was hat das Success Criterium 1.4.12 - Text Spacing mit dem BFSG zu tun?Lösungen für 1.4.12 - Text Spacing anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.12 - Text Spacing?Was steht in den Guidelines zum Success Criterium 1.4.12 - Text Spacing?
Implementationshinweise
- Zeilenhöhe (Zeilenabstand) von mindestens 1,5-facher Schriftgröße;
- Abstand nach Absätzen von mindestens dem doppelten der Schriftgröße;
- Der Buchstabenabstand (Tracking) sollte mindestens 0,12 mal der Schriftgröße betragen;
- Wortabstand von mindestens 0,16 mal der Schriftgröße.
Was Bedeutet das Success Criterium 1.4.12 - Text Spacing?
Text Spacing verlangt, dass Webseiten auch dann noch funktionieren und verständlich bleiben, wenn Nutzer:innen bestimmte Abstände in der Textdarstellung (wie Zeilenhöhe, Abstand zwischen Absätzen und Zeichenabstand) individuell anpassen – z.B. über eigene Stylesheets oder Browser-Plugins. Die Mindestwerte, die dabei zu unterstützen sind:
- Zeilenhöhe (line height): mindestens 1.5 x Schriftgröße (font size)
- Abstand nach Absätzen (paragraph spacing): mindestens 2 x Schriftgröße
- Zeichenabstand (letter spacing): mindestens 0.12 x Schriftgröße
- Wortabstand (word spacing): mindestens 0.16 x Schriftgröße
Das bedeutet: Du musst sicherstellen, dass Inhalte, Bedienelemente, Layout oder Funktionalitäten weder verloren gehen noch sich überlagern, wenn diese Werte angepasst werden. Wichtig: Du musst die Anpassbarkeit ermöglichen, es muss aber nicht die Standarddarstellung deiner Seite sein. Häufige Fehler sind fix definierte Höhen für Textcontainer oder überlappende Elemente.
Typische Problemstellen
- Texte in Buttons oder Menüleisten, die bei größerem Zeilenabstand abgeschnitten werden
- Absätze, bei denen zusätzlicher Abstand dazu führt, dass Text über andere Elemente fließt
- Scrollbare Bereiche mit Text, bei denen Inhalte verschwinden, wenn Textabstände erhöht werden
Wie prüfe ich das?
Du kannst die Anpassung recht einfach testen, indem du über die Developer-Tools deines Browsers oder ein User-Style-Sheet für die Seite folgende CSS-Regeln einfügst:
body * {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
margin-bottom: 2em !important;
}
Schau dir mit diesen Einstellungen an, ob noch alles wie gewollt dargestellt wird und lesbar bleibt.
Warum ist es so wichtig, das Success Criterium 1.4.12 - Text Spacing zu beachten?
Viele Menschen mit Sehbehinderungen, Lernschwierigkeiten oder Legasthenie sind auf angepasste Textdarstellung angewiesen, um Inhalte besser lesen zu können. Wenn sie Textabstände erhöhen, um das Lesen für sich zu erleichtern, sollte die Website nicht unbenutzbar werden. Überlappende oder verschwindende Texte führen dazu, dass wichtige Inhalte verloren gehen – die Webseite ist dann nicht mehr für alle zugänglich.
Was hat das Success Criterium 1.4.12 - Text Spacing mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz setzt die entsprechende Richtlinie auf Grundlage der WCAG um und fordert eine wahrnehmbare, verlässliche und benutzbare Gestaltung. Wenn die Webseite nicht mit individuell anpassbaren Textabständen funktioniert, ist sie nicht für alle Menschen nutzbar und entspricht damit nicht dem BFSG. Ein Verstoß gegen 1.4.12 führt also zu fehlender BFSG-Konformität.
Lösungen für 1.4.12 - Text Spacing anhand von Codebeispielen
Falscher Code
<div style="height:40px; overflow:hidden;">Willkommen auf unserer Website!</div>Korrekter Code
<div style="min-height:40px;">Willkommen auf unserer Website!</div>Im schlechten Beispiel sorgt ein fester Höhenwert dafür, dass bei größerer Zeilenhöhe Text abgeschnitten wird und nicht mehr lesbar ist. Durch min-height im guten Beispiel bleibt nach unten Platz für angepasste Textabstände.
Falscher Code
<p style="line-height:1;">Kontaktieren Sie uns jederzeit für Fragen!</p>Korrekter Code
<p style="line-height:1.5;">Kontaktieren Sie uns jederzeit für Fragen!</p>Beim schlechten Code steht die Zeilenhöhe zu eng, und es kann bei Anpassungen zu Überlappungen kommen. Das gute Beispiel sieht ausreichend Zeilenhöhe vor, so dass Anpassungen kein Problem mehr sind.
Wie löse ich Verstöße gegen das Success Criterium 1.4.12 - Text Spacing?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.