English
Site menu

avoid-inline-spacing

Inline style must not keep users from increasing text spacing

automaticWCAG 1.4.12 (AA)confidence: highseverity: moderateperceivable

Checks that where inline style forces line-height, letter-spacing or word-spacing with !important, the value already reaches the spacing users must be able to apply (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em), so the user has nothing left to override.

Applies to. Applies to a rendered element with visible text of its own whose style attribute declares line-height, letter-spacing or word-spacing as !important with a real value. A CSS-wide keyword (inherit, initial, unset, revert) specifies no spacing of its own and is out of scope.

Expectation. Each such declaration already meets WCAG 1.4.12's own metric for that property, as a multiple of the font size: line-height at least 1.5, letter-spacing at least 0.12, word-spacing at least 0.16. A forced value that already satisfies the criterion leaves the user nothing to override.

What a finding reports.

  • properties: the spacing properties the finding is about. Each item is line-height, letter-spacing or word-spacing. On a FAIL, or on text that may never wrap, they are the ones forced below the metric; on INLINE_SPACING_NOT_RESOLVABLE, the ones whose value could not be worked out.

These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.

Examples

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

The forced letter-spacing is above the WCAG 1.4.12 minimum metric.

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

!important forces line-height below the 1.5 minimum, and the page's own styles can't override it.

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

The text is short enough to fit on one line, so it may never wrap, and the criterion applies only to text that wraps.

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

INLINE_SPACING_NOT_RESOLVABLE

  1. Inspect the element the report names and read the !important spacing value in its style attribute.
  2. In the Computed tab of the developer tools, read the resulting line-height, letter-spacing or word-spacing in pixels and compare with 1.5 times, 0.12 times or 0.16 times the font size.
  3. Apply the text spacing (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, paragraph spacing 2em) with !important, for example through a user stylesheet or a bookmarklet; since the element's own !important inline style wins, also note the values it keeps.
  4. Narrow to 320 CSS pixels and check whether the text is cut off or overlaps.

Pass. The forced value reaches the spacing users must be able to apply, or the text does not wrap, or nothing is lost with the spacing applied.

Fail. The forced value is below the metric on wrapping text and the text cannot take user spacing without loss, which fails WCAG 1.4.12.

INLINE_SPACING_NO_SOFT_WRAP

  1. Inspect the element the report names and note which spacing property its style attribute forces with !important.
  2. Narrow the window to 320 CSS pixels wide (or zoom to 400%) and check whether the text ever wraps onto a second line.
  3. Apply the text spacing (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, paragraph spacing 2em) with !important, for example through a user stylesheet or a bookmarklet; since the element's own !important inline style wins, also note the values it keeps.
  4. Check whether any text is cut off, overlaps or is hidden.

Pass. The text cannot wrap (it stays on one line or scrolls) and nothing is cut off or overlaps, so the criterion does not apply.

Fail. The text does wrap and, with the forced spacing, lines overlap or text is clipped, which fails WCAG 1.4.12.

INLINE_SPACING_SHORT_TEXT

  1. Inspect the element the report names and note which spacing property its style attribute forces with !important.
  2. Narrow the window to 320 CSS pixels wide (or zoom to 400%) and check whether the short text wraps onto two lines.
  3. Apply the text spacing (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, paragraph spacing 2em) with !important, for example through a user stylesheet or a bookmarklet; since the element's own !important inline style wins, also note the values it keeps.
  4. Check whether the text is cut off, overlaps or is hidden.

Pass. The text stays on one line at every width, or wraps without lines overlapping or text being lost.

Fail. The text wraps and the forced spacing makes lines overlap or text clip, which fails WCAG 1.4.12.

View source