Line height in style attributes is not !important

This rule checks that the style attribute is not used to prevent adjusting line-height by using !important, except if it's at least 1.5 times the font size.

Applicability

This rule applies to any HTML element with visible text that includes a soft wrap break and for which the style attribute declares the line-height CSS property.

Expectation

For each test target, at least one of the following is true:

• not important: the computed value of its line-height property is not important; or
• large enough: the used value of its line-height property is at least 1.5 times the computed value of its font-size property; or
• cascade: the cascaded value of its line-height property is not a value declared in its style attribute.

Assumptions

• There is no mechanism available on the page to adjust line-height. If there is such a mechanism, it is possible to fail this rule while Success Criterion 1.4.12 Text Spacing is still satisfied.
• The font size is constant for all text in the element. If font-size changes (e.g., through use of the ::first-line pseudo-element) then the required line height would also change throughout the element. This is untested by the current rule.
• No other style attributes are used to increase or decrease the distance between lines of text. For example, style attributes such as position, padding, and margin could be used to increase the distance between lines of text to meet Success Criterion 1.4.12 Text Spacing. Oppositely, those style attributes could also be used to reduce the distance between lines of text. Thus, it is possible to pass this rule, but still fail Success Criterion 1.4.12 Text Spacing due to other styling choices.

Accessibility Support

While some assistive technologies are able to set user origin or user agent origin styles, others, such as browser extensions, are only able to set styles with the author origin. Such assistive technologies cannot create styles "winning" the cascade sort over a style attribute with an important declaration.

Background

When a style is declared in the style attribute with an important declaration, it "wins" the cascade sort over any other style from author origin, i.e. it cannot be overridden by any of these. On the other hand, if such a style is declared in a style sheet, it can still "lose" the cascade sort to declarations with higher specificity or simply coming from a later style sheet (such as ones injected by assistive technologies). This rule ensures that the element is not in the first case and that the style can be overridden by users, unless it is already at least the minimum recommended threshold. Important styles that are declared with the user or user agent origin can win the cascade sort over styles with the author origin.

CSS specifications define each declaration as being either important (if is as the !important annotation) or normal. Given that normal is also a keyword for this property, and that !important is wider known that this distinction, this rule rather uses "important"/"not important" to avoid confusion.

This rule evaluates the used value of the line-height property instead of its computed value because the used value is guaranteed to use absolute units (i.e., pixels). This streamlines comparison with the computed font-size which is also absolute. The computed line-height may be a unitless number that is harder to compare.

Bibliography

• Understanding Success Criterion 1.4.12: Text Spacing
• CSS Text Module Level 3 - Spacing
• CSS Visual formatting model details

Test Cases

Passed

This p element has a not important computed line-height.

<p style="line-height: 1.2em; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a used line-height of twice the font size, which is large enough.

<p style="line-height: 2em !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a used line-height of 30px, which is large enough (the threshold is 30px).

<style>
	p {
		font-size: 20px;
	}
</style>

<p style="line-height: 30px !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a used line-height of 25.6px (160% of 16px) which is large enough.

<style>
	p {
		font-size: 16px;
	}
</style>

<p style="line-height: 160% !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a used line-height of 1.6 which is large enough.

<p style="line-height: 1.6 !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has two declared values for its line-height property. The latest wins the cascade sort. It has a value of 2em, which is large enough.

<p style="line-height: 1em !important; line-height: 2em !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has two declared values for its line-height property. The one which is important wins the cascade sort. It has a value of 2em, which is large enough.

<p style="line-height: 2em !important; line-height: 1em; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

The cascaded value of the line-height property of this p element is declared in the style sheet, not in the style attribute (it wins the cascade sort because it is important). Thus, the p element matches the cascade condition.

<style>
	p {
		line-height: 1.2em !important;
	}
</style>

<p style="line-height: 2em; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

The computed value of the line-height property of this p element is not important. The computed value of the line-height property of this span element is the inherited value, that is the computed value of its parent and therefore also not important.

<p style="line-height: 1.2em">
	<span style="line-height: inherit !important; display: block; max-width: 200px;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

The computed value of the line-height property of this p element is not important. The computed value of the line-height property of this span element is the inherited value, that is the computed value of its parent and therefore also not important.

<p style="line-height: 1.2em">
	<span style="line-height: unset !important; display: block; max-width: 200px;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

Failed

This p element has a used line-height equal to the font size, which is below the required minimum.

<p style="line-height: 1em !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a used line-height of 20px, which is below the required minimum given the specified font size is 20 pixels.

<style>
	p {
		font-size: 20px;
	}
</style>

<p style="line-height: 20px !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a used line-height of 19.2px (120% of 16px) which is below the required minimum.

<style>
	p {
		font-size: 16px;
	}
</style>

<p style="line-height: 120% !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a used line-height of 1.2 which is below the required minimum.

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

This p element has a computed line-height of normal which is below the required minimum (used value is generally around 1.2).

<p style="line-height: normal !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element has a computed line-height of normal which is below the required minimum (used value is generally around 1.2).

<p style="line-height: initial !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable

There is no HTML element.

<svg xmlns="http://www.w3.org/2000/svg">
    <text y="20" style="line-height: 1.2em">ACT rules</text>
</svg>

This p element will never have a soft wrap break due to the use of an overflow container. In this case, even changing the view port size will not cause a soft wrap break.

<div style="overflow-x: scroll;">
	<p style="line-height: 1em !important; width: 1000px;">
		The toy brought back fond memories of being lost in the rain forest.
	</p>
</div>

This p element is not visible because of display: none.

<p style="display: none; line-height: 1em !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

This p element is not visible because it is positioned off-screen.

<p style="position: absolute; top: -999em; line-height: 1em !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

The style attribute of this p element does not declare the line-height property.

<p style="width: 60%; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>