WCAG 1.4.12: Textabstand

Was diese Regel bedeutet

WCAG 1.4.12 Textabstand gehört zu Richtlinie 1.4 (Unterscheidbar) und zielt auf ein sehr spezifisches Problem ab: Viele Menschen mit Lesebehinderungen, Sehschwäche oder kognitiven Beeinträchtigungen müssen den standardmäßigen Textabstand einer Webseite überschreiben, um Inhalte für sich lesbar zu machen. Wenn das Layout einer Seite auseinanderbricht – Text abgeschnitten wird, Schaltflächen sich überlappen, Formularbeschriftungen verschwinden oder Inhalte unerreichbar werden –, sobald der Abstand vergrößert wird, erfüllt die Seite dieses Kriterium nicht.

Das Kriterium definiert vier Abstands-Eigenschaften, die funktionsfähig bleiben müssen, wenn sie gleichzeitig auf die folgenden Mindestwerte gesetzt werden:

• Zeilenhöhe (Zeilenabstand): mindestens das 1,5-fache der Schriftgröße des Elements.
• Buchstabenabstand (Tracking): mindestens das 0,12-fache der Schriftgröße des Elements.
• Wortabstand: mindestens das 0,16-fache der Schriftgröße des Elements.
• Abstand nach Absätzen: mindestens das 2-fache der Schriftgröße des Elements.

Eine Seite besteht dieses Kriterium, wenn Nutzer nach Anwendung aller vier Überschreibungen weiterhin den gesamten Text lesen, alle interaktiven Steuerelemente bedienen und auf alle Seiteninhalte zugreifen können – ohne horizontales Scrollen bei einer Viewport-Breite von 320 CSS-Pixeln, ohne Abschneiden oder Kürzen und ohne Überlappung von Inhalten in einem Ausmaß, das sie unlesbar oder unbenutzbar macht.

Eine Seite fällt durch, wenn die Anwendung dieser Überschreibungen Folgendes verursacht: Text wird von einem Container mit fester Höhe und overflow: hidden abgeschnitten; interaktive Beschriftungen oder Schaltflächentext verschwinden; Dropdown-Menüs oder Tooltips überlappen den Hauptinhalt auf unbenutzbare Weise; oder Inhalte werden dauerhaft unzugänglich.

Wichtig ist, dass das Kriterium nicht verlangt, dass Sie diese Abstandswerte selbst setzen. Es verlangt nur, dass Ihr Layout nicht auseinanderbricht, wenn der Nutzer (oder seine unterstützende Technologie, Browser-Erweiterung oder Benutzer-Stylesheet) diese Überschreibungen anwendet. Die Abstandswerte sind Schwellenwerte für Tests, keine Designanforderungen.

Es gibt eine ausdrückliche Ausnahme: Komponenten, bei denen eine bestimmte visuelle Darstellung für die zu vermittelnde Information wesentlich ist – zum Beispiel ein Logotyp, eine in SVG gerenderte Partitur oder ein CAPTCHA-Bild – sind ausgenommen. Diese Ausnahme ist jedoch eng gefasst und sollte nicht als pauschale Begründung verwendet werden, um Navigationsmenüs oder Kartenkomponenten auszunehmen.

Dieses Kriterium gilt für alle im Browser mit CSS gerenderten Textinhalte, einschließlich Überschriften, Absätzen, Beschriftungen, Schaltflächentext, Platzhaltertext, Listenelementen, Tabellenzellen und Navigationslinks. Es gilt nicht für Text, der innerhalb von Bildern oder Canvas-Elementen gerendert wird, da diese von CSS-Abstandsüberschreibungen nicht betroffen sind.

Warum es wichtig ist

Textabstand wirkt sich direkt auf Menschen mit einer breiten Palette von Behinderungen und Leseprofilen aus. Laut der Weltgesundheitsorganisation haben weltweit etwa 2,2 Milliarden Menschen eine Form von Sehbehinderung oder Blindheit, und viele von ihnen verwenden Browser-Zoom oder benutzerdefinierte Stylesheets, um Inhalte lesbar zu machen. Über Sehbehinderungen hinaus haben schätzungsweise 15–20 % der Weltbevölkerung Dyslexie – eine Erkrankung, bei der erhöhter Buchstabenabstand, Wortabstand und Zeilenhöhe nachweislich die Lesbarkeit verbessern, wie durch Forschung belegt, einschließlich Studien, die in der Zeitschrift Annals of Dyslexia veröffentlicht wurden.

Für Nutzer mit kognitiven Beeinträchtigungen wie ADHS oder Verarbeitungsstörungen erhöht enger Textabstand die kognitive Belastung beim Lesen, da es schwieriger wird, Zeilen zu verfolgen und einzelne Wörter zu unterscheiden. Diese Nutzer installieren häufig Browser-Erweiterungen wie das Readability Bookmarklet, Stylus oder plattformweite Barrierefreiheits-Einstellungen, die benutzerdefinierte Abstände auf alle von ihnen besuchten Websites anwenden.

Betrachten Sie ein konkretes Szenario: Eine Studentin mit Dyslexie besucht eine türkische E-Commerce-Plattform, um vor einer Prüfung die Rückgabebedingungen eines Produkts zu prüfen. Sie verwendet eine Browser-Erweiterung, die die Zeilenhöhe global auf 1,7 und den Buchstabenabstand auf 0,14em setzt. Auf der Produktdetailseite befindet sich der Text zu den Rückgabebedingungen in einem Container mit fester Höhe <div>, der mit height: 120px; overflow: hidden; gestylt ist. Mit ihren benutzerdefinierten Abständen sind nur die ersten zwei Zeilen sichtbar, und es gibt keinen Mechanismus, um den Rest anzuzeigen. Sie kann ihre Aufgabe nicht abschließen und verliert das Vertrauen in die Plattform. Genau diesen Fehler soll WCAG 1.4.12 verhindern.

Über den Zugang für Menschen mit Behinderungen hinaus gibt es sekundäre Vorteile. Flexible, abstandsresiliente Layouts sind in internationalen Märkten tendenziell robuster – türkischer Text enthält beispielsweise aufgrund agglutinierender Morphologie häufig längere Wortformen, und Layouts, die keine Abstandsvariation verkraften, neigen auch dazu, bei längeren Zeichenketten zu brechen. Barrierefreie Layouts verbessern indirekt auch die SEO: Inhalte, die lesbar und zugänglich sind, haben tendenziell niedrigere Absprungraten und bessere Engagement-Signale, die von Suchmaschinen in die Rankings einbezogen werden.

Verwandte Axe-core-Regeln

WCAG 1.4.12 erfordert manuelle Tests und kann nicht vollständig allein durch automatisierte Tools verifiziert werden. Dies liegt daran, dass automatisierte Engines nicht vorhersagen können, wie sich ein Layout unter benutzerseitigen Stilüberschreibungen verhält, ohne diese Überschreibungen tatsächlich anzuwenden und das gerenderte Ergebnis zu messen – ein Prozess, der eine visuelle Inspektion oder einen headless Rendering-Vergleich erfordert. Die axe-core-Engine enthält aus diesem Grund keine dedizierte automatisierte Regel für 1.4.12.

• Manuelles Testen mit dem Text Spacing Bookmarklet: Der empfohlene Testansatz ist das von Steve Faulkner erstellte Text Spacing Bookmarklet (jetzt von der Barrierefreiheits-Community gepflegt). Dieses Bookmarklet injiziert ein Stylesheet in die aktuelle Seite, das alle vier Abstands-Eigenschaften gleichzeitig auf ihre minimalen Schwellenwerte setzt. Der Tester prüft dann visuell (oder mit einem Screenreader), ob Inhalte abgeschnitten, überlappend oder unzugänglich sind. Der Bookmarklet-Ansatz ist der Standard, auf den sich das W3C-eigene Understanding-Dokument zu 1.4.12 bezieht.
• Warum Automatisierung nicht ausreicht: Automatisierte Scanner wie axe-core analysieren den DOM und die berechneten Styles, wie sie zum Scanzeitpunkt vorliegen. Sie simulieren keine Benutzer-Stylesheet-Überschreibungen und rendern die Seite nicht neu, um Layout-Überläufe oder Abschneiden zu erkennen, die durch diese Überschreibungen verursacht werden. Ein Container mit overflow: hidden und fester Höhe besteht einen automatisierten Scan, weil er für sich genommen kein Barrierefreiheitsfehler ist – er wird erst dann zu einem, wenn der Abstand erhöht wird. Nur durch Anwenden der Überschreibung und Beobachten des Ergebnisses kann ein Tester einen Fehler bestätigen.
• Ergänzende automatisierte Prüfungen: Obwohl keine axe-Regel direkt auf 1.4.12 abbildet, sollten Prüfer auch beachten, dass die axe-Regel scrollable-region-focusable und Farbkontrast-Regeln verwandte Probleme aufdecken können, die zu einer schlechten Textabstands-Erfahrung beitragen. Zusätzlich kann der Barrierefreiheits-Audit von Lighthouse Container mit fester Größe in bestimmten Kontexten markieren, wenn auch nicht speziell im Hinblick auf Abstands-Compliance.

Wie man testet

1. Installieren Sie das Text Spacing Bookmarklet. Navigieren Sie zur Steve Faulkner Text Spacing Bookmarklet-Seite (zugänglich über das W3C Understanding-Dokument oder eine Websuche nach „text spacing bookmarklet WCAG“). Ziehen Sie das Bookmarklet in die Lesezeichenleiste Ihres Browsers. Alternativ können Sie ein Lesezeichen manuell erstellen und das Bookmarklet-JavaScript als URL einfügen.
2. Öffnen Sie die zu testende Seite in Ihrem Browser bei der Standard-Zoomstufe (100 %). Navigieren Sie zu der Seite oder Komponente, die Sie bewerten möchten – zum Beispiel eine Produktlistenseite, ein Checkout-Formular oder ein Navigationsmenü.
3. Aktivieren Sie das Bookmarklet. Klicken Sie auf das Bookmarklet. Dadurch wird CSS injiziert, das line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important und den margin-bottom von p auf 2em !important für die gesamte Seite setzt.
4. Überprüfen Sie die gesamte Seite visuell. Scrollen Sie durch alle Inhaltsbereiche. Achten Sie auf: Text, der am unteren Rand eines Containers abgeschnitten wird; Schaltflächenbeschriftungen oder Linktext, die verschwunden oder teilweise verborgen sind; Navigationsmenüs oder Dropdowns, bei denen sich Elemente überlappen; Formularfelder, bei denen Platzhalter- oder Beschriftungstext abgeschnitten ist; sowie modale Dialoge oder Tooltips, bei denen Inhalte über die Containergrenze hinauslaufen.
5. Interagieren Sie mit interaktiven Elementen. Tabben Sie durch alle fokussierbaren Elemente, aktivieren Sie Dropdowns, öffnen Sie Modale und senden Sie Formulare ab. Bestätigen Sie, dass alle interaktiven Steuerelemente weiterhin bedienbar sind und dass ihre sichtbaren Beschriftungen mit angewandtem Abstand vollständig lesbar sind.
6. Testen Sie mit einem Screenreader auf Funktionsverlust. Verwenden Sie bei weiterhin aktivem Bookmarklet NVDA mit Firefox oder JAWS mit Chrome, um die Seite nach Überschriften, Regionen und interaktiven Elementen zu durchsuchen. Bestätigen Sie, dass Lesereihenfolge und ausgegebene Inhalte dem entsprechen, was ein sehender Nutzer sieht. Verwenden Sie VoiceOver mit Safari unter macOS oder iOS für die Abdeckung der Apple-Plattform.
7. Testen Sie bei einer Viewport-Breite von 320px. Ändern Sie die Größe Ihres Browserfensters auf 320 CSS-Pixel Breite (oder verwenden Sie den responsiven Modus der Browser-DevTools). Aktivieren Sie das Bookmarklet erneut. Bestätigen Sie, dass Inhalte weiterhin ohne horizontales Scrollen zugänglich sind und dass Text bei kleinen Viewport-Breiten in Kombination mit erhöhtem Abstand nicht abgeschnitten wird.
8. Dokumentieren Sie Fehler. Zeichnen Sie für jeden Fehler Folgendes auf: den Elementtyp, seine CSS-Klasse oder ID, die spezifische Abstands-Eigenschaft, die den Fehler verursacht, sowie einen Screenshot vor und nach der Aktivierung des Bookmarklets.

Wie man es behebt

Container mit fester Höhe schneidet Text ab – Falsch

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Container mit fester Höhe schneidet Text ab – Richtig

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Schaltflächenbeschriftung wird durch feste Schaltflächenhöhe abgeschnitten – Falsch

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Schaltflächenbeschriftung wird durch feste Schaltflächenhöhe abgeschnitten – Richtig

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Tooltip oder Dropdown läuft über ohne Scrollmöglichkeit – Falsch

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Tooltip oder Dropdown läuft über ohne Scrollmöglichkeit – Richtig

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Absatzabstand zerstört Kartenlayout – Falsch

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Absatzabstand zerstört Kartenlayout – Richtig

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Häufige Fehler

• Verwendung von height statt min-height bei Textcontainern. Eine feste height für jedes Element, das Text enthält, führt dazu, dass Text abgeschnitten wird, sobald der Nutzer die Zeilenhöhe oder den Buchstabenabstand erhöht. Ersetzen Sie alle festen Höhen bei textführenden Containern durch min-height, damit der Container wachsen kann.
• Setzen von overflow: hidden bei Containern, die Absatztext enthalten. Dies ist die mit Abstand häufigste Ursache für 1.4.12-Fehler. Versteckter Überlauf schneidet Text ab, der sich bei erhöhtem Abstand vertikal ausdehnt. Verwenden Sie je nach Designkontext overflow: visible oder overflow: auto.
• Verwendung von white-space: nowrap bei Schaltflächen- oder Linkbeschriftungen ohne ausreichende Container-Flexibilität. Wenn der Buchstabenabstand erhöht wird, kann nowrap-Text seinen Elterncontainer überlaufen oder abgeschnitten werden, insbesondere bei Navigationspunkten mit fester Breite.
• Absolute Positionierung von Footer- oder Aktionselementen innerhalb einer Karte mit fester Höhe. Wenn der Karteninhalt aufgrund von Abstandsüberschreibungen wächst, überlappen absolut positionierte Elemente am unteren Rand der Karte den Text. Verwenden Sie stattdessen ein Flexbox-Spaltenlayout.
• Anwenden von max-height mit overflow: hidden auf ausklappbare Bereiche, die sich im ausgeklappten Zustand befinden. Animierte Akkordeons, die sich auf einen berechneten max-height-Wert auf Basis von Pixelmaßen erweitern, schneiden Text an dieser Pixelgrenze ab, wenn der Abstand überschrieben wird – selbst im vollständig geöffneten Zustand.
• Verwendung von CSS line-clamp (webkit-line-clamp) ohne sichtbaren Mechanismus zum Erweitern des vollständigen Inhalts. Das Begrenzen von Text auf eine feste Anzahl von Zeilen ist nur dann akzeptabel, wenn es eine klar beschriftete, tastaturbedienbare Steuerung gibt, um den vollständigen Inhalt anzuzeigen. Clamping ohne jeglichen Erweiterungsmechanismus verstößt gegen 1.4.12.
• Verlassen auf JavaScript, um Elementhöhen dynamisch in Pixeln zu setzen. Skripte, die Elementhöhen messen und diese Pixelwerte dann als Inline-Styles festschreiben, fixieren den Container auf eine Größe, die Benutzer-Abstandsüberschreibungen ignoriert. Verwenden Sie intrinsische Größen und überlassen Sie das Layout CSS.
• Die Annahme, dass automatisierte Barrierefreiheits-Scans alle 1.4.12-Fehler erfassen. Teams, die sich ausschließlich auf axe oder Lighthouse verlassen, ohne das Text Spacing Bookmarklet auszuführen, übersehen alle layoutbasierten Abstandsfehler. Manuelles Testen mit dem Bookmarklet ist für dieses Kriterium zwingend erforderlich.
• Navigation und Mega-Menüs nicht mit dem Bookmarklet testen. Navigationskomponenten werden häufig mit festen Pixelhöhen und verstecktem Überlauf erstellt, um ein poliertes visuelles Ergebnis zu erzielen. Sie gehören auch zu den am häufigsten fehlschlagenden Komponenten für 1.4.12, weil erhöhter Abstand dazu führt, dass Menüpunkte umbrechen und abgeschnitten werden.
• Die Abstandswerte als Designanforderungen statt als Testschwellen behandeln. Einige Teams reagieren auf 1.4.12, indem sie ihre Standard-Styles aktualisieren, um den Schwellenwerten zu entsprechen, was unnötig ist und der Designabsicht widersprechen kann. Das Kriterium verlangt nur, dass das Layout nicht auseinanderbricht, wenn diese Werte angewendet werden – nicht, dass sie der Standard sind.

Bezug zu den Barrierefreiheitsvorschriften der Türkei

WCAG 1.4.12 Textabstand ist direkt relevant für den sich entwickelnden rechtlichen Rahmen zur Barrierefreiheit in der Türkei. Die bedeutendste jüngere Entwicklung ist der Präsidialerlass 2025/10, veröffentlicht im Amtsblatt Nr. 32933 am 21. Juni 2025. Dieser Erlass legt verbindliche Verpflichtungen für eine breite Palette von Organisationen fest, um digitale Barrierefreiheit über ihre Webpräsenz und mobilen Anwendungen hinweg sicherzustellen.

Der Erlass umfasst eine breite Palette von Organisationstypen. Öffentliche Institutionen und Behörden auf allen Ebenen der Regierung sind zur Einhaltung verpflichtet. Private Akteure im Geltungsbereich umfassen E-Commerce-Plattformen, Banken und Finanzinstitute, Krankenhäuser und Gesundheitsdienstleister, Telekommunikationsunternehmen mit 200.000 oder mehr Abonnenten, Reisebüros, private Transportunternehmen und Privatschulen, die vom Bildungsministerium (MoNE) autorisiert sind. Diese Organisationen sind verpflichtet, Konformität auf Level AA mit WCAG zu erreichen, was 1.4.12 einschließt, als Teil ihrer Verpflichtungen aus dem Erlass.

Die Einhaltung auf Level AA ist auch eine Voraussetzung für den Erhalt des Accessibility Logo (Erişilebilirlik Logosu), das vom Ministerium für Familie und Soziale Dienste (Aile ve Sosyal Hizmetler Bakanlığı) vergeben wird. Dieses Logo signalisiert Nutzern, insbesondere Menschen mit Behinderungen, dass ein digitales Produkt geprüft wurde und den erforderlichen Barrierefreiheitsstandard erfüllt. Für Organisationen, die die türkische Community von Menschen mit Behinderungen bedienen – geschätzt mehrere Millionen Menschen, darunter Personen mit Seh-, kognitiven und Lesebeeinträchtigungen – hat das Logo sowohl reputationsbezogene als auch regulatorische Bedeutung.

Praktisch bedeutet dies, dass eine türkische E-Commerce-Plattform, die Produktbeschreibungs-Container mit fester Höhe und overflow: hidden verwendet, oder ein Regierungsportal, dessen Navigationsmenü Text abschneidet, wenn ein Nutzer Abstandsüberschreibungen über eine Browser-Erweiterung oder eine Betriebssystem-Barrierefreiheits-Einstellung anwendet, nicht nur seine Nutzer im Stich lässt – es verstößt möglicherweise auch gegen die Verpflichtungen aus dem Erlass 2025/10. Textabstands-Fehler sind besonders relevant für türkische Nutzer mit Dyslexie und Sehschwäche, die auf benutzerdefinierte Abstands-Tools angewiesen sind, sowie für Nutzer, die auf mobilen Geräten auf staatliche oder kommerzielle Dienste zugreifen, bei denen Betriebssystem-Einstellungen zur Textgröße ebenfalls Layoutinstabilitäten auslösen können, die Abstandsüberschreibungen ähneln.

Organisationen, die das Erişilebilirlik Logosu anstreben, sollten eine manuelle Textabstands-Prüfung mit dem Text Spacing Bookmarklet als verpflichtenden Schritt in ihren Barrierefreiheits-Audit-Prozess aufnehmen, zusätzlich zu automatisierten Scans und Screenreader-Tests. Die Behebung von 1.4.12-Fehlern – hauptsächlich durch Ersetzen fester Höhen durch min-height, Entfernen unnötigen overflow: hidden aus Textcontainern und die Einführung flexibler CSS-Layout-Techniken – ist in der Regel ohne wesentliche Designänderungen erreichbar und stellt eine wertvolle, kostengünstige Verbesserung der Barrierefreiheit jedes türkischen digitalen Dienstes dar.