Deutsch
Website-Menü

avoid-inline-spacing

Inline-Stile dürfen keine Textabstände unterhalb des WCAG-Werts erzwingen

automaticWCAG 1.4.12 (AA)Konfidenz: highSchweregrad: moderateperceivable

Prüft, dass ein per Inline-Stil mit !important erzwungenes line-height, letter-spacing oder word-spacing bereits WCAG 1.4.12 erfüllt, sodass Nutzende nichts mehr überschreiben müssen.

Anwendbarkeit. Gilt für ein gerendertes Element mit eigenem sichtbarem Text, dessen style-Attribut line-height, letter-spacing oder word-spacing als !important mit einem echten Wert deklariert. Ein CSS-weites Schlüsselwort (inherit, initial, unset, revert) legt selbst keinen Abstand fest und liegt außerhalb des Geltungsbereichs.

Erwartung. Jede solche Deklaration erfüllt bereits den in WCAG 1.4.12 für diese Eigenschaft festgelegten Wert, als Vielfaches der Schriftgröße: line-height mindestens 1,5, letter-spacing mindestens 0,12, word-spacing mindestens 0,16. Ein erzwungener Wert, der das Kriterium bereits erfüllt, lässt Nutzenden nichts zu überschreiben.

Was ein Befund meldet.

  • properties: die Abstandseigenschaften, um die es im Befund geht. Jeder Eintrag ist line-height, letter-spacing oder word-spacing. Bei einem fail oder bei Text, der möglicherweise nie umbricht, sind es die, die unter den Mindestwert gezwungen werden; bei INLINE_SPACING_NOT_RESOLVABLE die, deren Wert sich nicht ermitteln ließ.

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.

Beispiele

pass
<p style="letter-spacing:2px !important">Spaced text</p>

Das erzwungene letter-spacing liegt über dem Mindestwert von WCAG 1.4.12.

fail
<p style="line-height:1.2 !important">The toy brought back fond memories of being lost in the rain forest.</p>

!important erzwingt eine line-height unter dem Mindestwert 1,5, und die eigenen Stile der Seite können das nicht überschreiben.

can't tell
<p style="line-height:1 !important">Opening hours</p>

Der Text ist kurz genug, um in eine Zeile zu passen, bricht also möglicherweise nie um, und das Kriterium gilt nur für Text, der umbricht.

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.

INLINE_SPACING_NOT_RESOLVABLE

  1. Untersuchen Sie das im Bericht genannte Element und lesen Sie den !important-Abstandswert in seinem style-Attribut.
  2. Lesen Sie im Tab „Berechnet“ der Entwicklertools die resultierende line-height, letter-spacing oder word-spacing in Pixeln und vergleichen Sie sie mit dem 1,5-, 0,12- oder 0,16-Fachen der Schriftgröße.
  3. Wenden Sie die Textabstände aus WCAG 1.4.12 (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, Absatzabstand 2em) mit !important an, zum Beispiel über ein Benutzer-Stylesheet oder ein Bookmarklet; da der eigene !important-Inline-Stil des Elements Vorrang hat, notieren Sie auch die Werte, die es behält.
  4. Verkleinern Sie auf 320 CSS-Pixel und prüfen Sie, ob der Text abgeschnitten wird oder sich überlappt.

Bestanden. Der erzwungene Wert erfüllt die Metrik aus WCAG 1.4.12, oder der Text bricht nicht um, oder mit den angewendeten Abständen geht nichts verloren.

Nicht bestanden. Der erzwungene Wert liegt bei umbrechendem Text unter der Metrik und der Text verträgt keine benutzerdefinierten Abstände ohne Verlust; das verstößt gegen WCAG 1.4.12.

INLINE_SPACING_NO_SOFT_WRAP

  1. Untersuchen Sie das im Bericht genannte Element und notieren Sie, welche Abstandseigenschaft sein style-Attribut mit !important erzwingt.
  2. Verkleinern Sie das Fenster auf 320 CSS-Pixel Breite (oder zoomen Sie auf 400 %) und prüfen Sie, ob der Text jemals in eine zweite Zeile umbricht.
  3. Wenden Sie die Textabstände aus WCAG 1.4.12 (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, Absatzabstand 2em) mit !important an, zum Beispiel über ein Benutzer-Stylesheet oder ein Bookmarklet; da der eigene !important-Inline-Stil des Elements Vorrang hat, notieren Sie auch die Werte, die es behält.
  4. Prüfen Sie, ob Text abgeschnitten wird, sich überlappt oder verborgen ist.

Bestanden. Der Text kann nicht umbrechen (er bleibt in einer Zeile oder scrollt) und nichts wird abgeschnitten oder überlappt, sodass das Kriterium nicht zutrifft.

Nicht bestanden. Der Text bricht um, und mit den erzwungenen Abständen überlappen sich Zeilen oder Text wird abgeschnitten; das verstößt gegen WCAG 1.4.12.

INLINE_SPACING_SHORT_TEXT

  1. Untersuchen Sie das im Bericht genannte Element und notieren Sie, welche Abstandseigenschaft sein style-Attribut mit !important erzwingt.
  2. Verkleinern Sie das Fenster auf 320 CSS-Pixel Breite (oder zoomen Sie auf 400 %) und prüfen Sie, ob der kurze Text in zwei Zeilen umbricht.
  3. Wenden Sie die Textabstände aus WCAG 1.4.12 (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, Absatzabstand 2em) mit !important an, zum Beispiel über ein Benutzer-Stylesheet oder ein Bookmarklet; da der eigene !important-Inline-Stil des Elements Vorrang hat, notieren Sie auch die Werte, die es behält.
  4. Prüfen Sie, ob der Text abgeschnitten wird, sich überlappt oder verborgen ist.

Bestanden. Der Text bleibt bei jeder Breite in einer Zeile oder bricht um, ohne dass sich Zeilen überlappen oder Text verloren geht.

Nicht bestanden. Der Text bricht um, und die erzwungenen Abstände lassen Zeilen überlappen oder Text abschneiden; das verstößt gegen WCAG 1.4.12.

Quellcode ansehen