1.4.12 Abstand zwischen den Texten

Inhalte müssen weiterhin vollständig lesbar und funktional bleiben, wenn der Nutzer folgende Mindestabstände für Text anwendet:

Erforderliche Mindestabstände (laut WCAG)

• Zeilenhöhe - mindestens 1.5× Schriftgröße
• Absatzabstand - mindestens 2× Schriftgröße
• Buchstabenabstand - mindestens 0.12em
• Wortabstand - mindestens 0.16em

Menschen mit:

• Legasthenie
• kognitiven Einschränkungen
• Sehschwäche

... profitieren von mehr Abstand, um:

• Textzeilen nicht zu verwechseln
• Wörter besser zu unterscheiden
• die Lesbarkeit bei langen Texten zu verbessern

C36: Allowing for text spacing override

Erlaube es Nutzern, Textabstände zu überschreiben (z. B. über User Stylesheets oder Erweiterungen).

Umsetzung:

Vermeide !important in deinen Standard-Styles, damit Nutzer ihre eigenen Einstellungen durchsetzen können.

Verwende keine festen Höhen, die Inhalte bei größerem Zeilenabstand abschneiden.

body {
  line-height: 1.5;         /* relative Einheit – ok */
  overflow: visible;        /* erlaubt Reflow */
}

Ziel: Deine Seite bleibt lesbar, auch wenn Nutzer Text mit anderen Abständen darstellen.

C35: Allowing for text spacing without wrapping

Erlaube Abstandseinstellungen, ohne dass der Text aus dem Layout „herausläuft“.

.container {
  max-width: 100%;
  word-break: break-word;
  white-space: normal;
}

• Keine festen Breiten oder white-space: nowrap bei normalen Absätzen!
• Text muss sich automatisch umbrechen dürfen, auch bei mehr Wortabstand.

C8: Using letter-spacing to control spacing within a word

p {
  letter-spacing: 0.12em;
}

• Verbessert Lesbarkeit für manche Nutzer mit Legasthenie
• Achte darauf, dass dadurch das Layout nicht bricht

C21: Specifying line spacing in CSS

p {
  line-height: 1.5;
}

• Empfohlen ist mindestens 1.5× Schriftgröße
• Ermöglicht bessere Trennung von Zeilen

C28: Specifying size of containers using em

.container {
  width: 40em;
}

• Wenn du em statt px verwendest, vergrößert sich der Container mit dem Text
• Besonders nützlich für responsive Designs

overflow: hidden auf Textcontainern - schneidet bei mehr Zeilenhöhe oder Wortabstand Inhalte ab
white-space: nowrap - verhindert automatischen Umbruch
height: 100px auf Textblöcken - bei größerem Text nicht genug Platz → Text wird abgeschnitten
px für Layoutbreiten - nicht skalierbar bei Schriftvergrößerung