Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update line-height-not-important-78fd32.md #1683

Merged
merged 19 commits into from
Feb 7, 2022
Merged

Update line-height-not-important-78fd32.md #1683

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
6b7c13d
Update line-height-not-important-78fd32.md
tbostic32 Aug 12, 2021
2460340
Added multiline example, changed accessibility support.
tbostic32 Oct 7, 2021
4d9ff6e
Updated to use used value. Modified applicability and examples to be …
tbostic32 Oct 20, 2021
4ede9d3
Update _rules/line-height-not-important-78fd32.md
tbostic32 Oct 21, 2021
0eb6ecf
Update _rules/line-height-not-important-78fd32.md
tbostic32 Oct 21, 2021
b06cdd6
Updated applicability with line-break definition.
tbostic32 Nov 3, 2021
00c9543
Merge branch 'patch-5' of https://github.com/tbostic32/act-rules.gith…
tbostic32 Nov 3, 2021
efee61d
Added assumption.
tbostic32 Nov 4, 2021
41aff91
Update _rules/line-height-not-important-78fd32.md
tbostic32 Dec 2, 2021
4763587
Moved background paragraph to assumption.
tbostic32 Dec 2, 2021
88e5a1d
Updating computed -> used.
tbostic32 Dec 2, 2021
cab8db5
Added sentences on used value over computed value.
tbostic32 Dec 15, 2021
cfddbca
Merge branch 'develop' into patch-5
tbostic32 Dec 16, 2021
bbf9009
Updating line height inapplicable example and fixing problems with CI…
tbostic32 Jan 4, 2022
e2d0e00
Apply suggestions from code review
tbostic32 Jan 10, 2022
5a78859
Merge branch 'develop' into patch-5
tbostic32 Jan 10, 2022
a85d7fc
Merge branch 'develop' into patch-5
tbostic32 Jan 27, 2022
a488f83
Merge branch 'develop' into patch-5
tbostic32 Jan 27, 2022
e83fac6
Merge branch 'develop' into patch-5
tbostic32 Feb 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 34 additions & 24 deletions _rules/line-height-not-important-78fd32.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,20 @@ acknowledgments:

## Applicability

This rule applies to any HTML element that is [visible][] and for which the `style` attribute [declares][declared] the [line-height][] CSS property.
This rule applies to any HTML element with multi-line text that is [visible][] and for which the `style` attribute [declares][declared] the [line-height][] CSS property.
tbostic32 marked this conversation as resolved.
Show resolved Hide resolved

## Expectation

For each test target, at least 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 times the [computed][] value of its [font-size][] property; or
- **large enough**: the used value of its [line-height][] property is at least 1.5 times the [computed][] value of its [font-size][] property; or
tbostic32 marked this conversation as resolved.
Show resolved Hide resolved
- **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.
tbostic32 marked this conversation as resolved.
Show resolved Hide resolved

- 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.
Expand All @@ -47,6 +45,8 @@ When a style is [declared][] in the `style` attribute with an [important][] decl

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.

This rule does not consider other style attributes that could be used to increase 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 `1.4.12`. 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 `1.4.12` due to other styling choices.
tbostic32 marked this conversation as resolved.
Show resolved Hide resolved

tbostic32 marked this conversation as resolved.
Show resolved Hide resolved
- [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)
Expand All @@ -60,7 +60,7 @@ CSS specifications define each declaration as being either [important][] (if is
This `p` element has a **not [important][]** [computed][] `line-height`.

```html
<p style="line-height: 1.2em">
<p style="line-height: 1.2em; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -86,7 +86,7 @@ This `p` element has a [computed][] `line-height` of `30px`, which is **large en
}
</style>

<p style="line-height: 30px !important">
<p style="line-height: 30px !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -102,7 +102,7 @@ This `p` element has a [computed][] `line-height` of `25.6px` (160% of `16px`) w
}
</style>

<p style="line-height: 160% !important">
<p style="line-height: 160% !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -112,7 +112,7 @@ This `p` element has a [computed][] `line-height` of `25.6px` (160% of `16px`) w
This `p` element has a [computed][] `line-height` of `1.6` which is **large enough**.
tbostic32 marked this conversation as resolved.
Show resolved Hide resolved

```html
<p style="line-height: 1.6 !important">
<p style="line-height: 1.6 !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -122,7 +122,7 @@ This `p` element has a [computed][] `line-height` of `1.6` which is **large enou
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
<p style="line-height: 1em !important; line-height: 2em !important">
<p style="line-height: 1em !important; line-height: 2em !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -132,7 +132,7 @@ This `p` element has two [declared][] values for its `line-height` property. The
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
<p style="line-height: 2em !important; line-height: 1em">
<p style="line-height: 2em !important; line-height: 1em; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -148,7 +148,7 @@ The [cascaded][] value of the `line-height` property of this `p` element is [dec
}
</style>

<p style="line-height: 2em">
<p style="line-height: 2em; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -159,7 +159,7 @@ The [computed][] value of the `line-height` property of this `p` element is **no

```html
<p style="line-height: 1.2em">
<span style="line-height: inherit !important;">
<span style="line-height: inherit !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</span>
</p>
Expand All @@ -171,7 +171,7 @@ The [computed][] value of the `line-height` property of this `p` element is **no

```html
<p style="line-height: 1.2em">
<span style="line-height: unset !important;">
<span style="line-height: unset !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</span>
</p>
Expand All @@ -184,7 +184,7 @@ The [computed][] value of the `line-height` property of this `p` element is **no
This `p` element has a [computed][] `line-height` equal to the font size, which is below the required minimum.
tbostic32 marked this conversation as resolved.
Show resolved Hide resolved

```html
<p style="line-height: 1em !important">
<p style="line-height: 1em !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -200,7 +200,7 @@ This `p` element has a [computed][] `line-height` of `20px`, which is below the
}
</style>

<p style="line-height: 20px !important">
<p style="line-height: 20px !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -216,7 +216,7 @@ This `p` element has a [computed][] `line-height` of `19.2px` (120% of `16px`) w
}
</style>

<p style="line-height: 120% !important">
<p style="line-height: 120% !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -226,7 +226,7 @@ This `p` element has a [computed][] `line-height` of `19.2px` (120% of `16px`) w
This `p` element has a [computed][] `line-height` of `1.2` which is below the required minimum.
tbostic32 marked this conversation as resolved.
Show resolved Hide resolved

```html
<p style="line-height: 1.2 !important">
<p style="line-height: 1.2 !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -236,7 +236,7 @@ This `p` element has a [computed][] `line-height` of `1.2` which is below the re
This `p` element has a [computed][] `line-height` of `normal` which is below the required minimum ([used][] value is generally around 1.2).
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<p style="line-height: normal !important">
<p style="line-height: normal !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -246,7 +246,7 @@ This `p` element has a [computed][] `line-height` of `normal` which is below the
This `p` element has a [computed][] `line-height` of `normal` which is below the required minimum ([used][] value is generally around 1.2).
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<p style="line-height: initial !important">
<p style="line-height: initial !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand All @@ -265,30 +265,40 @@ There is no HTML element.

#### Inapplicable Example 2

This `p` element is not [visible][] because of `display: none`.
This `p` element is not multi-line text.

```html
<p style="display: none; line-height: 1em !important">
<p style="line-height: 1em !important;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```

#### Inapplicable Example 3

This `p` element is not [visible][] because it is positioned off-screen.
This `p` element is not [visible][] because of `display: none`.

```html
<p style="position: absolute; top: -999em; line-height: 1em !important;">
<p style="display: none; line-height: 1em !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```

#### Inapplicable Example 4

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

```html
<p style="position: absolute; top: -999em; line-height: 1em !important; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```

#### Inapplicable Example 5

The `style` attribute of this `p` element does not [declare][declared] the `line-height` property.

```html
<p style="width: 60%">
<p style="width: 60%; max-width: 200px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
```
Expand Down