You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Add new letter-spacing rule and deprecate old one
* Add new word-spacing rule and deprecate old one
* Clean up assumptions
* Clean up
* Clean up
* Add new line-height rule and deprecate old one
* Replace old letter spacing version rather than deprecating it
* Replace old line height version rather than deprecating it
* Replace old word spacing version rather than deprecating it
* Target text nodes
* Improve background note
* Apply suggestion from review
* Clean up
* Target text nodes rather than their parents
* Target text nodes rather than their parents
* Add missing reference
* Update example
* Apply to parent of text nodes, not text nodes
* Apply suggestions from code review
Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt>
* Typos
Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt>
* Typos
---------
Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt>
name: Letter spacing in style attributes is not !important
3
+
name: Important letter spacing in style attributes is wide enough
4
4
rule_type: atomic
5
5
description: |
6
6
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,74 +16,72 @@ input_aspects:
16
16
acknowledgments:
17
17
authors:
18
18
- Jean-Yves Moyen
19
+
previous_authors:
19
20
- Jey Nandakumar
20
21
funding:
21
22
- WAI-Tools
22
23
---
23
24
24
25
## Applicability
25
26
26
-
This rule applies to any [HTML element][]that is [visible][]and for which the `style` attribute [declares][declared]the [letter-spacing][] CSS property.
27
+
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:
27
28
28
-
## Expectation
29
+
- the [specified][] value is [declared][] in a `style` attribute; and
30
+
- the [computed][] value is [important][].
29
31
30
-
For each test target, at least one of the following is true:
32
+
## Expectation
31
33
32
-
-**not important**: the [computed][] value of its [letter-spacing][] property is not [important][]; or
33
-
-**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
34
-
-**cascade**: the [cascaded][] value of its [letter-spacing][] property is not a value [declared][] in its `style` attribute.
34
+
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.
35
35
36
36
## Assumptions
37
37
38
-
- 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.
38
+
- 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.
39
+
40
+
- 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.
39
41
40
42
- 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).
41
43
42
44
- 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].
43
45
46
+
- The target text node expresses something in a human language written in a script that uses the `letter-spacing` property.
47
+
44
48
## Accessibility Support
45
49
46
50
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.
47
51
48
52
## Background
49
53
50
-
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][].
54
+
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][].
51
55
52
-
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.
56
+
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.
53
57
54
58
### Bibliography
55
59
56
60
-[Understanding Success Criterion 1.4.12: Text Spacing](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html)
57
61
-[CSS Text Module Level 3 - Spacing](https://www.w3.org/TR/css-text-3/#spacing)
58
62
-[CSS Visual formatting model details](https://drafts.csswg.org/css2/visudet.html)
59
63
64
+
### About test cases
65
+
66
+
Test cases descriptions abusively refer to the CSS properties of text nodes, meaning the one of their parent.
67
+
60
68
## Test Cases
61
69
62
70
### Passed
63
71
64
72
#### Passed Example 1
65
73
66
-
This `p` element has a **not [important][]**[computed][]`letter-spacing`.
67
-
68
-
```html
69
-
<pstyle="letter-spacing: 0.1em">
70
-
The toy brought back fond memories of being lost in the rain forest.
71
-
</p>
72
-
```
73
-
74
-
#### Passed Example 2
75
-
76
-
This `p` element has a [computed][]`letter-spacing` of 0.15 time the font size, which is **wide enough**.
74
+
This `p` element has a [computed][]`letter-spacing` of 0.15 time the `font-size`.
77
75
78
76
```html
79
77
<pstyle="letter-spacing: 0.15em!important">
80
78
The toy brought back fond memories of being lost in the rain forest.
81
79
</p>
82
80
```
83
81
84
-
#### Passed Example 3
82
+
#### Passed Example 2
85
83
86
-
This `p` element has a [computed][][letter-spacing][] of `3px`, which is **wide enough** (the threshold is `3px`).
84
+
This `p` element has a [computed][]`letter-spacing` of `3px`, which is exactly 0.12 the `font-size` of `25px`.
87
85
88
86
```html
89
87
<style>
@@ -97,64 +95,48 @@ This `p` element has a [computed][] [letter-spacing][] of `3px`, which is **wide
97
95
</p>
98
96
```
99
97
100
-
#### Passed Example 4
98
+
#### Passed Example 3
101
99
102
-
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**.
100
+
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`, which is wide enough.
The toy brought back fond memories of being lost in the rain forest.
107
105
</p>
108
106
```
109
107
110
-
#### Passed Example 5
108
+
#### Passed Example 4
111
109
112
-
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**.
110
+
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`, which is wide enough.
The toy brought back fond memories of being lost in the rain forest.
117
115
</p>
118
116
```
119
117
120
-
#### Passed Example 6
121
-
122
-
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.
123
-
124
-
```html
125
-
<style>
126
-
p {
127
-
letter-spacing: 0.1em!important;
128
-
}
129
-
</style>
130
-
131
-
<pstyle="letter-spacing: 0.15em">
132
-
The toy brought back fond memories of being lost in the rain forest.
133
-
</p>
134
-
```
135
-
136
-
#### Passed Example 7
118
+
#### Passed Example 5
137
119
138
-
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][]**.
120
+
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.
The toy brought back fond memories of being lost in the rain forest.
144
-
</span>
145
-
</p>
126
+
</p>
127
+
</div>
146
128
```
147
129
148
-
#### Passed Example 8
130
+
#### Passed Example 6
149
131
150
-
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][]**.
132
+
This `p` element has a [computed][]`letter-spacing` of 0.2 times its `font-size`; the `div` element has no [visible][]text node children.
151
133
152
134
```html
153
-
<pstyle="letter-spacing: 0.1em">
154
-
<spanstyle="letter-spacing: unset!important;">
135
+
<divstyle="letter-spacing: 0.1em!important">
136
+
<pstyle="letter-spacing: 0.2em!important;">
155
137
The toy brought back fond memories of being lost in the rain forest.
156
-
</span>
157
-
</p>
138
+
</p>
139
+
</div>
158
140
```
159
141
160
142
### Failed
@@ -219,48 +201,106 @@ There is no HTML element.
219
201
220
202
#### Inapplicable Example 2
221
203
222
-
This `p` element is not [visible][] because of `display: none`.
The toy brought back fond memories of being lost in the rain forest.
237
227
</p>
238
228
```
239
229
240
-
#### Inapplicable Example 4
230
+
#### Inapplicable Example 5
241
231
242
-
The `style` attribute of this `p` element does not [declare][declared] the `letter-spacing` property.
232
+
This `p` element's `letter-spacing` property is not [declared][] in a `style` attribute.
243
233
244
234
```html
245
235
<pstyle="width: 60%">
246
236
The toy brought back fond memories of being lost in the rain forest.
247
237
</p>
248
238
```
249
239
240
+
#### Inapplicable Example 6
241
+
242
+
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][]).
243
+
244
+
```html
245
+
<style>
246
+
p {
247
+
letter-spacing: 0.1em!important;
248
+
}
249
+
</style>
250
+
251
+
<pstyle="letter-spacing: 0.15em">
252
+
The toy brought back fond memories of being lost in the rain forest.
253
+
</p>
254
+
```
255
+
256
+
#### Inapplicable Example 7
257
+
258
+
This `p` element does not have an [important][][computed][]`letter-spacing`.
259
+
260
+
```html
261
+
<pstyle="letter-spacing: 0.1em">
262
+
The toy brought back fond memories of being lost in the rain forest.
263
+
</p>
264
+
```
265
+
266
+
#### Inapplicable Example 8
267
+
268
+
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.
269
+
270
+
```html
271
+
<pstyle="letter-spacing: 0.1em">
272
+
<spanstyle="letter-spacing: inherit!important;">
273
+
The toy brought back fond memories of being lost in the rain forest.
274
+
</span>
275
+
</p>
276
+
```
277
+
278
+
#### Inapplicable Example 9
279
+
280
+
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.
281
+
282
+
```html
283
+
<pstyle="letter-spacing: 0.1em">
284
+
<spanstyle="letter-spacing: unset!important;">
285
+
The toy brought back fond memories of being lost in the rain forest.
0 commit comments