1.4.12 Text Spacing

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du versuchst ein Buch zu lesen, bei dem die Wörter so eng aneinander gequetscht sind wie Fahrgäste in der Rush Hour U-Bahn. Für manche Menschen ist genau das der Alltag im Internet – Text ohne ausreichende Abstände macht das Lesen zur Qual.

Menschen mit Legasthenie, Sehbeeinträchtigungen oder kognitiven Einschränkungen brauchen oft mehr Platz zwischen Zeilen, Wörtern und Buchstaben, um Text effektiv lesen zu können. Das Ziel von Erfolgskriterium 1.4.12 ist es sicherzustellen, dass Nutzer die Textabstände nach ihren Bedürfnissen anpassen können, ohne dass dabei Inhalt verschwindet oder die Funktionalität kaputtgeht.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es darum, dass deine Website auch dann noch funktioniert, wenn Nutzer die Textabstände mit eigenen Stylesheets, Browser-Erweiterungen oder anderen Tools anpassen. Dabei müssen folgende Mindestabstände möglich sein:

• Zeilenhöhe: Mindestens das 1,5-fache der Schriftgröße
• Absatzabstände: Mindestens das 2-fache der Schriftgröße
• Buchstabenabstände: Mindestens das 0,12-fache der Schriftgröße
• Wortabstände: Mindestens das 0,16-fache der Schriftgröße

Wichtig: Du musst diese Abstände nicht standardmäßig verwenden! Es geht nur darum, dass dein Layout nicht zusammenbricht, wenn jemand diese Einstellungen überschreibt.

Ausnahme: Sprachen und Schriften, die diese Abstandseigenschaften nicht verwenden, müssen nur die für sie relevanten Eigenschaften berücksichtigen.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du willst einen wichtigen Artikel lesen, aber der Text ist so dicht gepackt, dass du ständig die Zeile verlierst oder Buchstaben ineinander verschwimmen. Genau so ergeht es vielen Menschen täglich im Web.

Anpassbare Textabstände schaffen Barrierefreiheit, weil sie:

• Menschen mit Legasthenie helfen, die durch größere Buchstaben- und Wortabstände schneller lesen können
• Menschen mit Sehbeeinträchtigungen unterstützen, die mehr Platz zwischen Zeilen und Wörtern benötigen
• Nutzern mit kognitiven Einschränkungen die Orientierung erleichtern, indem Textblöcke klarer voneinander getrennt werden
• Älteren Menschen das Lesen erleichtern, die oft von größeren Abständen profitieren
• Allen Menschen in schwierigen Lesesituationen helfen – etwa bei schlechten Lichtverhältnissen oder müden Augen

Und nicht zuletzt machen sie Inhalte universeller nutzbar – auch für automatische Übersetzungen oder andere Assistenztechnologien.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Die meisten modernen, responsive Websites erfüllen dieses Kriterium bereits automatisch. Hier sind die wichtigsten Praxis-Tipps:

Responsive Design ist dein Freund:

• Verwende relative Einheiten (em, rem, %) statt feste Pixel-Werte
• Lass Container mit dem Inhalt mitwachsen, statt sie in feste Größen zu zwängen
• Vermeide overflow: hidden bei Textcontainern
• Setze keine festen Höhen für Textbereiche

Container richtig dimensionieren:

• Plane mindestens 20% zusätzliche Breite für nicht-umbrechenden Text ein
• Verwende min-height statt fester height-Angaben
• Lass Flexbox und CSS Grid für dich arbeiten

Testen mit einfachen CSS-Regeln: Du kannst deine Website ganz einfach testen, indem du diese CSS-Regeln temporär anwendest:

* {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
        word-spacing: 0.16em !important;

}


p {
        margin-bottom: 2em !important;

}

Tools für den Test:

• Browser-Erweiterung "Stylus" für Chrome und Firefox
• Web Developer Tools im Browser
• Spezielle Bookmarklets für Textabstände

Was du vermeiden solltest:

• Absolute Positionierung für Textcontainer
• Feste Größenangaben, die nicht mit dem Content skalieren
• Verschachtelte Container mit begrenzter Overflow-Behandlung

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Auch bei Erfolgskriterium 1.4.12 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.

1. Zielgruppe erweitern

Etwa 10% der Bevölkerung haben Legasthenie, und viele weitere Menschen profitieren von anpassbaren Textabständen. Mit flexiblen Layouts machst du deine Inhalte für eine deutlich größere Zielgruppe nutzbar – auch für Menschen in temporär schwierigen Lesesituationen.

2. Zukunftssicherheit und Flexibilität verbessern

Websites, die flexible Textabstände unterstützen, sind automatisch besser auf verschiedene Geräte, Schriftgrößen und Darstellungsformen vorbereitet. Das macht dich fit für neue Technologien und veränderte Nutzungsgewohnheiten.

3. Höhere Nutzerzufriedenheit und Conversion

Wenn Text leichter lesbar ist, bleiben Nutzer länger auf deiner Seite und verstehen deine Inhalte besser. Das führt zu höherer Zufriedenheit und besseren Conversion-Raten – besonders bei textlastigen Angeboten wie Online-Shops oder Informationsportalen.

Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.

6. Das Erfolgskriterium im Wortlaut der W3

Success Criterion 1.4.12 Text Spacing (Level AA)

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

- Line height (line spacing) to at least 1.5 times the font size;

- Spacing following paragraphs to at least 2 times the font size;

- Letter spacing (tracking) to at least 0.12 times the font size;

- Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

Link zum konkreten Erfolgskriterium

← Zurück zur WCAG-Übersicht