Proposed Test Rule: Letter spacing in style attributes is not !important

Description

This rule checks that the style attribute is not used to prevent adjusting letter-spacing by using !important, except if it’s at least 0.12 times the font size.

Applicability

This rule applies to any HTML element that is [visible][] and for which the style attribute declares the [letter-spacing][] CSS property.

Expectation

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

not important: the computed value of its [letter-spacing][] property is not [important][]; or
wide enough: the computed value of its [letter-spacing][] property is at least 0.12 times the computed value of its [font-size][] property; or
cascade: the cascaded value of its [letter-spacing][] property is not a value declared in its style attribute.

Assumptions

There is no mechanism available on the page to adjust [letter-spacing][]. If there is such a mechanism, it is possible to fail this rule while [Success Criterion 1.4.12 Text Spacing][sc1412] is still satisfied.
This rule assumes that WCAG’s meaning for the “Letter spacing style property” is the value of the CSS letter-spacing property rather than the actual space between letters. The value of the CSS property is added to whichever spacing already exist (for example, due to kerning). Thus, the actual space between letters can be larger than the value of the letter-spacing property. If [Success Criterion 1.4.12 Text Spacing][sc1412] is concerned by the actual space between letters, then this rule may fail (with the letter-spacing property being too small) while the Success Criterion is still satisfied (with the actual space being enough).
This rule assumes that when inter-letters space is changed because of justification, the letter-spacing property is not changed. Therefore, whether a text is justified or not doesn’t change the result of this rule. Note that justifying text is a failure of [Success Criterion 1.4.8 Visual Presentation][sc148].

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. If accessibility support does not include assistive technologies that override [letter-spacing][] through author origin, this rule should not be used.

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][user origin] or [user agent][user agent origin] origin can win the cascade sort over styles with the author origin.

CSS specifications define each declaration as being either [important][] (if it has 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.

Test Cases

Passed

Passed Example 1

This p element has a not [important][] computed letter-spacing.

<p style="letter-spacing: 0.1em">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 2

This p element has a computed letter-spacing of 0.15 time the font size, which is wide enough.

<p style="letter-spacing: 0.15em !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 3

This p element has a computed [letter-spacing][] of 3px, which is wide enough (the threshold is 3px).

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

<p style="letter-spacing: 3px !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 4

This p element has two declared values for its letter-spacing property. The latest wins the cascade sort. It has a value of 0.15em, and is wide enough.

<p style="letter-spacing: 0.1em !important; letter-spacing: 0.15em !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 5

This p element has two declared values for its letter-spacing property. The one which is [important][] wins the cascade sort. It has a value of 0.15em, and is wide enough.

<p style="letter-spacing: 0.15em !important; letter-spacing: 0.1em">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 6

The cascaded value of the letter-spacing 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 {
		letter-spacing: 0.1em !important;
	}
</style>

<p style="letter-spacing: 0.15em">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 7

The computed value of the letter-spacing property of this p element is not [important][]. The computed value of the letter-spacing property of this span element is the [inherited][] value, that is the computed value of its parent and therefore also not [important][].

<p style="letter-spacing: 0.1em">
	<span style="letter-spacing: inherit !important;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

Passed Example 8

<p style="letter-spacing: 0.1em">
	<span style="letter-spacing: unset !important;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

Failed

Failed Example 1

This p element has a computed letter-spacing of only 0.1 times the font size, which is below the recommended minimum.

<p style="letter-spacing: 0.1em !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 2

This p element has a computed letter-spacing of 2px which is only 0.1 times the font size (20px), thus below the recommended minimum.

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

<p style="letter-spacing: 2px !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 3

This p element has a computed letter-spacing of 0.

<p style="letter-spacing: normal !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 4

This p element has a computed letter-spacing of 0.

<p style="letter-spacing: initial !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable

Inapplicable Example 1

There is no HTML element.

<svg xmlns="http://www.w3.org/2000/svg">
    <text y="20" style="letter-spacing: 0.1em">ACT rules</text>
</svg>

Inapplicable Example 2

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

<p style="display: none; letter-spacing: 0.1em !important;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable Example 3

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

<p style="position: absolute; top: -999em; letter-spacing: 0.1em !important;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable Example 4

The style attribute of this p element does not declare the letter-spacing property.

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

Glossary

Outcome

An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

Inapplicable: No part of the test subject matches the applicability
Passed: A test target meets all expectations
Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementations using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such “interim” results can be expressed with the incomplete outcome.

Visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

For more details, see examples of visible.

Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date.

Implementation	Consistency	Complete	Report
QualWeb	Consistent	Yes	View Report
SortSite	Consistent	Yes	View Report

Changelog

This is the first version of this ACT rule.

[font-size]: https://www.w3.org/TR/css-fonts-4/#propdef-font-size ‘CSS Fonts Module Level 4 (Working draft) - Font size [important]: https://www.w3.org/TR/css-cascade-4/#importance ‘CSS Cascading and Inheritance Level 4 (Working draft) - Importance’ [inherited]: https://www.w3.org/TR/css-cascade-4/#inheriting ‘CSS Cascading and Inheritance Level 4 (Working draft) - Inherited Values’ [letter-spacing]: https://www.w3.org/TR/css-text-3/#propdef-letter-spacing ‘CSS Text Module Level 3 - Tracking [normal]: https://www.w3.org/TR/css-cascade-4/#normal ‘CSS Cascading and Inheritance Level 4 (Working draft) - Normal declarations’ [sc1412]: https://www.w3.org/TR/WCAG21/#text-spacing ‘Success Criterion 1.4.12 Text Spacing’ [sc148]: https://www.w3.org/TR/WCAG21/#visual-presentation ‘Success Criterion 1.4.8 Visual Presentation’ [specificity]: https://www.w3.org/TR/selectors/#specificity ‘CSS Selectors Level 4 (Working draft) - Specificity’ [user agent origin]: https://www.w3.org/TR/css-cascade-4/#cascade-origin-ua ‘CSS Cascading and Inheritance Level 4 (Working draft) - Cascading Origins - User Agent Origin’ [user origin]: https://www.w3.org/TR/css-cascade-4/#cascade-origin-user ‘CSS Cascading and Inheritance Level 4 (Working draft) - Cascading Origins - User Origin’ [visible]: #visible ‘Definition of visible’