Rule: Text spacing via CSS is below minimum value or not set to !important (b8bb68)
#1251
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,263 @@ | ||
| --- | ||
| id: b8bb68 | ||
| name: Text spacing in `style` attributes is not `!important` | ||
| rule_type: atomic | ||
| description: | | ||
| This rule checks that the text spacing styles can be adjusted by user, i.e. that `!important` is not applied to the style, unless the style has already exceeded the specified metric for retaining content visibility and functionality. | ||
| 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: | ||
| - Jey Nandakumar | ||
| --- | ||
|
|
||
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ## Applicability | ||
|
|
||
| This rule applies to any HTML element that is [visible][], for which one of the following is true: | ||
|
|
||
| - the `style` attribute [declares][declared][][word-spacing][] CSS property; or | ||
| - the `style` attribute [declares][declared][][letter-spacing][] CSS property; or | ||
| - the `style` attribute [declares][declared][][line-height][] CSS property. | ||
|
Comment on lines
+23
to
+27
There was a problem hiding this comment. Think we concluded to split this rule, right? There was a problem hiding this comment. Yes that is right & here is the secondary PR, where there are 3 atomic rules addressing test spacing. |
||
|
|
||
| ## Expectation 1 | ||
|
|
||
| For the test target's [word-spacing][] property, one of the following is true: | ||
|
|
||
| - has no [declared][] value; or | ||
|
There was a problem hiding this comment. This kinda makes me think there should be three separate rules here. We're using conditional logic in the expectations to get around the issue that the applicability is too broad. What would others think about breaking this into 3 rules? There was a problem hiding this comment. @WilcoFiers we discussed the possibility to split this rule into 3 in this conversation. @Jym77 and @EmmaJP lets discuss this again. Personally I am open to it. There was a problem hiding this comment. I'm also open to it. 🤔 with the conditional list in expectations, and the weird case in each "the property has no declared value", I say I'm slightly in favour of splitting. |
||
| - the [declared][] value specified via the `style` attribute does not have the [important flag][]; or | ||
| - the [computed][] value is at least `0.16` times its [computed][] [font-size][]. | ||
|
|
||
| ## Expectation 2 | ||
|
|
||
| For the test target's [letter-spacing][] property, one of the following is true: | ||
|
|
||
| - has no [declared][] value; or | ||
| - the [declared][] value specified via the `style` attribute does not have the [important flag][]; or | ||
| - the [computed][] value is at least `0.12` times its [computed][] [font-size][]. | ||
|
|
||
| ## Expectation 3 | ||
|
|
||
| For the test target's [line-height][] property, one of the following is true: | ||
|
|
||
| - no [declared][] value; or | ||
| - the [declared][] value specified via the `style` attribute does not have the [important flag][]; or | ||
| - the [computed][] value is at least `1.5` times its [computed][] [font-size][]. | ||
|
|
||
| ## Assumptions | ||
|
|
||
| If there is a mechanism available on the page by which text spacing can be adjusted, failing this rule might not mean [success criterion 1.4.12 Text spacing](https://www.w3.org/TR/WCAG21/#text-spacing) is not satisfied. | ||
|
|
||
| ## Accessibility Support | ||
|
|
||
| While some assistive technologies are able to set [user origin][] styles, others, such as browser extensions, are only able to set style with the [author origin][]. Such assistive technologies can not create styles with a high enough [priority][] to override a `style` attribute with the [important flag][]. If accessibility support does not include assistive technologies that override text spacing through [author origin][], this rule should not be used. | ||
|
|
||
| ## Background | ||
|
|
||
| - [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 | ||
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ### Passed | ||
|
|
||
| #### Passed Example 1 | ||
|
|
||
| This `p` element has a `line-height` of `32px` (equals `2em` ) which is above the recommended metric, given the specified font size is 16 pixels. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <p style="line-height: 32px; !important"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </p> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Passed Example 2 | ||
|
|
||
| This `div` element has a `letter-spacing` of `0.12em` which is equal to the recommended minimum, given the specified font size is 16 pixels. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <div style="letter-spacing: 0.12em; !important"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </div> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Passed Example 3 | ||
|
|
||
| This `strong` element has a `word-spacing` of `1.92pt !important` (equals `0.12em`) which is equal to the recommended minimum, given the specified font size is 16 pixels. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <strong style="word-spacing: 1.92pt !important;"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </strong> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ### Failed | ||
|
|
||
| #### Failed Example 1 | ||
|
|
||
| This `p` element has a `line-height` of `10px !important` (equals `0.625em` ) which is below the recommended minimum, given the specified font size of the body is 16 pixels. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <p style="line-height: 30px !important"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </p> | ||
| </body> | ||
| </html> | ||
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ``` | ||
|
|
||
| #### Failed Example 2 | ||
|
|
||
| This `div` element has a `letter-spacing` of `1.5px !important` (equals `0.09375em`) which is below to the recommended minimum, given the specified font size is 16 pixels. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <div style="letter-spacing: 1.5px !important;"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </div> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Failed Example 3 | ||
|
|
||
| This `strong` element has a `word-spacing` of `2.5px !important` (equals `0.15625em` ) which is below the recommended minimum, given the specified font size is 16 pixels. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <strong style="word-spacing: 8px !important;"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </strong> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ### Inapplicable | ||
jeeyyy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| #### Inapplicable Example 1 | ||
|
|
||
| This `p` element is not [visible][] because of `display: none`. | ||
|
|
||
| ```html | ||
| <p style="display: none"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </p> | ||
| ``` | ||
|
|
||
| #### Inapplicable Example 2 | ||
|
|
||
| This text is not [visible][] because it is positioned off screen. | ||
|
|
||
| ```html | ||
| <p style="position: absolute; top: -999em"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </p> | ||
| ``` | ||
|
|
||
| #### Inapplicable Example 3 | ||
|
|
||
| This `body` element does not have a `style` attribute specified. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| line-height: 50px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| #### Inapplicable Example 4 | ||
|
|
||
| This `p` element has a [line-height][] of `24px` specified via the style attribute, but does not have the [important flag][]. | ||
|
|
||
| ```html | ||
| <html> | ||
| <style> | ||
| body { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <p style="line-height: 24px;"> | ||
| The toy brought back fond memories of being lost in the rain forest. | ||
| </p> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| [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' | ||
| [letter-spacing]: https://www.w3.org/TR/css-text-3/#propdef-letter-spacing 'CSS Text Module Level 3 - Tracking: the letter-spacing property' | ||
| [line-height]: https://drafts.csswg.org/css2/visudet.html#propdef-line-height 'CSS Visual formatting model details - line-height property' | ||
| [priority]: https://www.w3.org/TR/cssom/#dom-cssstyledeclaration-getpropertypriority 'CSS Object Model (CSSOM) - Definition getComputedPriority' | ||
| [computed]: https://www.w3.org/TR/css-cascade-3/#computed-value 'CSS Cascading and Inheritance Level 3 - Computed Values' | ||
| [author origin]: https://drafts.csswg.org/css-cascade-4/#cascade-origin-author 'CSS Cascading and Inheritance Level 4 - Cascading Origins - Author Origin' | ||
| [user origin]: https://drafts.csswg.org/css-cascade-4/#cascade-origin-user 'CSS Cascading and Inheritance Level 4 - Cascading Origins - User Origin' | ||
| [font-size]: https://www.w3.org/TR/css-fonts-3/#propdef-font-size 'CSS Fonts Module Level 3- Font size: the font-size property' | ||
| [important flag]: https://www.w3.org/TR/cssom/#css-declaration-important-flag 'CSS Object Model (CSSOM) - important flag' | ||
| [declared]: https://www.w3.org/TR/css-cascade-3/#declared 'CSS Cascading and Inheritance Level 3 - Declared Values' | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.