text-spacing-content-loss

Text bleibt lesbar, wenn Nutzende die Textabstände vergrößern

automaticWCAG 1.4.12 (AA)Konfidenz: mediumSchweregrad: seriousperceivable

Wendet im Browser die Textabstände aus WCAG 1.4.12 an und prüft, dass kein Text abgeschnitten wird oder sich überlagert, und fragt bei Stylesheet-Regeln nach, die Abstände mit !important erzwingen.

Anwendbarkeit. Gilt für eine Seite mit sichtbarem Text. Der Verlust von Inhalt setzt ein Layout (einen Browser) voraus: Ohne Layout werden nur die Stylesheets gelesen.

Erwartung. WCAG 1.4.12: Bei einer Zeilenhöhe vom 1,5-Fachen der Schriftgröße, einem Abstand nach Absätzen vom 2-Fachen, einem Zeichenabstand vom 0,12-Fachen und einem Wortabstand vom 0,16-Fachen gehen weder Inhalte noch Funktionen verloren.

Im Browser werden die Abstände als Stylesheet angewendet, das Vorrang vor dem der Seite hat (abgesehen von Inline-!important, das avoid-inline-spacing meldet), und jede Textzeile wird vorher und nachher gegen die Boxen gemessen, die sie abschneiden: diejenigen in der Kette ihrer umgebenden Blöcke mit overflow: hidden oder clip oder mit contain: paint, sowie der Viewport auf einer Achse, auf der die Seite das Scrollen verhindert, oder bei Text in einer fixierten Box, die nicht mit der Seite scrollt. Eine Zeile, die vorher innen lag und danach mindestens zur Hälfte außen liegt (die Hälfte ihrer Höhe oder ein halbes em in der Breite), ergibt fail: Der Container schneidet diesen Text ab (TEXT_CLIPPED). Eine weniger weit hinausgeschobene Zeile wird nachgefragt (TEXT_CLIPPED_PARTLY), ebenso Text, der neu anderen Text überlagert, den er vorher nicht überlagerte (TEXT_OVERLAPS). Text, den eine endlos wiederholte Animation bewegt (ein Lauftext), wird unabhängig davon nachgefragt, wie weit er sich verschiebt (TEXT_CLIPPED_MOVING): Er läuft ohnehin über den Rand, und ein einzelnes Bild kann nicht zeigen, ob etwas davon verloren geht. Wo die Seite das Scrollen sperrt, also beide Achsen des Viewports verborgen sind, während bereits Inhalt darüber hinaus lag, wie hinter einem Cookie-Banner, wird zu Text nachgefragt, den die Abstände aus dem Viewport schieben (VIEWPORT_SCROLL_LOCKED): Die Sperre ist meist ein vorübergehender Zustand, und die Engine kann nicht dahinter sehen. Text in einem <marquee> bleibt außen vor: Browser bewegen ihn außerhalb der Web Animations API, sodass die Engine ihn nicht anhalten kann, und sein Befund hinge davon ab, wann der Scan lief; deprecated-elements-not-used fragt zum Marquee nach (2.2.2). Text, den seine Box bereits vor den Abständen abgeschnitten hat (ein Auszug mit fester Höhe), wird nachgefragt, wenn die Abstände Zeilen abschneiden, die er vollständig zeigte (TEXT_CLIPPED_FURTHER): Der Auszug wurde absichtlich gekürzt, zeigt aber weniger. Eine Box, die mit ihren Zeilen wächst, wie bei line-clamp, zeigt ebenso viele und bleibt unberücksichtigt.
In jeder Umgebung wird eine Stylesheet-Regel nachgefragt, die line-height, letter-spacing oder word-spacing mit !important unter diese Werte setzt (STYLESHEET_IMPORTANT): Ein Werkzeug, das der Seite ein eigenes Stylesheet hinzufügt, kann sie nicht überschreiben, ein Nutzer-Stylesheet dagegen schon. Ein Wert relativ zur Schriftgröße wird so gelesen, wie er deklariert ist, und ein berechneter Wert erreicht den Zielwert innerhalb der Rundung, mit der Browser Längen angeben, daher wird eine Regel, die genau das Minimum setzt, nicht nachgefragt.
Die Abstände werden mit einem <style>-Element angewendet oder, wo die Content Security Policy der Seite das blockiert, als Stylesheet, das das Dokument übernimmt (adopted style sheet). Wo beides nicht möglich ist, wird zur Seite nachgefragt (SPACING_NOT_APPLIED), statt sie zu messen; sie besteht nie.

Ohne Layout und ohne eine solche Regel ist die Regel notApplicable, mit data.reason: 'noLayout'.

Beurteilt wird nur Text innerhalb des Scan-Bereichs (contextSelector), der nicht ausgeschlossen ist (excludeSelectors). Text anderswo auf der Seite wird trotzdem gemessen, da Text im Bereich ihn überlagern kann. Solange ein modaler Dialog geöffnet ist, bleibt die Seite dahinter ganz außen vor: Der Browser macht sie inert, und der Scan beurteilt den Dialog.
Abstand zum Grenzwert (overflow-px): unter dem Text, den eine abschneidende Box vollständig behält, die Zeile, die dem Abschneiden am nächsten kam. value gibt an, wie weit sie über den Rand der Box hinausreicht, negativ, solange sie noch innen liegt, gemessen an 2px, ab denen eine Zeile teilweise abgeschnitten ist (der erste Befund); context.axis und context.text geben an, welcher Rand und welcher Text. Gemessen wird dort, wo Text mit mehr Abstand wächst: am Ende in Zeilenrichtung (rechts, bei Text von rechts nach links links) und unten; ein Anfangsrand zählt erst, wenn eine Zeile darüber hinaus ist. Eine Achse, auf der die Box mit den Abständen gewachsen ist (ein Block mit automatischer Höhe), folgt ihrem Inhalt und bleibt außen vor, und vertikaler Text erhält keinen Abstand zum Grenzwert. Text, den eine wiederholte Animation bewegt (ein Lauftext), bleibt außen vor, da seine Position davon abhängt, an welchem Punkt die Animation angehalten wurde, ebenso eine Box, die anderen Text abschneidet: Sie ist ein Befund. Nur eine Zeile innerhalb von 8px vor der Grenze (ab 6px innerhalb des Rands) gilt als knapp; Text, der tiefer in seiner Box liegt, liefert daher keinen Abstand zum Grenzwert. measuredCount zählt die verglichenen Paare aus Text und abschneidender Box; wie die Befunde deckt der Abstand zum Grenzwert die ersten 3.000 Textknoten ab.

Was ein Befund meldet.

text: der Anfang des Texts, bis zu 60 Zeichen. Nicht beim Befund einer Stylesheet-Regel.
lines.shownBefore, lines.shownAfter (TEXT_CLIPPED_FURTHER): wie viele Zeilen des Texts seine Box ohne und mit den Abständen vollständig zeigte.
metrics.overflowPx (abgeschnittener Text): wie weit, in CSS-Pixeln, die Zeile mit angewendeten Abständen über den Rand der Box hinausging, die sie abschneidet.
metrics.thresholdPx (abgeschnittener Text): wie weit sie hinausgehen darf, bevor sie fehlschlägt: horizontal ein halbes em, vertikal die halbe Zeilenhöhe.
metrics.axis (abgeschnittener Text): x, wenn die Zeile über einen seitlichen Rand hinausging, y über den oberen oder unteren.
container.widthPx, container.heightPx (abgeschnittener Text): die Größe der abschneidenden Box mit angewendeten Abständen.
viewport.width, viewport.height (abgeschnittener oder überlappender Text): der Viewport, in dem die Seite dargestellt wurde, in CSS-Pixeln. Text, der bei einer Breite passt, kann bei einer anderen abgeschnitten werden.
other (überlappender Text): der Text, den er dadurch überlappt.
selector, property, value (eine Stylesheet-Regel): der Selektor der Regel und die Deklaration, die den Abstand erzwingt.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Abstand zum Grenzwert. Diese Regel misst overflow-px in CSS-Pixeln, und der Wert muss unter dem Grenzwert bleiben. Lag ein bestandenes Ergebnis nahe am Grenzwert, nennt das Feld margin des Ergebnisses das Element, das ihm am nächsten kam und ihn trotzdem einhielt. So zeigt sich ein knappes Ergebnis, bevor eine kleine Änderung es kippt. Anders als die Felder eines Befunds ist es ein stabiler Vertrag. Siehe Ausgabeschema.

Beispiele

passIn einem Browser

<p>Opening hours today, and the rest of the week from nine to five.</p>

Der Absatz hat keine feste Größe, daher wächst der Text mit den Abständen mit, und nichts geht verloren.

failIn einem Browser

<style>
  .hours { width: 19ch; height: 20px; overflow: hidden; }
</style>
<div class="hours">Opening hours today</div>

Mit Zeilenhöhe 1,5, Zeichenabstand 0,12em und Wortabstand 0,16em bricht der Text in eine zweite Zeile um, die die Box abschneidet. In jsdom, das kein Layout hat, liest die Regel nur die Stylesheets und fragt bei mit !important erzwungenen Abständen nach.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

`SPACING_NOT_APPLIED`

Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important. Im Bereich „Stile“ hinzugefügte Regeln werden von der Sicherheitsrichtlinie der Seite nicht blockiert.
Scrollen Sie durch die ganze Seite und suchen Sie nach Text, der abgeschnitten wird, anderen Text überlappt oder verschwindet.
Wo Text abgeschnitten ist, prüfen Sie, ob die Seite eine Möglichkeit bietet, ihn ganz anzuzeigen, etwa einen Link „Weiterlesen“ oder eine Schaltfläche, die den Bereich aufklappt. Das zählt nur, wenn sie sich mit der Tastatur bedienen lässt und bei weiterhin angewendeten Abständen den ganzen Text zeigt.
Prüfen Sie, ob Bedienelemente und Menüs weiterhin funktionieren und ihren gesamten Text zeigen.

Bestanden. Aller Text bleibt sichtbar und lesbar, oder abgeschnittener Text lässt sich mit der Tastatur ganz anzeigen, und mit den angewendeten Abständen funktioniert alles weiter.

Nicht bestanden. Mit den angewendeten Abständen wird Text abgeschnitten, überlappt oder geht verloren und lässt sich auf keinem anderen Weg ganz anzeigen; das verstößt gegen WCAG 1.4.12.

`STYLESHEET_IMPORTANT`

Notieren Sie Regel, Eigenschaft und Wert, die der Bericht angibt, und suchen Sie im Bereich „Elemente“ ein Element, das sie gestaltet.
Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important.
Prüfen Sie im Tab „Berechnet“, ob line-height, letter-spacing und word-spacing des Elements jetzt diese Werte haben.
Ist das nicht so, geben Sie dem Element dieselben Werte in seinem eigenen Stil (im Abschnitt element.style oben im Bereich „Stile“), wie es ein Benutzer-Stylesheet täte, und prüfen Sie, ob sein Text lesbar bleibt.

Bestanden. Die Abstände der Nutzenden wirken weiterhin auf das Element, oder der Inhalt ist auch ohne sie gut lesbar.

Nicht bestanden. Die !important-Regel der Seite verhindert, dass die Abstände der Nutzenden wirken; das verstößt gegen WCAG 1.4.12.

`TEXT_CLIPPED_FURTHER`

Suchen Sie den im Bericht genannten Textauszug und notieren Sie, wie viele Zeilen er vollständig zeigt.
Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important.
Zählen Sie die Zeilen, die er jetzt zeigt, und prüfen Sie, ob ein „Weiterlesen“-Link oder ein anderer Weg weiterhin zum vollständigen Text führt.

Bestanden. Der Auszug erfüllt weiterhin seinen Zweck, und der vollständige Text ist auf anderem Weg erreichbar.

Nicht bestanden. Die Abstände schneiden Inhalte ab, die auf keinem anderen Weg erreichbar sind; das verstößt gegen WCAG 1.4.12.

`TEXT_CLIPPED_MOVING`

Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important.
Suchen Sie den im Bericht genannten bewegten Text und beobachten Sie mindestens einen vollständigen Durchlauf seiner Animation.
Halten Sie ihn an, falls es ein Bedienelement gibt, und prüfen Sie, ob sein gesamter Text irgendwann gelesen werden kann.

Bestanden. Jeder Teil des bewegten Textes kann während seines Durchlaufs gelesen werden.

Nicht bestanden. Ein Teil des Textes erscheint mit den angewendeten Abständen nie vollständig; das verstößt gegen WCAG 1.4.12.

`TEXT_CLIPPED_SCRIPT_SIZED`

Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important.
Suchen Sie den im Bericht genannten Text und warten Sie einen Moment: Das Skript der Seite passt den Bereich darum vielleicht an den längeren Text an.
Wirkt er noch abgeschnitten, machen Sie das Browserfenster etwas schmaler oder breiter oder klicken Sie auf eine leere Stelle der Seite; dann bemessen viele Seiten ihre Bereiche neu.
Lesen Sie den Text und prüfen Sie, ob er ganz zu sehen ist.

Bestanden. Sobald die Seite reagiert hat, passt der Bereich zum Text und alles ist mit den angewendeten Abständen lesbar.

Nicht bestanden. Der Text bleibt mit den angewendeten Abständen abgeschnitten, auch nachdem die Seite Zeit zum Reagieren hatte; das verstößt gegen WCAG 1.4.12.

`TEXT_CLIPPED_PARTLY`

Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important.
Suchen Sie den im Bericht genannten Text und betrachten Sie den Rand des Kastens, der ihn abschneidet.
Lesen Sie den Text und prüfen Sie, ob jeder Buchstabe noch zu erkennen ist, einschließlich Ober- und Unterlängen.
Wo Text abgeschnitten ist, prüfen Sie, ob die Seite eine Möglichkeit bietet, ihn ganz anzuzeigen, etwa einen Link „Weiterlesen“ oder eine Schaltfläche, die den Bereich aufklappt. Das zählt nur, wenn sie sich mit der Tastatur bedienen lässt und bei weiterhin angewendeten Abständen den ganzen Text zeigt.

Bestanden. Nur ein schmaler Streifen am Rand ist abgeschnitten und der ganze Text bleibt lesbar, oder der ganze Text lässt sich auf anderem Weg mit der Tastatur anzeigen, bei weiterhin angewendeten Abständen.

Nicht bestanden. Ein Teil des Texts ist abgeschnitten und nicht mehr lesbar und lässt sich auf keinem anderen Weg ganz anzeigen; das verstößt gegen WCAG 1.4.12 (F104).

`TEXT_OVERLAPS`

Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important.
Suchen Sie den im Bericht genannten Text und den Text, den er jetzt überlappt.
Lesen Sie beide und prüfen Sie, ob einer davon dort, wo sie sich überlappen, schwer lesbar wird.

Bestanden. Die Überlappung ist nur ein schmaler Streifen an den Rändern und beide Texte bleiben lesbar.

Nicht bestanden. Text wird so über anderen Text gezeichnet, dass einer davon unlesbar wird; das verstößt gegen WCAG 1.4.12 (F104).

`VIEWPORT_SCROLL_LOCKED`

Schließen Sie jedes auf der Seite geöffnete Banner, jeden Dialog und jedes Overlay, damit die Seite scrollen kann.
Fügen Sie im Bereich „Stile“ der Entwicklertools eine neue Stilregel für * mit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important hinzu sowie eine Regel für p mit margin-bottom: 2em !important.
Scrollen Sie zum im Bericht genannten Text und prüfen Sie, ob er erreicht und gelesen werden kann.

Bestanden. Sobald das Overlay geschlossen ist, scrollt die Seite und der gesamte Text kann erreicht und gelesen werden.

Nicht bestanden. Der Text bleibt mit den angewendeten Abständen unerreichbar; das verstößt gegen WCAG 1.4.12.

Quellcode ansehen