diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml index 809491bfc72..d08b61884f6 100644 --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -260,6 +260,8 @@ - 2px - 3px - 4px +- 10px +- 15px - 16px - 20px - 24px diff --git a/_rules/letter-spacing-not-important-24afc2.md b/_rules/important-letter-spacing-wide-enough-24afc2.md similarity index 62% rename from _rules/letter-spacing-not-important-24afc2.md rename to _rules/important-letter-spacing-wide-enough-24afc2.md index 3f97ec84fc2..e5171598448 100755 --- a/_rules/letter-spacing-not-important-24afc2.md +++ b/_rules/important-letter-spacing-wide-enough-24afc2.md @@ -1,6 +1,6 @@ --- id: 24afc2 -name: Letter spacing in style attributes is not !important +name: Important letter spacing in style attributes is wide enough 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. @@ -16,6 +16,7 @@ input_aspects: acknowledgments: authors: - Jean-Yves Moyen + previous_authors: - Jey Nandakumar funding: - WAI-Tools @@ -23,33 +24,36 @@ acknowledgments: ## Applicability -This rule applies to any [HTML element][] that is [visible][] and for which the `style` attribute [declares][declared] the [letter-spacing][] CSS property. +This rule applies to any [HTML element][] with one or more [visible][] [text node][] children, when all the following are true for the `letter-spacing` property of the element: -## Expectation +- the [specified][] value is [declared][] in a `style` attribute; and +- the [computed][] value is [important][]. -For each test target, at least one of the following is true: +## Expectation -- **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. +For each test target, the [computed][] value of its `letter-spacing` property is at least 0.12 times the [computed][] value of its `font-size` property. ## 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. +- 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. + +- 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 letter spacing would also change throughout the element. This is untested by the current rule. - 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]. +- The target text node expresses something in a human language written in a script that uses the `letter-spacing` property. + ## 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 required 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][]. +Styles [declared][] in a `style` attribute have higher [cascade specificity][] than any selector; therefore, they "win" 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 required threshold. [Important][] styles that are declared with the [user][user origin] or [user agent][user agent 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. +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 some properties, and that `!important` is wider known than this distinction, this rule rather uses "[important][]"/"not [important][]" to avoid confusion. ### Bibliography @@ -57,23 +61,17 @@ CSS specifications define each declaration as being either [important][] (if it - [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) +### About test cases + +Test cases descriptions abusively refer to the CSS properties of text nodes, meaning the one of their parent. + ## 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**. +This `p` element has a [computed][] `letter-spacing` of 0.15 time the `font-size`. ```html

@@ -81,9 +79,9 @@ This `p` element has a [computed][] `letter-spacing` of 0.15 time the font size,

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

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

-``` - -#### Passed Example 7 +#### Passed Example 5 -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][]**. +This `p` element has a [computed][] `letter-spacing` of `2px`, 0.2 times its [computed][] `font-size` of `10px`; the `div` element has no [visible][] text node children. ```html -

- +

+

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

+

+
``` -#### Passed Example 8 +#### Passed Example 6 -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][]**. +This `p` element has a [computed][] `letter-spacing` of 0.2 times its `font-size`; the `div` element has no [visible][] text node children. ```html -

- +

+

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

+

+
``` ### Failed @@ -219,7 +201,15 @@ There is no HTML element. #### Inapplicable Example 2 -This `p` element is not [visible][] because of `display: none`. +There is no text node. + +```html +
+``` + +#### Inapplicable Example 3 + +There is no [visible][] text node because of `display: none`. ```html

@@ -227,9 +217,9 @@ This `p` element is not [visible][] because of `display: none`.

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

@@ -237,9 +227,9 @@ This `p` element is not [visible][] because it is positioned off-screen.

``` -#### Inapplicable Example 4 +#### Inapplicable Example 5 -The `style` attribute of this `p` element does not [declare][declared] the `letter-spacing` property. +This `p` element's `letter-spacing` property is not [declared][] in a `style` attribute. ```html

@@ -247,20 +237,70 @@ The `style` attribute of this `p` element does not [declare][declared] the `lett

``` +#### Inapplicable Example 6 + +The [specified][] 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][]). + +```html + + +

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

+``` + +#### Inapplicable Example 7 + +This `p` element does not have an [important][] [computed][] `letter-spacing`. + +```html +

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

+``` + +#### Inapplicable Example 8 + +The [computed][] value of the `letter-spacing` property of this `span` element is the [inherited][] value, that is the [computed][] value of the `p` element and therefore not [important][]; the `p` element has no [visible][] text node children. + +```html +

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

+``` + +#### Inapplicable Example 9 + +The [computed][] value of the `letter-spacing` property of this `span` element is the [inherited][] value, that is the [computed][] value of the `p` element and therefore not [important][]; the `p` element has no [visible][] text node children. + +```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' +[cascade specificity]: https://www.w3.org/TR/css-cascade-3/#cascade-specificity 'CSS Cascading and Inheritance Level 4 (Candidate Recommendation) - Cascade specificity' [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' +[html element]: #namespaced-element [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' +[specified]: https://www.w3.org/TR/css-cascade-4/#specified 'CSS Cascading and Inheritance Level 4 (Working draft) - Specified Values' [specificity]: https://www.w3.org/TR/selectors/#specificity 'CSS Selectors Level 4 (Working draft) - Specificity' +[text node]: https://dom.spec.whatwg.org/#text [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' -[html element]: #namespaced-element diff --git a/_rules/important-line-height-wide-enough-78fd32.md b/_rules/important-line-height-wide-enough-78fd32.md new file mode 100755 index 00000000000..b8717e0997b --- /dev/null +++ b/_rules/important-line-height-wide-enough-78fd32.md @@ -0,0 +1,371 @@ +--- +id: 78fd32 +name: Important line height in style attributes is wide enough +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 + previous_authors: + - Jey Nandakumar + funding: + - WAI-Tools +--- + +## Applicability + +This rule applies to any [HTML element][] with one or more [visible][] [text node][] children, when the text inside the elements includes a [soft wrap break][] and all the following are true for the `line-height` property of the element: + +- the [specified][] value is [declared][] in a `style` attribute; and +- the [computed][] value is [important][]. + +## Expectation + +For each test target, the [used][] value of its `line-height` property is at least 1.5 times the [computed][] value of its `font-size` property. + +## 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. + +- 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][sc1412]. 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][sc1412] due to other styling choices. + +- The text in the element express something in a human language written in a script that uses the `line-height` property. + +## 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 + +Styles [declared][] in a `style` attribute have higher [cascade specificity][] than any selector; therefore, they "win" 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 required threshold. [Important][] styles that are declared with the [user][user origin] or [user agent][user agent 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 some properties, and that `!important` is wider known than 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](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) + +### About test cases + +Test cases descriptions abusively refer to the CSS properties of text nodes, meaning the one of their parent. + +## Test Cases + +### Passed + +#### Passed Example 1 + +This `p` element has a [used][] `line-height` of twice the font size. + +```html +

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

+``` + +#### Passed Example 2 + +This `p` element has a [used][] `line-height` of `30px`, which is exactly 1.5 times the `font-size` of `20px`. + +```html + + +

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

+``` + +#### Passed Example 3 + +This `p` element has a [used][] `line-height` of `25.6px` (160% of `16px`) which is 1.6 times the `font-size`. + +```html + + +

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

+``` + +#### Passed Example 4 + +This `p` element has a [used][] `line-height` of `1.6` times the `font-size`. + +```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 `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 6 + +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 7 + +This `p` element has a [computed][] `line-height` of `15px`, 1.5 times its [computed][] `font-size` of `10px`; the `div` element has no [visible][] text node children. + +```html +
+

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

+
+``` + +#### Passed Example 8 + +This `p` element has a [computed][] `line-height` of 1.5 times its `font-size`; the `div` element has no [visible][] text node children. + +```html +
+

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

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

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

+``` + +#### Failed Example 2 + +This `p` element node has a [used][] `line-height` of `20px`, which is below the required 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 [used][] `line-height` of `19.2px` (120% of `16px`) which is below the required minimum. + +```html + + +

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

+``` + +#### Failed Example 4 + +This `p` element has a [used][] `line-height` of `1.2` which is below the required 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 required minimum ([used][] value for `normal` 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 required minimum ([used][] value for `normal` 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 + +There is no text node. + +```html +
+``` + +#### Inapplicable Example 3 + +There is no [visible][] text node because of `display: none`. + +```html +

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

+``` + +#### Inapplicable Example 4 + +There is no [visible][] text node because it is positioned off-screen. + +```html +

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

+``` + +#### Inapplicable Example 5 + +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][]; the `div` element has no [visible][] text node children. + +```html +
+

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

+
+``` + +#### Inapplicable Example 6 + +This `p` element's `line-height` property is not [declared][] in a `style` attribute. + +```html +

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

+``` + +#### Inapplicable Example 7 + +The [specified][] 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][]). + +```html + + +

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

+``` + +#### Inapplicable Example 8 + +This `p` element does not have an [important][] [computed][] `line-height`. + +```html +

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

+``` + +#### Inapplicable Example 9 + +The [computed][] value of the `line-height` property of this `span` element is the [inherited][] value, that is the [computed][] value of the `p` element and therefore not [important][]; the `p` element has no [visible][] text node children. + +```html +

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

+``` + +#### Inapplicable Example 10 + +The [computed][] value of the `line-height` property of this `span` element is the [inherited][] value, that is the [computed][] value of the `p` element and therefore not [important][]; the `p` element has no [visible][] text node children. + +```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' +[cascade specificity]: https://www.w3.org/TR/css-cascade-3/#cascade-specificity 'CSS Cascading and Inheritance Level 4 (Candidate Recommendation) - Cascade specificity' +[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' +[html element]: #namespaced-element +[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' +[soft wrap break]: https://www.w3.org/TR/css-text-3/#soft-wrap-break +[specificity]: https://www.w3.org/TR/selectors/#specificity 'CSS Selectors Level 4 (Working draft) - Specificity' +[specified]: https://www.w3.org/TR/css-cascade-4/#specified 'CSS Cascading and Inheritance Level 4 (Working draft) - Specified Values' +[text node]: https://dom.spec.whatwg.org/#text +[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/important-word-spacing-wide-enough-9e45ec.md b/_rules/important-word-spacing-wide-enough-9e45ec.md new file mode 100755 index 00000000000..4e3c031fda7 --- /dev/null +++ b/_rules/important-word-spacing-wide-enough-9e45ec.md @@ -0,0 +1,307 @@ +--- +id: 9e45ec +name: Important word spacing in style attributes is wide enough +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 + previous_authors: + - Jey Nandakumar + funding: + - WAI-Tools +--- + +## Applicability + +This rule applies to any [HTML element][] with one or more [visible][] [text node][] children, when all the following are true for the `word-spacing` property of the element: + +- the [specified][] value is [declared][] in a `style` attribute; and +- the [computed][] value is [important][]. + +## Expectation + +For each test target, the [computed][] value of its `word-spacing` property is at least 0.16 times the [computed][] value of its `font-size` property. + +## 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. + +- 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 word spacing would also change throughout the element. This is untested by the current rule. + +- 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]. + +- At least one text node child of the element express something in a human language written in a script that uses the `word-spacing` property. + +## 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 + +Styles [declared][] in a `style` attribute have higher [cascade specificity][] than any selector; therefore, they "win" 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 required threshold. [Important][] styles that are declared with the [user][user origin] or [user agent][user agent 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 some properties, and that `!important` is wider known than this distinction, this rule rather uses "[important][]"/"not [important][]" to avoid confusion. + +### Bibliography + +- [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) + +### About test cases + +Test cases descriptions abusively refer to the CSS properties of text nodes, meaning the one of their parent. + +## Test Cases + +### Passed + +#### Passed Example 1 + +This `p` element has a [computed][] `word-spacing` of 0.2 times the font size. + +```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 `4px`, which is exactly 0.16 times the [computed][] `font-size`. + +```html + + +

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

+``` + +#### Passed Example 3 + +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 4 + +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 5 + +This `p` element has a [computed][] `word-spacing` of `2px`, 0.2 times its [computed][] `font-size` of `10px`; the `div` element has no [visible][] text node children. + +```html +
+

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

+
+``` + +#### Passed Example 6 + +This `p` element has a [computed][] `word-spacing` of 0.2 times its `font-size`; the `div` element has no [visible][] text node children. + +```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 required 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 required 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 + +There is no text node. + +```html +
+``` + +#### Inapplicable Example 3 + +There is no [visible][] text node because of `display: none`. + +```html +

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

+``` + +#### Inapplicable Example 4 + +There is no [visible][] text node because it is positioned off-screen. + +```html +

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

+``` + +#### Inapplicable Example 5 + +This `p` element's `word-spacing` property is not [declared][] in a `style` attribute. + +```html +

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

+``` + +#### Inapplicable Example 6 + +The [specified][] 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][]). + +```html + + +

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

+``` + +#### Inapplicable Example 7 + +This `p` element does not have an [important][] [computed][] `word-spacing`. + +```html +

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

+``` + +#### Inapplicable Example 8 + +The [computed][] value of the `word-spacing` property of this `span` element is the [inherited][] value, that is the [computed][] value of the `p` element and therefore not [important][]; the `p` element has no [visible][] text node children. + +```html +

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

+``` + +#### Inapplicable Example 9 + +The [computed][] value of the `word-spacing` property of this `span` element is the [inherited][] value, that is the [computed][] value of the `p` element and therefore not [important][]; the `p` element has no [visible][] text node children. + +```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' +[cascade specificity]: https://www.w3.org/TR/css-cascade-3/#cascade-specificity 'CSS Cascading and Inheritance Level 4 (Candidate Recommendation) - Cascade specificity' +[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' +[html element]: #namespaced-element +[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' +[specified]: https://www.w3.org/TR/css-cascade-4/#specified 'CSS Cascading and Inheritance Level 4 (Working draft) - Specified Values' +[text node]: https://dom.spec.whatwg.org/#text +[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' +[html element]: #namespaced-element diff --git a/_rules/line-height-not-important-78fd32.md b/_rules/line-height-not-important-78fd32.md index f81da983821..324b28ee488 100755 --- a/_rules/line-height-not-important-78fd32.md +++ b/_rules/line-height-not-important-78fd32.md @@ -1,6 +1,6 @@ --- id: 78fd32 -name: Line height in style attributes is not !important +name: DEPRECATED - 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. @@ -19,6 +19,8 @@ acknowledgments: - Jey Nandakumar funding: - WAI-Tools +deprecated: | + This rule has been deprecated and superseded by Rule [Important letter spacing in style attributes is wide enough](https://act-rules.github.io/rules/fsy8c7). This rule is not maintained anymore and should not be used. --- ## Applicability diff --git a/_rules/word-spacing-not-important-9e45ec.md b/_rules/word-spacing-not-important-9e45ec.md index 313f3248e24..812b4c3a137 100755 --- a/_rules/word-spacing-not-important-9e45ec.md +++ b/_rules/word-spacing-not-important-9e45ec.md @@ -1,6 +1,6 @@ --- id: 9e45ec -name: Word spacing in style attributes is not !important +name: DEPRECATED - 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. @@ -19,6 +19,9 @@ acknowledgments: - Jey Nandakumar funding: - WAI-Tools +deprecated: | + This rule has been deprecated and superseded by Rule [Important word spacing in style attributes is wide enough](https://act-rules.github.io/rules/nt4zgr). This rule is not maintained anymore and should not be used. + --- ## Applicability