Proposed Important line height in style attributes is wide enough

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.

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 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. 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 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 or user agent 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
• CSS Text Module Level 3 - Spacing
• CSS Visual formatting model details

About test cases

Test cases descriptions abusively refer to the CSS properties of text nodes, meaning the one of their parent.

Accessibility Requirements Mapping

• 1.4.12 Text Spacing (Level AA)

  • Learn more about 1.4.12 Text Spacing
  • Required for conformance to WCAG 2.1 on level AA and higher.
  • Outcome mapping:
    • Any failed outcomes: success criterion is not satisfied
    • All passed outcomes: success criterion needs further testing
    • An inapplicable outcome: success criterion needs further testing

Input Aspects

The following aspects are required in using this rule.

• DOM Tree
• CSS Styling

Test Cases

Passed

Passed Example 1

Open in a new tab

This p element has a used line-height of twice the font size.

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

Passed Example 2

Open in a new tab

This p element has a used line-height of 30px, which is exactly 1.5 times the font-size of 20px.

<style>
	p {
		font-size: 20px;
	}
</style>

<p style="line-height: 30px !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 3

Open in a new tab

This p element has a used line-height of 25.6px (160% of 16px) which is 1.6 times the font-size.

<style>
	p {
		font-size: 16px;
	}
</style>

<p style="line-height: 160% !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 4

Open in a new tab

This p element has a used line-height of 1.6 times the font-size.

<p style="line-height: 1.6 !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 5

Open in a new tab

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.

<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>

Passed Example 6

Open in a new tab

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.

<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>

Passed Example 7

Open in a new tab

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.

<div style="font-size: 16px; line-height: 15px !important">
	<p style="font-size: 10px; max-width: 200px;">
		The toy brought back fond memories of being lost in the rain forest.
	</p>
</div>

Passed Example 8

Open in a new tab

This p element has a computed line-height of 1.5 times its font-size; the div element has no visible text node children.

<div style="letter-spacing: 1em !important">
	<p style="letter-spacing: 1.5em !important; max-width: 200px;">
		The toy brought back fond memories of being lost in the rain forest.
	</p>
</div>

Failed

Failed Example 1

Open in a new tab

This p element has a used line-height equal to the font size, which is below the required minimum.

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

Failed Example 2

Open in a new tab

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.

<style>
	p {
		font-size: 20px;
	}
</style>

<p style="line-height: 20px !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 3

Open in a new tab

This p element has a used line-height of 19.2px (120% of 16px) which is below the required minimum.

<style>
	p {
		font-size: 16px;
	}
</style>

<p style="line-height: 120% !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 4

Open in a new tab

This p element has a used line-height of 1.2 which is below the required minimum.

<p style="line-height: 1.2 !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 5

Open in a new tab

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).

<p style="line-height: normal !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 6

Open in a new tab

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).

<p style="line-height: initial !important; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable

Inapplicable Example 1

Open in a new tab

There is no HTML element.

<svg xmlns="http://www.w3.org/2000/svg">
    <text y="20" style="line-height: 1.2em">ACT rules</text>
</svg>

Inapplicable Example 2

Open in a new tab

There is no text node.

<div style="line-height: 0.1em !important;"></div>

Inapplicable Example 3

Open in a new tab

There is no visible text node because of display: none.

<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

Open in a new tab

There is no visible text node because it is positioned off-screen.

<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

Open in a new tab

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.

<div style="overflow-x: scroll;">
	<p style="line-height: 1em !important; width: 1000px;">
		The toy brought back fond memories of being lost in the rain forest.
	</p>
</div>

Inapplicable Example 6

Open in a new tab

This p element’s line-height property is not declared in a style attribute.

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

Inapplicable Example 7

Open in a new tab

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).

<style>
	p {
		line-height: 1.2em !important;
	}
</style>

<p style="line-height: 2em; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable Example 8

Open in a new tab

This p element does not have an important computed line-height.

<p style="line-height: 1.2em; max-width: 200px;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable Example 9

Open in a new tab

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.

<p style="line-height: 1.2em">
	<span style="line-height: inherit !important; display: block; max-width: 200px;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

Inapplicable Example 10

Open in a new tab

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.

<p style="line-height: 1.2em">
	<span style="line-height: unset !important; display: block; max-width: 200px;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

Glossary

Namespaced Element

An element with a specific namespaceURI value from HTML namespaces. For example an “SVG element” is any element with the “SVG namespace”, which is http://www.w3.org/2000/svg.

Namespaced elements are not limited to elements described in a specification. They also include custom elements. Elements such as a and title have a different namespace depending on where they are used. For example a title in an HTML page usually has the HTML namespace. When used in an svg element, a title element has the SVG namespace instead.

Outcome

An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

• Inapplicable: No part of the test subject matches the applicability
• Passed: A test target meets all expectations
• Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementations using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such “interim” results can be expressed with the incomplete outcome.

Visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

For more details, see examples of visible.

Rule Versions

1. Latest version, 25 October 2022

Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date.

Implementation	Type	Consistency	Report
Total Validator 17.1.0	Linter	Partial

Useful Links

• Github issues related to this rule
• Open a new issue
• Propose a change to the rule