Praxisleitfaden Textabstände anpassen
Textabstände veränderbar machen
Erkennen Sie gesperrte Abstände und schaffen Sie Platz für angepassten Text.
avoid-inline-spacingWCAG 1.4.12
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-avoid-inline-spacing.html
Befund verstehen
Der Stationshinweis blockiert eigene Textabstände
Der Stationshinweis setzt Zeichen- und Wortabstände im style-Attribut auf 0 !important. Auch die Zeilenhöhe ist dort festgeschrieben. Dadurch können etwa ergänzte Styles einer Lesehilfe die Abstände nicht wie vorgesehen ändern.
Warum das relevant ist
Wer größere Abstände zum Lesen benötigt, kann den Hinweis schwerer erfassen. Die zusätzliche feste Höhe mit overflow:hidden kann außerdem Text verbergen, sobald mehr Platz benötigt wird.
Scanner-Signal
avoid-inline-spacing meldet am Absatz .weathered-station .station-controls p die Prüfungen important-letter-spacing und important-word-spacing.
- Regel
avoid-inline-spacing- Referenz
- WCAG 1.4.12
Diagnose am Originalabsatz
letter-spacing: 0 !important → Axe-Verstoß
word-spacing: 0 !important → Axe-Verstoß
Zusätzlich vorhanden: line-height: 1 !important; height: 2em !important; overflow: hidden !important.Die Formatierungsquelle mitprüfen
Ein Textbaustein kann Abstandssperren auf mehreren Seiten ausgeben. Prüfen Sie nach der Korrektur auch längere Hinweise.
- Station Nord× Befund im Beispiel
- Station Süd× Befund im Beispiel
- Stationsübersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie überschreibbare Abstände und Platz für den Text in jeder verwendeten Variante.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Sperre und Platzbedarf getrennt prüfen
Entscheidend sind die gerenderten Abstände und der Platz, den der Absatz nach einer Anpassung erhält.
Die Lehrskizze zeigt die Abstände schematisch. Der unveränderte Stationshinweis steht darunter; die tatsächliche CSS-Sperre finden Sie im Codevergleich.
Ausgangsbeispiel
Abstände gesperrt; Höhe begrenztKorrekturbeispiel
Abstände überschreibbar; Höhe nach InhaltBeispieltext in beiden AnordnungenDer lange Stationshinweis wird bei angepassten Textabständen am Gehäuserand abgeschnitten.
Schematische Anordnung · kein gerendertes Seitenlayout.
Passende Umsetzung auswählen
Fundstelle ansehen
Der Hinweis innerhalb der Meldestation
Der Ausschnitt enthält Überschrift, Einleitung, Pfadkennung, Audiosteuerung und Sichtwarnung. Die Markierung betrifft ausschließlich den Absatz unter den Bedienelementen.
Der Hinweis wirkt in der Ausgangsansicht lesbar. Seine gesperrten Abstände sind jedoch erst im CSS und bei einer Anpassung erkennbar. Der Vorher-/Nachher-Vergleich wird deshalb durch konkrete Diagnosen ergänzt.
CSS korrigieren
Priorität entfernen und den Absatz wachsen lassen
Das Beispiel erhält eine überschreibbare Zeilenhöhe von 1.5. Zeichen- und Wortabstand bleiben zunächst bei 0, jedoch ohne !important. Die feste Höhe und das Abschneiden entfallen. Der Text selbst bleibt erhalten.
Im CMS oder Seitentemplate Prüfen Sie die Formatierung des Textblocks und die Komponente, die das style-Attribut erzeugt. Korrigieren Sie diese Quelle, damit das nächste Speichern die Sperren nicht erneut einträgt.
Vorher
line-height: 1 !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
height: 2em !important;
overflow: hidden !important;Nachher
line-height: 1.5;
letter-spacing: 0;
word-spacing: 0;
height: auto;
overflow: visible;Markierte Zeilen wurden geändert
Anpassung prüfen
Vier Textabstände gemeinsam verändern
WCAG 1.4.12 verlangt Anpassbarkeit ohne Inhalts- oder Funktionsverlust. Die Testwerte sind keine vorgeschriebene Standardgestaltung.
- 1
Setzen Sie die Zeilenhöhe auf mindestens das 1,5-Fache der Schriftgröße.
- 2
Vergrößern Sie den Abstand nach Absätzen auf mindestens das Zweifache der Schriftgröße.
- 3
Setzen Sie den Zeichenabstand auf mindestens 0,12em und den Wortabstand auf mindestens 0,16em.
- 4
Prüfen Sie mit allen vier Änderungen gleichzeitig, ob Text vollständig sichtbar bleibt und die Stationssteuerung weiter nutzbar ist.
- 5
Wiederholen Sie die Prüfung bei schmaler Ansicht und mit weiteren Zuständen oder längeren Hinweisen derselben Komponente.
Fehlversuche vermeiden
Was den Befund nur teilweise behebt
Nur größere Standardabstände setzen
Eine angenehmere Ausgangsansicht ersetzt den Anpassungstest nicht. Andere Menschen benötigen andere Textabstände.
Nur !important entfernen
Die Abstandswerte werden überschreibbar, aber height:2em und overflow:hidden können weiterhin Text abschneiden. Prüfen Sie beides am konkreten Textblock.
Inline-CSS pauschal verbieten
Ein style-Attribut ist nicht allein der Fehler. Hier meldet Axe zu geringe, mit !important priorisierte Textabstände.
Mehr Höhe fest eintragen
Eine neue feste Höhe passt möglicherweise nur zum aktuellen Hinweis. Inhaltabhängige Höhe berücksichtigt auch Textumbrüche und spätere Textänderungen.
Derselbe Absatz besteht den Nachtest
Axe meldet nach der Reparatur einen Pass für avoid-inline-spacing am ursprünglichen Absatz. Der ergänzende Test bestätigt dort alle vier überschriebenen Abstandswerte und keinen internen Textüberlauf.
Verifiziert sind diese Regel und der ergänzende Absatztest im gezeigten Desktopzustand. Überlappungen, andere Ansichten und weitere Barrieren der Meldestation benötigen eigene Prüfungen.
Ergebnis der Korrektur
Inline-Priorität der drei Abstandseigenschaften: entfernt.
Axe: 0 Verstöße, 0 unvollständige Ergebnisse, 1 Pass am Absatz.
Teststile: line-height 1.5; letter-spacing 0.12em; word-spacing 0.16em; margin-bottom 2em greifen.
Nachher-Bild: Standardansicht nach Entfernen der Teststile.Prüfgrenze kennen
Automatischer CSS-Befund und manuelle Layoutprüfung
Die Regel prüft eine konkrete CSS-Barriere. Die vollständige Nutzbarkeit bei angepassten Textabständen geht darüber hinaus.
Automatisch prüfbar
- Problematische !important-Textabstände im gerenderten style-Attribut erkennen.
- Den betroffenen Absatz mit Selektor und Bild zuordnen.
- Nach der Korrektur dieselbe Regel am selben Element wiederholen.
Im Kontext zu entscheiden
- Alle Inhalte bei gemeinsam vergrößerten Zeilen-, Absatz-, Zeichen- und Wortabständen lesen.
- Überdeckte Nachbarelemente, abgeschnittene Beschriftungen und verlorene Funktionen erkennen.
- Schmale Ansichten, dynamische Meldungen und weitere Nutzerwege der Komponente prüfen.