From 3c5ed050e3526139837d82d37b47a14b2a6c6e72 Mon Sep 17 00:00:00 2001 From: Jey Date: Mon, 4 Jan 2021 06:24:41 -0600 Subject: [PATCH] Rule: Text spacing via CSS is above minimum value or not set to `!important` (24afc2, 78fd32, 9e45ec) (#1412) * Add 3 atomic rules for text spacing Co-authored-by: Jean-Yves Moyen Co-authored-by: EmmaJP Co-authored-by: Carlos Duarte Co-authored-by: Wilco Fiers --- __tests__/spelling-ignore.yml | 17 +- _rules/letter-spacing-not-important-24afc2.md | 261 +++++++++++++++ _rules/line-height-not-important-78fd32.md | 312 ++++++++++++++++++ _rules/word-spacing-not-important-9e45ec.md | 261 +++++++++++++++ 4 files changed, 850 insertions(+), 1 deletion(-) mode change 100644 => 100755 __tests__/spelling-ignore.yml create mode 100755 _rules/letter-spacing-not-important-24afc2.md create mode 100755 _rules/line-height-not-important-78fd32.md create mode 100755 _rules/word-spacing-not-important-9e45ec.md diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml old mode 100644 new mode 100755 index 695ba748e23..3836e73099a --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -79,6 +79,7 @@ - getModifierState - accesskey - Accesskeys +- kerning # spell checker checks against strict casing & hence some repeated words here - Autocomplete @@ -214,7 +215,7 @@ - 000C - 000D -# JSON attributes/ metadata +# JSON attributes/ metadata/ methods - testcases - ruleId - ruleName @@ -223,6 +224,20 @@ - cantTell - TestSubject - earl:cantTell +- getComputedPriority + +# sizes +- 1em +- 2em +- 2px +- 3px +- 4px +- 16px +- 20px +- 24px +- 25px +- 30px +- 32px # Language codes - da diff --git a/_rules/letter-spacing-not-important-24afc2.md b/_rules/letter-spacing-not-important-24afc2.md new file mode 100755 index 00000000000..a32bf478fe5 --- /dev/null +++ b/_rules/letter-spacing-not-important-24afc2.md @@ -0,0 +1,261 @@ +--- +id: 24afc2 +name: Letter spacing in `style` attributes is not `!important` +rule_type: atomic +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. +accessibility_requirements: + wcag21:1.4.12: # Text Spacing (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen + - Jey Nandakumar +--- + +## Applicability + +This rule applies to any HTML element that is [visible][] and for which the `style` attribute [declares][declared] the [letter-spacing][] CSS property. + +## Expectation + +For each test target, 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 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. + +- [Understanding Success Criterion 1.4.12: Text Spacing](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) +- [CSS Text Module Level 3 - Spacing](https://www.w3.org/TR/css-text-3/#spacing) +- [CSS Visual formatting model details](https://drafts.csswg.org/css2/visudet.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This `p` element has a **not [important][]** [computed][] `letter-spacing`. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 2 + +This `p` element has a [computed][] `letter-spacing` of 0.15 time the font size, which is **wide enough**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 3 + +This `p` element has a [computed][] [letter-spacing][] of `3px`, which is **wide enough** (the threshold is `3px`). + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### 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**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### 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**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### 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. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### 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][]**. + +```html +

+ + The toy brought back fond memories of being lost in the rain forest. + +

+``` + +#### Passed Example 8 + +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][]**. + +```html +

+ + The toy brought back fond memories of being lost in the rain forest. + +

+``` + +### 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. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### 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. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 3 + +This `p` element has a [computed][] `letter-spacing` of 0. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 4 + +This `p` element has a [computed][] `letter-spacing` of 0. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +### Inapplicable + +#### Inapplicable Example 1 + +There is no HTML element. + +```svg + + ACT rules + +``` + +#### Inapplicable Example 2 + +This `p` element is not [visible][] because of `display: none`. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Inapplicable Example 3 + +This `p` element is not [visible][] because it is positioned off-screen. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Inapplicable Example 4 + +The `style` attribute of this `p` element does not [declare][declared] the `letter-spacing` property. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +[author origin]: https://www.w3.org/TR/css-cascade-4/#cascade-origin-author 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascading Origins - Author Origin' +[cascade sort]: https://www.w3.org/TR/css-cascade-4/#cascade-sort 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascade Sort' +[cascaded]: https://www.w3.org/TR/css-cascade-4/#cascaded 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascaded Values' +[computed]: https://www.w3.org/TR/css-cascade-4/#computed 'CSS Cascading and Inheritance Level 4 (Working draft) - Computed Values' +[declared]: https://www.w3.org/TR/css-cascade-4/#declared 'CSS Cascading and Inheritance Level 4 (Working draft) - Declared Values' +[font-size]: https://www.w3.org/TR/css-fonts-4/#propdef-font-size 'CSS Fonts Module Level 4 (Working draft) - Font size: the font-size property' +[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: the letter-spacing property' +[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 origin]: https://www.w3.org/TR/css-cascade-4/#cascade-origin-user 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascading Origins - User Origin' +[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' +[visible]: #visible 'Definition of visible' diff --git a/_rules/line-height-not-important-78fd32.md b/_rules/line-height-not-important-78fd32.md new file mode 100755 index 00000000000..3cf7f493196 --- /dev/null +++ b/_rules/line-height-not-important-78fd32.md @@ -0,0 +1,312 @@ +--- +id: 78fd32 +name: Line height in `style` attributes is not `!important` +rule_type: atomic +description: | + 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. +accessibility_requirements: + wcag21:1.4.12: # Text Spacing (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen + - Jey Nandakumar +--- + +## Applicability + +This rule applies to any HTML element that is [visible][] and for which the `style` attribute [declares][declared] the [line-height][] CSS property. + +## Expectation + +For each test target, one of the following is true: + +- **not important**: the [computed][] value of its [line-height][] property is not [important][]; or +- **large enough**: the [computed][] value of its [line-height][] property is not `normal`, and is at least `1.5` or 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][sc1412] is still satisfied. + +- This rule assumes that when the [computed][] value of the [line-height][] property is `normal`, user agents chose a [used][] value below 1.5. [CSS recommendation][line-height normal] is to have a [used][] value between 1.0 and 1.2, thus too small to satisfy [Success Criterion 1.4.12 Text Spacing][sc1412]. + +## 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 [line-height][] 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 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. + +- [Understanding Success Criterion 1.4.12: Text Spacing](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) +- [CSS Text Module Level 3 - Spacing](https://www.w3.org/TR/css-text-3/#spacing) +- [CSS Visual formatting model details](https://drafts.csswg.org/css2/visudet.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This `p` element has a **not [important][]** [computed][] `line-height`. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 2 + +This `p` element has a [computed][] `line-height` of twice the font size, which is **large enough**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 3 + +This `p` element has a [computed][] `line-height` of `30px`, which is **large enough** (the threshold is `30px`). + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 4 + +This `p` element has a [computed][] `line-height` of `25.6px` (160% of `16px`) which is **large enough**. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 5 + +This `p` element has a [computed][] `line-height` of `1.6` which is **large enough**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 6 + +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**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 7 + +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**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 8 + +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. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 9 + +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][]**. + +```html +

+ + The toy brought back fond memories of being lost in the rain forest. + +

+``` + +#### Passed Example 10 + +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][]**. + +```html +

+ + The toy brought back fond memories of being lost in the rain forest. + +

+``` + +### Failed + +#### Failed Example 1 + +This `p` element has a [computed][] `line-height` equal to the font size, which is below the recommended minimum. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 2 + +This `p` element has a [computed][] `line-height` of `20px`, which is below the recommended minimum given the specified font size is 20 pixels. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 3 + +This `p` element has a [computed][] `line-height` of `19.2px` (120% of `16px`) which is below the recommended minimum. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 4 + +This `p` element has a [computed][] `line-height` of `1.2` which is below the recommended minimum. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 5 + +This `p` element has a [computed][] `line-height` of `normal` which is below the recommended minimum ([used][] value is generally around 1.2). + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 6 + +This `p` element has a [computed][] `line-height` of `normal` which is below the recommended minimum ([used][] value is generally around 1.2). + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +### Inapplicable + +#### Inapplicable Example 1 + +There is no HTML element. + +```svg + + ACT rules + +``` + +#### Inapplicable Example 2 + +This `p` element is not [visible][] because of `display: none`. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Inapplicable Example 3 + +This `p` element is not [visible][] because it is positioned off-screen. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Inapplicable Example 4 + +The `style` attribute of this `p` element does not [declare][declared] the `line-height` property. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +[author origin]: https://www.w3.org/TR/css-cascade-4/#cascade-origin-author 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascading Origins - Author Origin' +[cascade sort]: https://www.w3.org/TR/css-cascade-4/#cascade-sort 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascade Sort' +[cascaded]: https://www.w3.org/TR/css-cascade-4/#cascaded 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascaded Values' +[computed]: https://www.w3.org/TR/css-cascade-4/#computed 'CSS Cascading and Inheritance Level 4 (Working draft) - Computed Values' +[declared]: https://www.w3.org/TR/css-cascade-4/#declared 'CSS Cascading and Inheritance Level 4 (Working draft) - Declared Values' +[font-size]: https://www.w3.org/TR/css-fonts-4/#propdef-font-size 'CSS Fonts Module Level 4 (Working draft) - Font size: the font-size property' +[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' +[line-height]: https://drafts.csswg.org/css2/visudet.html#propdef-line-height 'CSS Visual formatting model details - line-height property' +[line-height normal]: https://drafts.csswg.org/css2/#valdef-line-height-normal "CSS 2.2 (Editor's draft) - normal line-height" +[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' +[specificity]: https://www.w3.org/TR/selectors/#specificity 'CSS Selectors Level 4 (Working draft) - Specificity' +[used]: https://www.w3.org/TR/css-cascade-4/#used 'CSS Cascading and Inheritance Level 4 (Working draft) - Used Values' +[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' +[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' +[visible]: #visible 'Definition of visible' diff --git a/_rules/word-spacing-not-important-9e45ec.md b/_rules/word-spacing-not-important-9e45ec.md new file mode 100755 index 00000000000..96542a3b8f3 --- /dev/null +++ b/_rules/word-spacing-not-important-9e45ec.md @@ -0,0 +1,261 @@ +--- +id: 9e45ec +name: Word spacing in `style` attributes is not `!important` +rule_type: atomic +description: | + This rule checks that the `style` attribute is not used to prevent adjusting `word-spacing` by using `!important`, except if it's at least `0.16` times the font size. +accessibility_requirements: + wcag21:1.4.12: # Text Spacing (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen + - Jey Nandakumar +--- + +## Applicability + +This rule applies to any HTML element that is [visible][] and for which the `style` attribute [declares][declared] the [word-spacing][] CSS property. + +## Expectation + +For each test target, one of the following is true: + +- **not important**: the [computed][] value of its [word-spacing][] property is not [important][]; or +- **wide enough**: the [computed][] value of its [word-spacing][] property is at least 0.16 times the [computed][] value of its [font-size][] property; or +- **cascade**: the [cascaded][] value of its [word-spacing][] property is not a value [declared][] in its `style` attribute. + +## Assumptions + +- There is no mechanism available on the page to adjust [word-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 "Word spacing style property" is the value of the CSS `word-spacing` property rather than the actual space between words. The value of the CSS property is _added_ to whichever spacing already exist (for example, the size of the space character). Thus, the actual space between words is larger than the value of the `word-spacing` property. If [Success Criterion 1.4.12 Text Spacing][sc1412] is concerned by the actual space between words, then this rule may fail (with the `word-spacing` property being too small) while the Success Criterion is still satisfied (with the actual space being enough). + +- This rule assumes that when inter-words space is changed because of justification, the `word-spacing` property is not changed (the change occurs on the width of the space character between the words). 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 [word-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 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. + +- [Understanding Success Criterion 1.4.12: Text Spacing](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) +- [CSS Text Module Level 3 - Spacing](https://www.w3.org/TR/css-text-3/#spacing) +- [CSS Visual formatting model details](https://drafts.csswg.org/css2/visudet.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This `p` element has a **not [important][]** [computed][] `word-spacing`. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 2 + +This `p` element has a [computed][] `word-spacing` of 0.2 times the font size, which is **wide enough**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 3 + +This `p` element has a [computed][] `word-spacing` of `4px`, which is **wide enough** (the threshold is `4px`). + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 4 + +This `p` element has two [declared][] values for its `word-spacing` property. The latest wins the [cascade sort][]. It has a value of `0.2em`, which is **wide enough**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 5 + +This `p` element has two [declared][] values for its `word-spacing` property. The one which is [important][] wins the [cascade sort][]. It has a value of `0.2em`, which is **wide enough**. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 6 + +The [cascaded][] value of the `word-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. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Passed Example 7 + +The [computed][] value of the `word-spacing` property of this `p` element is **not [important][]**. The [computed][] value of the `word-spacing` property of this `span` element is the [inherited][] value, that is the [computed][] value of its parent and therefore also **not [important][]**. + +```html +

+ + The toy brought back fond memories of being lost in the rain forest. + +

+``` + +#### Passed Example 8 + +The [computed][] value of the `word-spacing` property of this `p` element is **not [important][]**. The [computed][] value of the `word-spacing` property of this `span` element is the [inherited][] value, that is the [computed][] value of its parent and therefore also **not [important][]**. + +```html +

+ + The toy brought back fond memories of being lost in the rain forest. + +

+``` + +### Failed + +#### Failed Example 1 + +This `p` element has a [computed][] `word-spacing` of only 0.1 times the font size, which is below the recommended minimum. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 2 + +This `p` element has a [computed][] `word-spacing` of `2px` which is only 0.1 times the font size (`20px`), thus below the recommended minimum. + +```html + + +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 3 + +This `p` element has a [computed][] `word-spacing` of 0. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Failed Example 4 + +This `p` element has a [computed][] `word-spacing` of 0. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +### Inapplicable + +#### Inapplicable Example 1 + +There is no HTML element. + +```svg + + ACT rules + +``` + +#### Inapplicable Example 2 + +This `p` element is not [visible][] because of `display: none`. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Inapplicable Example 3 + +This `p` element is not [visible][] because it is positioned off-screen. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +#### Inapplicable Example 4 + +The `style` attribute of this `p` element does not [declare][declared] the `word-spacing` property. + +```html +

+ The toy brought back fond memories of being lost in the rain forest. +

+``` + +[author origin]: https://www.w3.org/TR/css-cascade-4/#cascade-origin-author 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascading Origins - Author Origin' +[cascade sort]: https://www.w3.org/TR/css-cascade-4/#cascade-sort 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascade Sort' +[cascaded]: https://www.w3.org/TR/css-cascade-4/#cascaded 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascaded Values' +[computed]: https://www.w3.org/TR/css-cascade-4/#computed 'CSS Cascading and Inheritance Level 4 (Working draft) - Computed Values' +[declared]: https://www.w3.org/TR/css-cascade-4/#declared 'CSS Cascading and Inheritance Level 4 (Working draft) - Declared Values' +[font-size]: https://www.w3.org/TR/css-fonts-4/#propdef-font-size 'CSS Fonts Module Level 4 (Working draft) - Font size: the font-size property' +[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' +[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 origin]: https://www.w3.org/TR/css-cascade-4/#cascade-origin-user 'CSS Cascading and Inheritance Level 4 (Working draft) - Cascading Origins - User Origin' +[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' +[visible]: #visible 'Definition of visible' +[word-spacing]: https://www.w3.org/TR/css-text-3/#word-spacing-property 'CSS Text Module Level 3 - Word Spacing: the word-spacing property'